首頁 > web前端 > js教程 > 主體

jquery實現marquee效果(文字或圖片的水平垂直滾動)_jquery

WBOY
發布: 2016-05-16 17:44:21
原創
1314 人瀏覽過

原本在前端html程式碼中,實作文字或圖片的水平垂直滾定,都是使用的marquee,但隨著考慮瀏覽器的兼容性和符合為w3c的標準,後來想想那還是使用javascript程式碼來實現。後來又喜歡上了jquery,下面寫的內容希望對初學者有些幫助,高手勿噴,但歡迎指導,感激不盡。

原理:無縫滾動的原理,就是利用兩個內容相同的容器,來達到欺騙人的視覺的效果。然後透過整個大容器滾動條的左右或上下的移動來實現滾動。下面附上一張手繪的圖,來簡單闡述下原理。首先,我們的目的是實現框1中的內容水平向左滾動(向右滾動,上下滾動的原理其實大致是一樣的,只要知道其中一種,其他都不是問題。)。那我們在頁面載入的時候就用js動態將框2中的內容(html內容)賦值成和框1的內容一樣。然後隨著滾動條的漸漸地往右移動,來達到向左的效果。說了這麼多。等會就附上程式碼(附有註解)。
jquery實現marquee效果(文字或圖片的水平垂直滾動)_jquery 
1.html程式碼

複製程式碼



複製程式碼



複製碼>




juqery實現marquee的效果










jquery實現marquee效果(文字或圖片的水平垂直滾動)_jquery
jquery實現marquee效果(文字或圖片的水平垂直滾動)_jquery
jquery實現marquee效果(文字或圖片的水平垂直滾動)_jquery
jquery實現marquee效果(文字或圖片的水平垂直滾動)_jquery
jquery實現marquee效果(文字或圖片的水平垂直滾動)_jquery
jquery實現marquee效果(文字或圖片的水平垂直滾動)_jquery
jquery實現marquee效果(文字或圖片的水平垂直滾動)_jquery
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板