简单的走马灯实现
introduce
因为项目需要,突然需要做一个类似跑马灯的实现;以为很难,心如死灰,最后发现贼简单。附上代码如下。源码在github上
tool
- vscode[带插件,用起来方便]
- chrome
- zepto[简化版的jquery],因为做的是h5的手机端
- css3 动画
thought
在手机端做的走马灯是不需要左右按钮选择的,也不需要右下角具体选定那一页。只需要自动滚动即可【未添加点击事件,实际上后续还要加入点击跳转界面】
设置父级div的position为absolute,方便后期移动位置
父级div中有若干个子级,每一个子级都有具体的宽度,例如300px
打开页面自动执行一次run函数,移动300px;给父级元素绑定动画结束的监听事件,当结束之后释放掉添加的run类,然后将第一个子元素复制一份放到父级元素的最后,采用appendto方法。,删除第一个子元素,即已经移动过的元素。
notice:这里移动的是父级元素,只是把隐藏掉的第一个元素删除。
notice run函数是给父级元素添加一个run的类,通过css3来运动
再次执行run函数。
code
实在懒得分离样式和函数了 ,就随便看看吧。反正无所谓的。 需要做到这个时候,对这些样式肯定懂了
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.carousel {
position: absolute;
height: 100px;
width: 3000px;
background: lightgray;
}
.pic {
height: 100px;
width: 100px;
float: left;
margin-right: 20px;
background: lightpink;
}
@keyframes myrun {
0% {
left: 0px;
}
100% {
left: -120px;
}
}
.run {
animation: myrun 1.5s;
animation-timing-function: linear;
}
.carousel:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="carousel">
<div class="pic">1</div>
<div class="pic">2</div>
<div class="pic">3</div>
<div class="pic">4</div>
<div class="pic">5</div>
<div class="pic">6</div>
<div class="pic">7</div>
<div class="pic">8</div>
</div>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script>
// 将第一个节点删除并添加到父元素的最后
// 参数分别是需要删除的元素的类和需要添加元素的父元素的类
function remToAdd(target, parent) {
$($(target)[0]).clone().appendTo(parent);
$(target)[0].remove();
}
// 实现动画效果
function run() {
$('.carousel').addClass('run');
}
$(document).ready(function () {
run();
});
$('.carousel').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$('.carousel').removeClass('run');
remToAdd('.pic', '.carousel');
setTimeout("run()", 0);
})
</script>
</body>
</html>
writer&contact
Jontyy jontyy@163.com