用到一些封装好的运动函数，主要是定时器
效果为图片和图片的描述定时自动更换。
复制代码
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li, p, h3 { padding: 0; margin: 0; list-style: none; } img { border: none; vertical-align: top; } #bg_box { width: 1000px; height: 590px; margin: 50px auto; position: relative; background: url(img/bg1.jpg) no-repeat; } .pic { width: 440px; height: 274px; position: absolute; top: 50px; left: 220px; overflow: hidden; } .li_box { width: 1760px; height: 274px; position: absolute; left: 0; } .tags { width: 440px; height: 80px; position: absolute; bottom: -80px; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%); color: white; padding-left: 20px; padding-top: 15px; box-sizing: border-box; } .tags:nth-of-type(1) { /*bottom: 0;*/ } .img { float: left; width: 440px; height: 274px; } h3 { font: bold 20px/30px "微软雅黑"; } p { font: 16px/30px "微软雅黑"; } </style> <script src="tween.js"></script> <script src="commom.js"></script> <script type="text/javascript"> window.onload = function() { //获取元素 var liBbox = $('ul')[0]; var li = $('li'); var tags = $('.tags') var num = 0; //设置初始位置 Change() function Change() { var M = tags[num]; MTween(M, 'bottom', 0, 500, 'px', 'linear', function() { //先让描述内容出现 num++ if(num > li.length - 1) { //边界设置。 return; } setTimeout(function() { MTween(M, 'bottom', -80, 500, 'px', 'linear', function() { //让描述内容不显示 MTween(liBbox, 'left', -num * 440, 800, 'px', 'linear', function() { Change(); }); //切换图片 }); }, 1000) }); } } </script> </head> <body> <section id="bg_box"> <div class="pic"> <ul class="li_box"> <li> <img class="img" src="img/a5.gif"> </li> <li> <img class="img" src="img/a6.gif"> </li> <li> <img class="img" src="img/a7.gif"> </li> <li> <img class="img" src="img/a8.gif"> </li> </ul> <div class="tags"> <h3 class="title">下雨了~~~</h3> <p class="tag">这是一个适合在家睡觉的日子!!</p> </div> <div class="tags"> <h3 class="title">包饺子~~~</h3> <p class="tag">一只会居家过日子的小狐狸！！</p> </div> <div class="tags"> <h3 class="title">生气了~~~</h3> <p class="tag">吃掉好吃的就不生气了！！</p> </div> <div class="tags"> <h3 class="title">出发了~~~</h3> <p class="tag">来一段说走就走的旅行!!</p> </div> </div> </section> </body> </html>
commom.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
44function MTween(obj,attr,end,duration,unit,way,callBack){ if(obj.isAnim) return; //obj开始运动了 自定义属性 obj.isAnim = true; if(!way){ //如果用户没有选择运动方式就默认匀速 way = 'linear'; } if(!unit){ //如果用户没有选择运动方式就默认匀速 unit = ''; } var start = parseFloat(getStyle(obj,attr));//起始位置 // var end = 1000;//目标点 // var duration = 1000;//动画执行的总时间 单位是毫秒 var startTime = Date.now(); var s = end - start; //总路程 // var v = s/duration; //计算出来的速度 //每次20ms走一帧 clearInterval(timer); var timer = 0; timer = setInterval(function(){ var endTime = Date.now(); //计算出当前时间 var t = endTime-startTime; if(t>=duration){ t = duration; clearInterval(timer);//到达目标点要清除定时器 } // obj.style[attr] = t*s/duration+start+'px'; // console.log(Tween[way](t,start,s,duration)) obj.style[attr] = Tween[way](t,start,s,duration)+unit; //透明度的兼容处理 if(attr=='opacity'){ obj.style.filter = 'Alpha(opacity='+Tween[way](t,start,s,duration)*100+')'; } if(t==duration){ obj.isAnim = false; //等到上一个动画完成 然后再调用 if(callBack){ callBack(); } } },20); }
tween.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143/* * t : time 已过时间 当前时间-初始时间 * b : begin 起始值 * c : count 总的运动值 总路程 * d : duration 持续时间 总时间 * * s = vt; => c = t*c/d 这里只计算总共要运动的路程 ，不包括起始位置 * * attrVal = t*c/d + b; * * 曲线方程 * * */ //Tween.linear(); var Tween = { linear: function (t, b, c, d){ //匀速 return c*t/d + b; }, easeIn: function(t, b, c, d){ //加速曲线 return c*(t/=d)*t + b; }, easeOut: function(t, b, c, d){ //减速曲线 return -c *(t/=d)*(t-2) + b; }, easeBoth: function(t, b, c, d){ //加速减速曲线 if ((t/=d/2) < 1) { return c/2*t*t + b; } return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInStrong: function(t, b, c, d){ //加加速曲线 return c*(t/=d)*t*t*t + b; }, easeOutStrong: function(t, b, c, d){ //减减速曲线 return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeBothStrong: function(t, b, c, d){ //加加速减减速曲线 if ((t/=d/2) < 1) { return c/2*t*t*t*t + b; } return -c/2 * ((t-=2)*t*t*t - 2) + b; }, elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入） if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, elasticOut: function(t, b, c, d, a, p){ //*正弦增强曲线（弹动渐出） if (t === 0) { return b; } if ( (t /= d) == 1 ) { return b+c; } if (!p) { p=d*0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, elasticBoth: function(t, b, c, d, a, p){ if (t === 0) { return b; } if ( (t /= d/2) == 2 ) { return b+c; } if (!p) { p = d*(0.3*1.5); } if ( !a || a < Math.abs(c) ) { a = c; var s = p/4; } else { var s = p/(2*Math.PI) * Math.asin (c/a); } if (t < 1) { return - 0.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; } return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; }, backIn: function(t, b, c, d, s){ //回退加速（回退渐入） if (typeof s == 'undefined') { s = 1.70158; } return c*(t/=d)*t*((s+1)*t - s) + b; }, backOut: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 3.70158; //回缩的距离 } return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, backBoth: function(t, b, c, d, s){ if (typeof s == 'undefined') { s = 1.70158; } if ((t /= d/2 ) < 1) { return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; } return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出） return c - Tween['bounceOut'](d-t, 0, c, d) + b; }, bounceOut: function(t, b, c, d){//* if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; } return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; }, bounceBoth: function(t, b, c, d){ if (t < d/2) { return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b; } return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b; } }
以上这篇原生js实现简单的焦点图效果实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
最后
以上就是活泼歌曲最近收集整理的关于原生js实现简单的焦点图效果实例的全部内容，更多相关原生js实现简单内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复