王雨的JavaScript練習06---js實現動畫效果（2）

時間 2019-12-04

原文原文鏈接

鼠標移動到連接上，觸發onmouseover事件，而後經過函數實現下面的圖片輪播。這個demo實現了行爲層，表示層，結構層徹底分離。javascript

html：css

<!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：html

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

　　js：java

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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。