javascript/js各種方向圖片無(wú)限無(wú)縫滾動(dòng)
javascript/js圖片向上無(wú)限無(wú)縫滾動(dòng)
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
<div id="demo1">
? ? <img src="yue.jpg">
? ? <img src="yue.jpg">
? ? <img src="yue.jpg">
? ? <img src="yue.jpg">
? ? <img src="yue.jpg">
</div>
<div id=demo2></div>
</div>
? <script>
? var speed=50;//控制滾動(dòng)的速度快慢
? demo2.innerHTML=demo1.innerHTML;//將demo1里面的內(nèi)容放到demo2里面
? function Marquee(){
? ? ? if(demo2.offsetTop-demo.scrollTop<=0)//當(dāng)demo1與demo2的交界處滾動(dòng)至demo頂端時(shí)
? ? ? ? ? ? ? demo.scrollTop-=demo1.offsetHeight;
? ? ? else{
? ? ? ? ? ? ? demo.scrollTop++;//demo向上滾動(dòng)一個(gè)像素
? ? ? }
? }
? var MyMar=setInterval(Marquee,speed);//設(shè)置定時(shí)器
? demo.onmouseover=function() {clearInterval(MyMar)};//鼠標(biāo)移上時(shí)清除定時(shí)器達(dá)到滾動(dòng)停止的目的
? demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器
? </script>
<p><a href="#" target="_blank">月影web</a></p>
javascript/js圖片向下無(wú)限無(wú)縫滾動(dòng)
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
<div id="demo1">
? ? <img src="yue.jpg">
? ? <img src="yue.jpg">
? ? <img src="yue.jpg">
? ? <img src="yue.jpg">
? ? <img src="yue.jpg">
</div>
<div id=demo2></div>
</div>
? <script>
? var speed=50;//控制滾動(dòng)的速度快慢
? demo2.innerHTML=demo1.innerHTML;//將demo1里面的內(nèi)容放到demo2里面
? demo.scrollTop=demo.scrollHeight;
? function Marquee(){
? ? ? if(demo1.offsetTop-demo.scrollTop>=0)
? ? ? ? ? ? ? demo.scrollTop+=demo2.offsetHeight;
? ? ? else{
? ? ? ? ? ? ? demo.scrollTop--;
? ? ? }
? }
? var MyMar=setInterval(Marquee,speed);//設(shè)置定時(shí)器
? demo.onmouseover=function() {clearInterval(MyMar)};//鼠標(biāo)移上時(shí)清除定時(shí)器達(dá)到滾動(dòng)停止的目的
? demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器
? </script>
<p><a href="#" target="_blank">月影web</a></p>
javascript/js圖片向左無(wú)限無(wú)縫滾動(dòng)
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
? ? <div id="indemo" style="float:left;width:1400%">
? ? ? ? <div id="demo1" style="float:left">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? </div>
? ? </div>
<div id="demo2" style="float:left"></div>
</div>
? <script>
? var speed=50;//控制滾動(dòng)的速度快慢
? demo2.innerHTML=demo1.innerHTML;//將demo1里面的內(nèi)容放到demo2里面
? function Marquee(){
? ? ? if(demo2.offsetWidth-demo.scrollLeft<=0)
? ? ? ? ? ? ? demo.scrollLeft-=demo1.offsetWidth;
? ? ? else{
? ? ? ? ? ? ? demo.scrollLeft++;
? ? ? }
? }
? var MyMar=setInterval(Marquee,speed);//設(shè)置定時(shí)器
? demo.onmouseover=function() {clearInterval(MyMar)};//鼠標(biāo)移上時(shí)清除定時(shí)器達(dá)到滾動(dòng)停止的目的
? demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器
? </script>
<p><a href="#" target="_blank">月影web</a></p>
javascript/js圖片向右無(wú)限無(wú)縫滾動(dòng)
<div id="demo" style="overflow:hidden;height:100px;width:100px;background:#f4f4f4;color:#ffffff">
? ? <div id="indemo" style="float:left;width:1400%">
? ? ? ? <div id="demo1" style="float:right">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? ? ? <img src="yue.jpg">
? ? ? ? </div>
? ? ? ? <div id="demo2" style="float:right"></div>
? ? </div>?
</div>
? <script>
? var speed=50;//控制滾動(dòng)的速度快慢
? demo2.innerHTML=demo1.innerHTML;//將demo1里面的內(nèi)容放到demo2里面
? demo.scrollLeft=demo.scrollWidth;
? function Marquee(){
? ? ? if(demo.scrollLeft<=0)
? ? ? ? ? demo.scrollLeft+=demo2.offsetWidth;
? ? ? else{
? ? ? ? ? demo.scrollLeft--;
? ? ? }
? }
? var MyMar=setInterval(Marquee,speed);//設(shè)置定時(shí)器
? demo.onmouseover=function() {clearInterval(MyMar)};//鼠標(biāo)移上時(shí)清除定時(shí)器達(dá)到滾動(dòng)停止的目的
? demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠標(biāo)移開(kāi)時(shí)重設(shè)定時(shí)器
? </script>
<p><a href="#" target="_blank">月影web</a></p>
