返回上一级
原生JS实现文字从下到上无缝轮播效果 公告轮播效果
多说无益，先看效果
公告
在市面上找了许多无缝轮播效果样式，基本都离不开jQ，只好自己把jQ改写成原生实现了
来源地址：https://www.cnblogs.com/ccdr/p/10082157.html
这是原来jQ的实现部分
1/*
2* 参数说明
3* obj : 动画的节点，本例中是ul
4* top : 动画的高度，本例中是-35px;注意向上滚动是负数
5* time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
6* function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
7*
8*/
9function noticeUp(obj,top,time) {
10 $(obj).animate({
11 marginTop: top
12 }, time, function () {
13 $(this).css({marginTop:"0"}).find(":first").appendTo(this);
14 })
15}
换用原生JS实现
1function noticeUp(obj, top, time) {
2 var element = document.querySelector(obj);
3 var start = null;
4 var targetMarginTop = parseInt(top, 10);
5 var initialMarginTop = parseInt(window.getComputedStyle(element).marginTop, 10);
6 var changeInValue = targetMarginTop - initialMarginTop;
7 var currentTime = 0;
8 var increment = 20;
9 var animateMargin = function (timestamp) {
10 if (!start) start = timestamp;
11 currentTime += increment;
12 var val = Math.easeInOutQuad(currentTime, initialMarginTop, changeInValue, time);
13 element.style.marginTop = val + 'px';
14 if (currentTime < time) {
15 requestAnimationFrame(animateMargin);
16 } else {
17 element.style.marginTop = '0px';
18 element.appendChild(element.firstElementChild);
19 }
20 };
21 // t = current time, b = start value, c = change in value, d = duration
22 Math.easeInOutQuad = function (t, b, c, d) {
23 t /= d / 2;
24 if (t < 1) return c / 2 * t * t + b;
25 t--;
26 return -c / 2 * (t * (t - 2) - 1) + b;
27 };
28 requestAnimationFrame(animateMargin);
29}
不得不说jQ真的方便，比原生现实代码少了几倍
最后整个页面整理了一下
大概就是
1<!DOCTYPE html>
2<html>
3
4<head lang="en">
5 <meta charset="UTF-8">
6 <title>文字从下到上无缝轮播</title>
7 <style>
8 div,
9 ul,
10 li {
11 margin: 0;
12 padding: 0
13 }
14
15 /*先初始化一下默认样式*/
16 .notice {
17 width: 300px;
18 /*单行显示，超出隐藏*/
19 height: 35px;
20 /*固定公告栏显示区域的高度*/
21 padding: 0 30px;
22 background-color: #b3effe;
23 overflow: hidden;
24 }
25
26 .notice ul li {
27 list-style: none;
28 line-height: 35px;
29 /*以下为了单行显示，超出隐藏*/
30 display: block;
31 white-space: nowrap;
32 text-overflow: ellipsis;
33 overflow: hidden;
34 }
35 </style>
36</head>
37
38<body>
39 <div class="notice">
40 <ul>
41 <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li>
42 <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li>
43 <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li>
44 <li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li>
45 </ul>
46 </div>
47 <script>
48 function noticeUp(obj, top, time) {
49 var element = document.querySelector(obj);
50 var start = null;
51 var targetMarginTop = parseInt(top, 10);
52 var initialMarginTop = parseInt(window.getComputedStyle(element).marginTop, 10);
53 var changeInValue = targetMarginTop - initialMarginTop;
54 var currentTime = 0;
55 var increment = 20;
56
57 var animateMargin = function (timestamp) {
58 if (!start) start = timestamp;
59 currentTime += increment;
60 var val = Math.easeInOutQuad(currentTime, initialMarginTop, changeInValue, time);
61 element.style.marginTop = val + 'px';
62 if (currentTime < time) {
63 requestAnimationFrame(animateMargin);
64 } else {
65 element.style.marginTop = '0px';
66 element.appendChild(element.firstElementChild);
67 }
68 };
69
70 // t = current time, b = start value, c = change in value, d = duration
71 Math.easeInOutQuad = function (t, b, c, d) {
72 t /= d / 2;
73 if (t < 1) return c / 2 * t * t + b;
74 t--;
75 return -c / 2 * (t * (t - 2) - 1) + b;
76 };
77
78 requestAnimationFrame(animateMargin);
79 }
80
81
82 setInterval("noticeUp('.notice ul','-35px',500)", 2000);
83
84 </script>
85</body>
86
87</html>