现在滚滚屏的效果几乎到处可见,下面我也来记录一组简单的滚滚屏效果,页面中,我只简单的添加了一个小动画。
页面结构:
<div class="container" id="container">
<div id="box">
<div class="con" id="one" style="z-index: 3">
<div class="test">
</div>
</div>
<div class="con" id="two">
<div class="test">
</div>
</div>
<div class="con" id="three">
<div class="test">
</div>
</div>
</div>
<ol id="list" class="list">
</ol>
</div>
样式 :
<style>
* {
margin: 0px;;
padding: 0px;
list-style: none;
}
html, body {
width: 100%;
height: 100%;
background-color: purple;
}
.container {
width: 100%;
height: 100%;
position: relative;
left: 0px;
top: 0px;
left: 0px;
top: 0px;
}
.con {
width: 100%;
height: 100%;
position: absolute;
}
.con .test {
width: 100px;
height: 100px;
background-color: deeppink;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.con.active {
transition: all 2s;
}
.con.active .test {
animation: anim 2s;
}
@-webkit-keyframes anim {
0% {
-webkit-transform: translateX(50px) scale(1.2));
-moz-transform: translateX(50px) scale(1.2);
-ms-transform: translateX(50px) scale(1.2);
-o-transform: translateX(50px) scale(1.2);
transform: translateX(50px) scale(1.2);
}
50% {
-webkit-transform: translateX(0px) scale(.8);
-moz-transform: translateX(0px) scale(.8);
-ms-transform: translateX(0px) scale(.8);
-o-transform: translateX(0px) scale(.8);
transform: translateX(0px) scale(.8);
}
100% {
-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-ms-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
}
@keyframes anim {
0% {
-webkit-transform: translateX(50px) scale(1.2));
-moz-transform: translateX(50px) scale(1.2);
-ms-transform: translateX(50px) scale(1.2);
-o-transform: translateX(50px) scale(1.2);
transform: translateX(50px) scale(1.2);
}
50% {
-webkit-transform: translateX(0px) scale(.8);
-moz-transform: translateX(0px) scale(.8);
-ms-transform: translateX(0px) scale(.8);
-o-transform: translateX(0px) scale(.8);
transform: translateX(0px) scale(.8);
}
100% {
-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-ms-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
}
.container .list {
position: absolute;
right: 10px;
top: 45%;
z-index: 20;
}
.container .list li {
width: 20px;
height: 20px;
border: 3px solid transparent;
background-color: #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin-bottom: 10px;
opacity: 0.5;
z-index: 20;
}
.container .list li.current {
border: 3px solid #fff;
background-color: #1c1c1c;
opacity: 1;
animation: point 1s 0.2s;
}
@keyframes point {
0% {
transform: scale(.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
js :
<script>
var container = document.getElementById("container");
var list = document.getElementById("list");
var box = document.getElementById("box");
var cons = box.children;
console.log(cons.length);
var zIdx = 10;
var nn = 0;
var currentPosition = 0;
//添加小圆点
var arr = ["red", "blue", "yellow"];
for (var i = 0; i < cons.length; i++) {
cons[i].style.backgroundColor = arr[i];
var li = document.createElement("li");
list.appendChild(li);
}
list.children[0].className = "current";
//e.wheelDelta > 0滚轮向下滚动,e.wheelDelta < 0表示滚轮向上滚动
window.onmousewheel = function (e) {
if (e.wheelDelta > 0) {
currentPosition++;
if (currentPosition > cons.length - 1) {
currentPosition = 0;
}
for (var i = 0; i < cons.length; i++) {
cons[i].style.zIndex = 1;
list.children[i].className = "";
cons[i].className = "con";
}
console.log(currentPosition);
cons[currentPosition].style.zIndex = zIdx;
cons[currentPosition].className = "con active";
list.children[currentPosition].className = "current";
} else {
currentPosition--;
if (currentPosition < 0) {
currentPosition = cons.length - 1;
}
for (var i = 0; i < cons.length; i++) {
cons[i].style.zIndex = 1;
list.children[i].className = "";
cons[i].className = "con";
}
console.log(currentPosition);
cons[Math.abs(currentPosition)].style.zIndex = zIdx;
cons[currentPosition].className = "con active";
list.children[Math.abs(currentPosition)].className = "current";
}
}
</script>
更多精彩请关注一下微信公众账号: