东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
10
2017/02

無縫滾動(dòng)用jquery是如何來實(shí)現(xiàn)的

發(fā)布時(shí)間:2017-02-10 15:52:27
發(fā)布者:369563174
瀏覽量:
0

無縫滾動(dòng)的實(shí)現(xiàn)原理:div box是最外層盒子,給它指定的寬高,記得給box添加一個(gè) overflow:hidden (超出的內(nèi)容隱藏)樣式,因?yàn)闈L動(dòng)肯定是會(huì)超出box的。

然后通過js控制 ul 標(biāo)簽的margin 來實(shí)現(xiàn)滾動(dòng)。橫向滾動(dòng)則是控制 margin-left ; 縱向滾動(dòng)則是控制  margin-top;
初始狀態(tài)時(shí),我們還要進(jìn)行條件判斷,判斷是否進(jìn)行滾動(dòng)。即:當(dāng) ul 長(zhǎng)度小于 外層 box 長(zhǎng)度時(shí)不進(jìn)行滾動(dòng),反之則進(jìn)行滾動(dòng)。比如我們公司做的馬紅旗小兒推拿的項(xiàng)目上就應(yīng)用到了無縫滾動(dòng),這個(gè)是用jquery來完成的:

圖片1.png

這個(gè)的具體寫法是這樣的:

首先引入juqry

圖片2.png

在這里引用了一個(gè)插件,專門來控制滾動(dòng)的,調(diào)用的方式如下:

      
    $(function(){
    imgScroll.rolling({
    name:'gundong1',
    width:'291px' ,
    height:'237px',
    direction:'left',
    speed:11,
    addcss:true
    });
        imgScroll.rolling({
    name:'gundong2',
    width:'291px' ,
    height:'237px',
    direction:'left',
    speed:10,
    addcss:true
    });
    })
    

Name是你的類名,width、height是li的寬度高度,direction是滾動(dòng)的方向,Speed是滾動(dòng)的速度

完成上述步驟,無縫滾動(dòng)就可以實(shí)現(xiàn)了。

 

關(guān)鍵詞:
返回列表