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

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

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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:

1
2
3
4
5
6
7
8
9
#slideshow{
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}
#preview{
    position: absolute;
}

  js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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 @   王雨的博客  阅读(170)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
历史上的今天:
2016-05-16 JAVA第六次作业
点击右上角即可分享
微信分享提示