王雨的JavaScript练习06---js实现动画效果（2）

鼠标移动到链接上，触发onmouseover事件，然后通过函数实现下面的图片轮播。这个demo实现了行为层，表示层，结构层完全分离。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" media="screen" href="css/layout.css" />
</head>
<body>
<h1>WEB DESIGN</h1>
<p>These are the things you should know.</p>
<ol id="linklist">
    <li><a href="structure.html">Structure</a></li>
    <li><a href="presentation.html">presentation</a></li>
    <li><a href="behavior.html">behavior</a></li>
</ol>
<script src="js/addLoadEvent.js"></script>
<script src="js/moveElement.js"></script>
<script src="js/prepareSlideshow.js"></script>
<script src="js/insertAfter.js"></script>
</body>
</html>

css：

#slideshow{
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
#preview{
    position: absolute;
}

　　js：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function insertAfter(newElement,targetElement) {
     var parent = targetElement.parentNode;
     if (parent.lastChild == targetElement){
         parent.appendChild(newElement);
     }else {
         parent.insertBefore(newElement,targetElement.nextSibling);
     }
}

function moveElement(elementID,final_x,final_y,interval) {
    //检查浏览器支持情况
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    //取得元素ID值并赋值给elem
    var elem = document.getElementById(elementID);
    //清除movement已经有的属性，使其复位
    if (elem.movement){
        clearTimeout(elem.movement);
    }
    //检测元素是否有left top值，如果没有添加0px
    if (!elem.style.left){
        elem.style.left = "0px";
    }
    if (!elem.style.top){
        elem.style.top = "0px";
    }
    //通过parseInt函数把style值转换成number类型
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    var dist = 0;
    //判断xpos ypos是否和最终坐标相等
    if (xpos == final_x && ypos == final_y){
        return true;
    }
    //不相等时候，xpos ypos进行相应的变化
    //每次移动起点与终点距离的十分之一，math.celi函数返回一个不小于dist的整数
    //例：math.ceil（0.7）=1，math.ceil（0.1）=1
    if (xpos < final_x){
        dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
    }
    if (xpos > final_x){
        dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
    }
    if (ypos < final_y){
        dist = Math.ceil((final_y - ypos)/10);
        ypos = ypos + dist;
    }
    if (ypos > final_y){
        dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
    }
    //把xpos ypos赋值给elem的style.left .right，然后再加上px
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    //通过自调用实现重复执行
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"
    //movement是elem一个属性
    elem.movement = setTimeout(repeat,interval);
}

function prepareSlideshow() {
    //检查浏览器支持情况，文档里面是否有ID为linklist的元素
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("linklist")) return false;
    //创建一个div，并设置id属性
    var slideshow = document.createElement("div");
    slideshow.setAttribute("id","slideshow");
    //创建一个img，并设置src alt id属性
    var preview = document.createElement("img");
    preview.setAttribute("src","img/toppics.png");
    preview.setAttribute("alt","xxxxxxx");
    preview.setAttribute("id","preview");
    //把img添加到div里面
    slideshow.appendChild(preview);
    var list = document.getElementById("linklist");
    //把div添加到文档list后面
    insertAfter(slideshow,list);
    var links = list.getElementsByTagName("a");
    //给a标签添加鼠标事件，事件调用moveelement函数完成图片移动
    links[0].onmouseover = function () {
        moveElement("preview",-200,0,10);
    }
    links[1].onmouseover = function () {
        moveElement("preview",-400,0,10);
    }
    links[2].onmouseover =function () {
        moveElement("preview",-600,0,10);
    }
}
addLoadEvent(prepareSlideshow);

　　

posted @ 2017-05-16 21:11  王雨的博客  阅读(170)  评论(0)  编辑  收藏  举报