首頁(yè) 猿問想要的效果是每一張圖片都和第一張圖...

想要的效果是每一張圖片都和第一張圖片一樣是滑出來的

JQuery

Echo_Chien 2016-08-30 14:44:50

<!doctype html><html><head><meta charset="utf-8"><title>無標(biāo)題文檔</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貢獻(xiàn)361條經(jīng)驗(yàn) 獲得超191個(gè)贊

因?yàn)槟氵@么寫，div的寬被限制了，float: left并不能讓img一行排開，只有達(dá)到2張圖片的寬度總和，才會(huì)讓第二張圖片放到第一行，所以看起來就像彈出一樣

當(dāng)你的div寬度小于一張圖片的寬度時(shí)，其他圖片都是堆疊在下方，你可以用下面這個(gè)代碼看到問題所在

$(function(){
????$("div").animate({width:"+=1100px",height:'+=1100px'},11000)
})

因此，改進(jìn)辦法就是div內(nèi)層再加一個(gè)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"?>

反對(duì) 回復(fù) 2016-08-30