亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

Echo_Chien 2016-08-30 14:44:50
<!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"?>


查看完整回答
反對 回復 2016-08-30
  • 1 回答
  • 1 關注
  • 1274 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號