原本在前端html程式碼中,實作文字或圖片的水平垂直滾定,都是使用的marquee,但隨著考慮瀏覽器的兼容性和符合為w3c的標準,後來想想那還是使用javascript程式碼來實現。後來又喜歡上了jquery,下面寫的內容希望對初學者有些幫助,高手勿噴,但歡迎指導,感激不盡。
原理:無縫滾動的原理,就是利用兩個內容相同的容器,來達到欺騙人的視覺的效果。然後透過整個大容器滾動條的左右或上下的移動來實現滾動。下面附上一張手繪的圖,來簡單闡述下原理。首先,我們的目的是實現框1中的內容水平向左滾動(向右滾動,上下滾動的原理其實大致是一樣的,只要知道其中一種,其他都不是問題。)。那我們在頁面載入的時候就用js動態將框2中的內容(html內容)賦值成和框1的內容一樣。然後隨著滾動條的漸漸地往右移動,來達到向左的效果。說了這麼多。等會就附上程式碼(附有註解)。
1.html程式碼