想要的效果是每一张图片都和第一张图片一样是滑出来的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
div{ width:0; height:220px; overflow:hidden}
img{ float:left; width:180px; height:220px;}
</style>
<script src="../../jquery/jquery-3.1.0.js"></script>
</head>
<body>
<div>
<img src="img/1.jpg" >
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
</div>
<script>
$(function(){
$("div").animate({width:"+=1100px"},11000)
})
</script>
</body>
</html>
Echo_Chien浏览 1238回答 1
1回答
-
stone310
因为你这么写，div的宽被限制了，float: left并不能让img一行排开，只有达到2张图片的宽度总和，才会让第二张图片放到第一行，所以看起来就像弹出一样当你的div宽度小于一张图片的宽度时，其他图片都是堆叠在下方，你可以用下面这个代码看到问题所在$(function(){ $("div").animate({width:"+=1100px",height:'+=1100px'},11000) })因此，改进办法就是div内层再加一个div元素，宽度为1100px，保证图片float：left效果是生效的#div1{ width:0px; height:220px;overflow:hidden} #div2{ width:1100px; height:220px;} <!--以上style，以下body--> <div id="div1"> <div id="div2"> <img src="img/1.jpg" >
随时随地看视频慕课网APP
相关分类
JQuery