-
首頁
-
網站建設
-
優化推廣
-
案例
方案
方案
Solutions
電商平臺
電商網站開發
E-commerce & System
微信營銷
資訊
我們
我們
About Us
聯系
聯系
Contact Us
-
- 聯系方式
- 業務熱線： 15082661954
- 郵箱： foxl@www.kxlw.net
- 人才招聘
- HR郵箱：
- 190014322@qq.com
精準傳達 ? 價值共享
洞悉互聯網前沿資訊，探尋網站營銷規律
Html js輕松實現 向上下左右循環滾動代碼
作者：Smileby陌少羽 | 2019-05-06 09:29 |點擊：
Html js輕松實現 向上下左右循環滾動代碼 代碼如下
以上就是Html js輕松實現 向上下左右循環滾動代碼的方法 大家可以新建一個html 看看效果就知道了
-
<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>向上下左右不間斷無縫滾動圖片的效果(兼容火狐和IE)</title></head><body><div id="colee" style="overflow:hidden;height:253px;width:410px;"><div id="colee1"><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></div><div id="colee2"></div></div><script>var speed=30;var colee2=document.getElementById("colee2");var colee1=document.getElementById("colee1");var colee=document.getElementById("colee");colee2.innerHTML=colee1.innerHTML; //克隆colee1為colee2function Marquee1(){//當滾動至colee1與colee2交界時/*if(colee2.offsetTop-colee.scrollTop<=0){colee.scrollTop-=colee1.offsetHeight; //colee跳到最頂端}else{colee.scrollTop++}*///無限循環if(colee.scrollTop>=colee1.offsetHeight){colee.scrollTop=0;}else{colee.scrollTop++;}}var MyMar1=setInterval(Marquee1,speed)//設置定時器//鼠標移上時清除定時器達到滾動停止的目的colee.onmouseover=function() {clearInterval(MyMar1)}//鼠標移開時重設定時器colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}</script><!--向上滾動代碼結束--><br><!--下面是向下滾動代碼--><div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"><div id="colee_bottom1"><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></div><div id="colee_bottom2"></div></div><script>var speed=30var colee_bottom2=document.getElementById("colee_bottom2");var colee_bottom1=document.getElementById("colee_bottom1");var colee_bottom=document.getElementById("colee_bottom");colee_bottom2.innerHTML=colee_bottom1.innerHTMLcolee_bottom.scrollTop=colee_bottom.scrollHeightfunction Marquee2(){if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)colee_bottom.scrollTop+=colee_bottom2.offsetHeightelse{colee_bottom.scrollTop--}}var MyMar2=setInterval(Marquee2,speed)colee_bottom.onmouseover=function() {clearInterval(MyMar2)}colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}</script><!--向下滾動代碼結束--><br><!--下面是向左滾動代碼--><div id="colee_left" style="overflow:hidden;width:500px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="colee_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td></tr></table></td><td id="colee_left2" valign="top"></td></tr></table></div><script>//使用div時，請保證colee_left2與colee_left1是在同一行上.var speed=30//速度數值越大速度越慢var colee_left2=document.getElementById("colee_left2");var colee_left1=document.getElementById("colee_left1");var colee_left=document.getElementById("colee_left");colee_left2.innerHTML=colee_left1.innerHTMLfunction Marquee3(){if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是對象的可見寬度colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是對象的實際內容的寬，不包邊線寬度else{colee_left.scrollLeft++}}var MyMar3=setInterval(Marquee3,speed)colee_left.onmouseover=function() {clearInterval(MyMar3)}colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}</script><!--向左滾動代碼結束--><br><!--下面是向右滾動代碼--><div id="colee_right" style="overflow:hidden;width:500px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="colee_right1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td><td><p><img src="http://www.www.kxlw.net/templets/hlwl/images/icon-logo.jpg"></p></td></tr></table></td><td id="colee_right2" valign="top"></td></tr></table></div><script>var speed=30//速度數值越大速度越慢var colee_right2=document.getElementById("colee_right2");var colee_right1=document.getElementById("colee_right1");var colee_right=document.getElementById("colee_right");colee_right2.innerHTML=colee_right1.innerHTMLfunction Marquee4(){if(colee_right.scrollLeft<=0)colee_right.scrollLeft+=colee_right2.offsetWidthelse{colee_right.scrollLeft--}}var MyMar4=setInterval(Marquee4,speed)colee_right.onmouseover=function() {clearInterval(MyMar4)}colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}</script><!--向右滾動代碼結束--></body></html>
以上就是Html js輕松實現 向上下左右循環滾動代碼的方法 大家可以新建一個html 看看效果就知道了
如沒特殊注明，文章均為狐靈科技原創,轉載請注明?? "Html js輕松實現 向上下左右循環滾動代碼
關于狐靈科技
+狐靈致力于互聯網品牌建設與網絡營銷，專業領域包括 網站建設、 SEO優化、移動互聯網營銷、高端網站建設、高端網站設計、品牌網站定制開發、營銷策劃推廣電子商務、移動互聯網營銷、 為不同類型的客戶提供良好的互聯網應用定制解決方案，我們將策略和執行緊密結合，且不斷評估并優化我們的方案，為客戶提供一體化全方位的互聯網品牌整合方案！
我們的優勢
多項網站設計傳播大獎
營銷型網站建設專家
自主研發網站管理系統
B2C電商網站建設供應商
完善的售后服務體系
我們的不同
+在我們的對手消耗大量的時間停留在碎片化的互聯網設計或者程序實現的時候，我們已經開始把數字化品牌建設和網絡傳播進行了整合。我們提供從前期的網站品牌分析策劃、網站設計、創意表現、系統開發以及后續網站運營反饋建議等一系列服務，幫助企業打造創新的互聯網品牌經營模式與有效的網絡營銷方法,為所有謀求長遠發展的企業品牌貢獻全力！
公司地址：重慶市九龍坡楊家坪重百大樓21-8 | 業務熱線：15082661954
Copyright © 2017-2020 Fox spirit Network. 狐靈科技 版權所有 | 渝ICP備19005721號-1
專業團隊為您提供 重慶網頁設計, 品牌網站設計,營銷型網站制作,SEO優化關鍵詞排名推廣等服務,建網站就找狐靈科技！ | TAG標簽 | 網站建設地圖 | 網站地圖
