想要的效果是每一张图片都和第一张图片一样是滑出来的
无标题文档
*{ margin:0; padding:0;}
div{ width:0; height:220px; overflow:hidden}
img{ float:left; width:180px; height:220px;}
<script>
$(function(){
$("div").animate({width:"+=1100px"},11000)
}) |
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
因为你这么写，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;} |
|
|
|
|
|
|
|
|
天盟APP下载
