javaScript滾動新聞之上下左右平滑滾動，javascript滾動新聞
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>平滑滾動</title></head><style> <!--#picture_div1{width:300px;height:100px;float:left;overflow:hidden;position:relative;left:0px;top:0px;}#picture_div4{width:300px;height:100px;float:left;overflow:hidden;position:relative;left:50%;top:0px;}#picture_in1,#picture_in2{float:left;width:800%;}#picture_div2,#picture_div3,#picture_div5,#picture_div6,img{float:left;}#wenzi_div1{position:relative;left:0px;top:20%;width:170px;height:105px;overflow:hidden;}#wenzi_div2{position:relative;left:50%;top:20%;width:170px;height:105px;overflow:hidden;}#wenzi_in1,#wenzi_in2{float:left;height:800%;}--> </style><body><br /><h1 style="text-align:center">圖片</h1><hr /><div id="picture_div1"> <div id="picture_in1"><div id="picture_div2"> <img src="imgs/11.png"/><img src="imgs/22.png"/><img src="imgs/33.png"/> </div> <div id="picture_div3"></div> </div></div> <div id="picture_div4" style="position:relative; left:400px; top:0px;"> <div id="picture_in2"> <div id="picture_div5"></div><div id="picture_div6"> <img src="imgs/11.png"/><img src="imgs/22.png"/><img src="imgs/33.png"/> </div> </div></div> <br /><br /><br /><br /><br /><br /><br /><h1 style="text-align:center">文字</h1><hr /> <div id="wenzi_div1"> <div id="wenzi_in1"> <ul id="wenzi_ul1"> <li>這裡是第1條新聞</li> <li>這裡是第2條新聞</li> <li>這裡是第3條新聞</li> <li>這裡是第4條新聞</li> <li>這裡是第5條新聞</li> <li>這裡是第6條新聞</li> <li>這裡是第7條新聞</li> <li>這裡是第8條新聞</li> <li>這裡是第9條新聞</li> <li>這裡是第10條新聞</li> </ul> <ul id="wenzi_ul2"></ul> </div> </div> <div id="wenzi_div2"> <div id="wenzi_in2"> <ul id="wenzi_ul3"></ul> <ul id="wenzi_ul4"> <li>這裡是第1條新聞</li> <li>這裡是第2條新聞</li> <li>這裡是第3條新聞</li> <li>這裡是第4條新聞</li> <li>這裡是第5條新聞</li> <li>這裡是第6條新聞</li> <li>這裡是第7條新聞</li> <li>這裡是第8條新聞</li> <li>這裡是第9條新聞</li> <li>這裡是第10條新聞</li> </ul> </div> </div></body><script language="javascript" type="text/javascript">//圖片控制//向左側var picture_div1 = document.getElementById('picture_div1');var picture_div2 = document.getElementById('picture_div2');var picture_div3 = document.getElementById('picture_div3');picture_div3.innerHTML = picture_div2.innerHTML;var speed = 10;function pictureMarquee1(){if(picture_div3.offsetWidth - picture_div1.scrollLeft <= 0){picture_div1.scrollLeft -= picture_div2.offsetWidth;}else{picture_div1.scrollLeft++;}}var picture_id1 = setInterval(pictureMarquee1,speed);picture_div1.onmouseover = function(){clearTimeout(picture_id1);}picture_div1.onmouseout = function(){picture_id1 = setInterval(pictureMarquee1,speed);}//向右側var picture_div4 = document.getElementById('picture_div4');var picture_div5 = document.getElementById('picture_div5');var picture_div6 = document.getElementById('picture_div6');picture_div5.innerHTML = picture_div6.innerHTML;function pictureMarquee2(){if(picture_div4.scrollLeft <= 0){picture_div4.scrollLeft += picture_div5.offsetWidth;}else{picture_div4.scrollLeft--;}}var picture_id2 = setInterval(pictureMarquee2,speed);picture_div4.onmouseover = function(){clearTimeout(picture_id2);}picture_div4.onmouseout = function(){picture_id2 = setInterval(pictureMarquee2,speed);}//文字控制//向左側var wenzi_div1 = document.getElementById('wenzi_div1');var wenzi_ul1 = document.getElementById('wenzi_ul1');var wenzi_ul2 = document.getElementById('wenzi_ul2');var speed1 = 100;wenzi_ul2.innerHTML = wenzi_ul1.innerHTML;function wenziMarquee1(){if(wenzi_ul2.offsetHeight - wenzi_div1.scrollTop <= 0){wenzi_div1.scrollTop -= wenzi_ul1.offsetHeight;}else{wenzi_div1.scrollTop++;}}var wenzi_id1 = setInterval(wenziMarquee1,speed1);wenzi_div1.onmouseover = function(){clearTimeout(wenzi_id1);}wenzi_div1.onmouseout = function(){wenzi_id1 = setInterval(wenziMarquee1,speed1);}//向右側var wenzi_div2 = document.getElementById('wenzi_div2');var wenzi_ul3 = document.getElementById('wenzi_ul3');var wenzi_ul4 = document.getElementById('wenzi_ul4');wenzi_ul3.innerHTML = wenzi_ul4.innerHTML;function wenziMarquee2(){if(wenzi_div2.scrollTop <= 0){wenzi_div2.scrollTop += wenzi_ul3.offsetHeight;}else{wenzi_div2.scrollTop--;}}var wenzi_id2 = setInterval(wenziMarquee2,speed1);wenzi_div2.onmouseover = function(){clearTimeout(wenzi_id2);}wenzi_div1.onmouseout = function(){wenzi_id2 = setInterval(wenziMarquee2,speed1);}</script></html>
html可以實現平滑滾動
<marquee behavior="slide"或者"alternae"或者"scroll" direction=right>
·····
</marquee>
behavior後面有三種滾動模式可選
分別是連續，一次，彈回
有沒有javascript做的 數字上下平滑滾動的控制項，幫忙推薦一下
這個太簡單了，估計沒人專門做成外掛程式。。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
