JavaScript DOM编程艺术——实用的动画

最新推荐文章于 2021-12-06 20:37:14 发布

liaoai

最新推荐文章于 2021-12-06 20:37:14 发布

阅读量138

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/liaoai/article/details/120789660

版权

HTML CSS JavaScript 交互效果悬停事件

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Design</title>
    <script src="scripts/addLoadEvent.js"></script>
    <script src="scripts/example08.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Web Design</h1>
    <p>These are the tings</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>
    <div id="slideshow">
        <img src="images/four.jpg" alt="design" id="preview">
    </div>
</body>
</html>

CSS代码

#slideshow{
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

JavaScript代码

function positionMessage(){
    if(!document.getElementById) return false;
    var elem = document.getElementById("preview");
    elem.style.position="absolute";
    elem.style.left="0";
    elem.style.top="0";
    var list = document.getElementById("linklist");
    var link = list.getElementsByTagName("a");
    link[0].onmouseover = function(){
        moveElement("preview",-100,0,10);
    };
    link[1].onmouseover = function(){
        moveElement("preview",-200,0,10);
    }
    link[2].onmouseover = function(){
        moveElement("preview",-300,0,10);
    }
}
function moveElement(elementID,final_x,final_y,interval){
    if(!document.getElementById) return false;
    var elem = document.getElementById(elementID);
    //当movement属性存在时，清除积累在setTimeout中的事件
    if(elem.movement){
        clearTimeout(elem.movement);
    }
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if(xpos==final_x&&ypos==final_y) return true;
    if(xpos<final_x){
        xpos++;
    }
    if(xpos>final_x){
        xpos--;
    }
    if(ypos<final_y){
        ypos++;
    }
    if(ypos>final_y){
        ypos--;
    }
    elem.style.left = xpos+"px";
    elem.style.top = ypos+"px";
    //moveElement(elementID,final_x,final_y,interval)
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    // movement = setTimeout(repeat,interval);     不使用var 隐式的定义了全局变量
    //此处使用全局变量不合适，当用户移动链接较快时，movement变量一直在变化，导致动画滞后
    //全局、局部变量都不可使用，可为elem添加属性
    elem.movement = setTimeout(repeat,interval);     
}
addLoadEvent(positionMessage);

liaoai

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript DOM编程艺术——实用的动画

效果HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫

专栏目录