列表走马灯效果(上下滚动)
方案一
adds()
$('#ck_center_top2_ul').mouseover(function() {
//鼠标移入
clearInterval(a);
}).mouseleave(function() {
//鼠标移出
adds();
});
function adds() {
a = setInterval(function() {
addadd()
}, 1000)
function addadd() {
var oul = document.getElementById("ck_center_top2_ul");
var olis = oul.getElementsByTagName("li")[0];
var delLi = $('#ck_center_top2_ul li').eq(0);
olis.className = "flipOutX";
setTimeout(function() {
olis.style.cssText = "padding:0;border-width:0;margin:0;height:0";
}, 280);
setTimeout(function() {
olis.classList.remove('flipOutX');
oul.removeChild(olis)
olis.style.cssText = "border-width:1px;height:2.5rem";
oul.appendChild(olis)
}, 1000)
}
};
走马灯滚动样式
```javascript
@keyframes flipOutX {
from {
-webkit-transform: perspective(25rem);
transform: perspective(25rem);
}
30% {
-webkit-transform: perspective(25rem) rotate3d(1, 0, 0, -20deg);
transform: perspective(25rem) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(25rem) rotate3d(1, 0, 0, 90deg);
transform: perspective(25rem) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
animation-duration: .7s;
animation-timing-function: linear;
-webkit-animation-duration: .7s;
animation-fill-mode: forwards;
/*规定对象动画时间之外的状态*/
-webkit-animation-fill-mode: forwards
}
方案二
window.onload = function() {
function dMarquee(id) {
let speed = 20; //速度
let stop = 1000; //停止时间
let ul = document.getElementById(id); //获取ul元素
let rows = ul.getElementsByTagName('li').length; //获取li个数
let height = ul.getElementsByTagName('li')[0].offsetHeight; //取得第一个li的高度
ul.innerHTML += ul.innerHTML; //获取所有li
let timeID = false; //setTime的时间标示
let play = function() { //移动方法
ul.scrollTop++; //移动滚动条
//移动到底的时候恢复为零
if (ul.scrollTop === rows * height) {
ul.scrollTop = 0;
}
//每次滚动
if (ul.scrollTop % height === 0) {
timeID = setTimeout(play, stop);
} else {
timeID = setTimeout(play, speed);
}
}
timeID = setTimeout(play, stop);
ul.onmouseover = function() {
clearTimeout(timeID);
}
ul.onmouseout = play;
}
dMarquee('ck_center_top2_ul') //传入id值
}