求大佬看看哪里出了问题，跪谢了，图片换位的优先级搞不太懂
<html>
<head>
<title></title>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:0;
background:url(img/583fb47476ff8.png) no-repeat;
background-size:100% 800px;
}
.kuai{
width:1800px;
height:800px;
position:relative;
margin:0 auto;
}
.kuai1,.kuai2,.kuai3{
position:absolute;
width:400px;
height:600px;
top:100px;
}
.kuai1{
background:url(img/tmall-400x523-1.jpg) no-repeat;
background-size:cover;
left:0px;
top:150px;
z-index:-1;
}
.kuai2{
background:url(img/tmall-400x523-2.jpg) no-repeat;
background-size:cover;
height:700px;
width:500px;
left:650px;
z-index:1;
}
.kuai3{
background:url(img/tmall-400x523-3.jpg) no-repeat;
background-size:cover;
left:1400px;
top:150px;
z-index:3;
}
</style>
</head>
<body>
<div class="kuai">
<div class="kuai1" data="0"></div>
<div class="kuai2" data="1"></div>
<div class="kuai3" data="2"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function(){
$("[data='0']").animate({top:"150px",left:"1400px",width:"400px",height:"600px"},2000).css({"z-index":-100}).attr("data",2);
$("[data='1']").animate({top:"150px",left:"0",width:"400px",height:"600px"},2000).css({"z-index":100}).attr("data",0);
$("[data='2']").animate({top:"100px",left:"650px",width:"500px",height:"700px"},2000).css({"z-index":0}).attr("data",1);
},2000)
})
</script>
</body>
</html>
qq_靠近或者远离_02回答
-
一诺yinol
<html><head> <title></title> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <style type="text/css"> body{ margin:0; padding:0; background:url(img/house_type.jpg) no-repeat; background-size:100% 800px; } .kuai{ width:1800px; height:800px; position:relative; margin:0 auto; } .kuai1,.kuai2,.kuai3{ position:absolute; width:400px; height:600px; top:100px; } .kuai1{ background:url(img/zufang_gongyu.jpg) no-repeat; background-size:cover; left:0px; top:150px; z-index:-100; } .kuai2{ background:url(img/zufang_map.jpg) no-repeat; background-size:cover; height:700px; width:500px; left:650px; z-index:0; } .kuai3{ background:url(img/villa.jpg) no-repeat; background-size:cover; left:1400px; top:150px; z-index:100; } </style></head><body><div class="kuai"> <div class="kuai1" data="0"></div> <div class="kuai2" data="1"></div> <div class="kuai3" data="2"></div></div><script src="js/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function(){ setInterval(function(){ $("[data='0']").animate({top:"150px",left:"1400px",width:"400px",height:"600px"}, 2000,function(){ $(this).css({"z-index":100}).attr("data",2); }) $("[data='1']").animate({top:"150px",left:"0",width:"400px",height:"600px"}, 2000,function(){ $(this).css({"z-index":-100}).attr("data",0) }) $("[data='2']").animate({top:"100px",left:"650px",width:"500px",height:"700px"}, 2000,function(){ $(this).css({"z-index":0}).attr("data",1); }) },2000) })</script></body></html>在动画执行完之后再执行css的改变！ -
Dling
看你代码没问题啊你不懂层级关系吧？那个z-index属性是设置元素的层级堆叠关系。数字越大的元素总是在数字低的元素前面。z-index只能在定位元素上有效
随时随地看视频慕课网APP
相关分类
JavaScript