<!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>
1 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
因为你这么写，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" >- 1 回答
- 1 关注
- 1237 浏览
添加回答
举报
0/150
提交
取消