js实现图片切换(动画版)实现图片切换(动画版)
学习了妙味课堂的图片切换(动画版)
这个小效果相对简单一点。
知识预备:知识预备:
【1】background-position-x
background-position属性设置背景原图像(由 background-image 定义)的位置,意味着使用这个属性的前提是必须设置背景
原图像background-image。
background-position有两个属性值, background-position:x | y,用法上可以对其一个属性单独使用 background-position-x
和 background-position-y。
准备工作完毕,开始写代码
第一步第一步
由于这次需要的div很多,所以采用动态添加的方式,直接看代码
<style>
body{
margin: 0;
background-color: #5e5e5e;
}
#box{
width: 857px;
height: 574px;
padding-top: 126px;
padding-left:143px;
background: url(img/bg.png) no-repeat;
margin: 0px auto;
}
#wrap{
width: 700px;
height: 420px;
transform-style: preserve-3d;
perspective: 800px;
}
#wrap div{
width: 10px;
height: 420px;
background: url(img/01.png) no-repeat;
float: left;
transition: .5s;
}
</style>
</head>
<body>
<div id="box">
<div id="wrap"></div>
</div>
<script>
//在wrap下,写70个div,每个div显示一张图片的一小片部分,这样70个div能完整的显示出一张图片
for(var i=0;i<70;i++){
str +='<div style="background-position-x:'+(-10*i)+'px"></div>';
}
oWrap.innerHTML = str;
//获取70个div
var divs = oWrap.getElementsByTagName('div');
</script>
</body>
第二步第二步
写tab()函数,设置每个div要做的动画
tab()函数
// 每个div设置前一个div的透明度为1,并且设置自己的透明度为0和背景图片
function tab(n){
// 0
if(divs[n-1]){
评论0