淘宝首页 图片滑动切换效果 基于CSS3的transition方法实现
浏览数：45 /
时间：2015年06月09日
与上一文章对比着看效果更佳
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
height:400px;
width:1250px;
/*使用relative，才能使用left、top性质*/
position:relative;
top:0px;
left:0px;
transition:left 0.5s;
}
</style>
</head>
<body>
<!--overflow:hidden性质使得超出div宽度的部分隐藏-->
<div id="buju" style="width:250px;height:400px;margin:80px auto;border:2px black solid;overflow:hidden;">
<img id="tt" src="55.png" alt="tupian" title="coocku"/>
<script src="js/jquery-1.6.2.min.js"></script>
<script>
var num = 0;
var x = 0;
$(document).ready(function() {
//setInterval("huadong()",3000);
huadong();
});
function huadong() {
num++;
if(num<4) {
//$("img").animate({left:"-=250"},500);
document.getElementById("tt").style.left =x +"px";
}
else {
//$("img").animate({left:0},500);
document.getElementById("tt").style.left =0 +"px";
x =0;
num =0;
}
x -= 250;
setTimeout("huadong()",3000);
}
</script>
</div>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
