JavaScript animation effect

JavaScript animation effect
JavaScript animation effect

I. Introduction

Use JavaScript to dynamically change the element position to achieve the animation effect. Instance, move the mouse to the link, and display the corresponding image below. It is mainly the application of the layered structure of web pages.

II. Key Points

The position attribute and overflow attribute varvariable = setTimeout ("function", interval) of the element in CSS; // The periodic triggering function clearTimeout (variable ); // clear the time trigger function. variable is the return value of setTimeout. ParseInt (str); // converts a string to an integer parseFloat (str); // converts a string to a floating point Math. ceil (number); // rounded up to Math. floor (number); // round down Math. round (number); // rounding

Iii. Implementation

Effect:

List.html:

    
     Web Design    
     <script src="../js/moveElementImprove.js"></script>    <script src="../js/list.js"></script>    <script src="../js/addLoadEvent.js"></script>Web Design
These are the things you should know.
 
 
    
  
  
Structure
    
  
  
Presentation
    
  
  
Behavior
 
 

List.css:

#slideShow {    width: 100px;    height: 100px;    position: relative;    overflow: hidden;}#preview {    position: absolute;}

List. js:

/** * Created by andychen on 2015/1/9. */function prepareSlideShow() {    var div = document.createElement("div");    div.id = "slideShow";    var img = document.createElement("IMG");    img.id = "preview";    img.src = "../images/preview.png";    img.alt = "building blocks of web design";    div.appendChild(img);    insertAfter(document.getElementById("linkList"), div);    var links = document.getElementsByTagName("a");    links[0].onmouseover = function () {        moveElementImprove("preview", -100, 0, 10);    };    links[1].onmouseover = function () {        moveElementImprove("preview", -200, 0, 10);    };    links[2].onmouseover = function () {        moveElementImprove("preview", -300, 0, 10);    }}function insertAfter(targetTag, newTag) {    var parent = targetTag.parentNode;    if (parent.lastChild == targetTag) {        parent.appendChild(newTag);    } else {        parent.insertBefore(newTag, targetTag.nextSibling);    }}

MoveElementImprove. js:

/** * Created by andychen on 2015/1/9. */function moveElementImprove (elementId, final_x, final_y, interval) {    var elem = document.getElementById(elementId);    if(elem.movement) {        clearTimeout(elem.movement);    }    if(!elem.style.left) {        elem.style.left = '0px';    }    if(!elem.style.top) {        elem.style.top = '0px';    }    var topPosition = parseInt(elem.style.top);    var leftPosition = parseInt(elem.style.left);    var dist = 0;    if (topPosition < final_y) {        dist = Math.ceil((final_y - topPosition) / 10);        topPosition += dist;    }    if (topPosition > final_y) {        dist = Math.ceil((topPosition - final_y) / 10);        topPosition -= dist;    }    if (leftPosition < final_x) {        dist = Math.ceil((final_x - leftPosition) / 10);        leftPosition += dist;    }    if (leftPosition > final_x) {        dist = Math.ceil((leftPosition - final_x) / 10);        leftPosition -= dist;    }    if (topPosition == final_y && leftPosition == final_x) {        return true;    }    elem.style.top = topPosition + 'px';    elem.style.left = leftPosition + 'px';    var repeat = "moveElementImprove('"+elementId+"', "+final_x+", "+final_y+", "+interval+")";    elem.movement = setTimeout(repeat, interval);}

AddLoadEvent. js is mentioned above.