Урок 4: Ефект в webnode

От доста време търсех ефект за курсор, който да работи и в Mozilla и в Internet Explorer и в останалите популярни браузъри. Крайният резултат беше искряща пътека от това изображение

Може да видите ефекта на тази страница от училищния ни сайт: http://souhssz.webnode.com/za-vas-roditjeli/

Пригодил съм го за webnode и единственото, което е нужно да направите е да копирате и поставите кода по-долу по познатия начин.

Кода:

<style type="text/css">
    .kisser {
      position:absolute;
      top:0;
      left:0;
      visibility:hidden;
    }
    </style>

    <script type="text/javascript">

    //Kissing trail
    //Visit http://www.rainbow.arch.scriptmania.com for this script

    kisserCount = 15 //maximum number of images on screen at one time
    curKisser = 0 //the last image DIV to be displayed (used for timer)
    kissDelay = 1200 //duration images stay on screen (in milliseconds)
    kissSpacer = 30 //distance to move mouse b4 next heart appears
    theimage = "https://lh3.googleusercontent.com/-Aw4VSL9XHqY/Twqhl_15noI/AAAAAAAAB-E/MeO0Fba3hWI/s193/ani-pastel-sparkles.gif" //the 1st image to be displayed
    theimage2 = "https://lh3.googleusercontent.com/-Aw4VSL9XHqY/Twqhl_15noI/AAAAAAAAB-E/MeO0Fba3hWI/s193/ani-pastel-sparkles.gif" //the 2nd image to be displayed

    //Browser checking and syntax variables
    var docLayers = (document.layers) ? true:false;
    var docId = (document.getElementById) ? true:false;
    var docAll = (document.all) ? true:false;
    var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."
    var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""
    var stylebitK = (docLayers) ? "":".style"
    var showbitK = (docLayers) ? "show":"visible"
    var hidebitK = (docLayers) ? "hide":"hidden"
    var ns6=document.getElementById&&!document.all
    //Variables used in script
    var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage
    lastX = 0
    lastY = 0
    //Collection of functions to get mouse position and place the images
    function doKisser(e) {

Още по темата

Урок 13: Летящи пеперуди Начално образование · 15.01.2013 · Ilievv Предлагам ви един лесен ефект за поставяне в сайтове. Указваме на три изображения да се движат по произволна траектория. Изображенията може да са разл... Урок 10: Ефекти след курсора Начално образование · 12.06.2012 · Ilievv ...училищния сайт. С готов скрипт може да добавите ефект с падащи сърчица и с водни балончета. Достатъчно е да копирате кода с бутона Embed code от Widge... 04.6.2009 г. 12:00:27 Начално образование · 04.06.2009 · mimiivanova C:\Documents and Settings\Administrator\My Documents\К_А_Р_Т_А_учил_екипи.docC:\Documents and Settings\Administrator\My Documents\К_А_Р_Т_А_учил_екипи.doc

      posX = getMouseXPos(e)
      posY = getMouseYPos(e)
      if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {
        showKisser(posX,posY)
        lastX = posX
        lastY = posY
      }
    }
    // Get the horizontal position of the mouse
    function getMouseXPos(e) {
      if (document.layers||ns6) {
        return parseInt(e.pageX-80)
      } else {
        return (parseInt(event.clientX-80) + parseInt(document.body.scrollLeft))
      }
    }
    // Get the vartical position of the mouse
    function getMouseYPos(e) {
      if (document.layers||ns6) {
        return parseInt(e.pageY-60)
      } else {
        return (parseInt(event.clientY-60) + parseInt(document.body.scrollTop))
      }
    }
    //Place the image and start timer so that it disappears after a period of time
    function showKisser(x,y) {
      var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x
      if (curKisser >= kisserCount) {curKisser = 0}
      eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = '" + processedx + "px'")
      eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = '" + y + "px'")
      eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")
      if (eval("typeof(kissDelay" + curKisser + ")")=="number") {
        eval("clearTimeout(kissDelay" + curKisser + ")")
      }
      eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")
      curKisser += 1
    }
    //Make the image disappear
    function hideKisser(knum) {
      eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")
    }

    function kissbegin(){
    //Let the browser know when the mouse moves
    if (docLayers) {
      document.captureEvents(Event.MOUSEMOVE)
      document.onMouseMove = doKisser
    } else {
      document.onmousemove = doKisser
    }
    }

    </script>


    <!-- Copy and paste just before the closing </BODY> tag of your page. -->

    <script type="text/javascript">

    // Add all DIV's of hearts
    if (document.all||document.getElementById||document.layers){
    for (k=0;k<kisserCount;k=k+2) {
      document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')
      document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')

    }
    }
    kissbegin();

    </script>

 

Ако има въпроси съм насреща :)