图片向左滚动或文字向左滚动代码,无缝滚动且划过停止
本文主要讲解运用相同的js代码，使图片向左滚动或文字向左滚动
文字向左滚动，无缝滚动且划过停止，纯javascript。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;font-size: 12px;height: 30px;line-height: 30px;padding: 5px;}#demo a{color:#333;}#indemo {float: left;width: 800%;}#demo1 {float: left;}#demo2 {float: left;}--></style></head><body>向左滚动<div id="demo"><div id="indemo"><div id="demo1"><a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=231">山东大学</a> <a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=205">中北大学</a> <a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=377">华中科技大学</a> <a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=333">西安工程大学</a> <a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=359">西北工业大学</a> <a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=91">西南民族大学</a> <a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=246">中国海洋大学</a> <a href="http://www.goonedu.com/Colleges/School.aspx?SchoolID=64">中国科技大学</a> </div><div id="demo2"></div></div></div><script><!--var speed=10; //数字越大速度越慢var tab=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};--></script></body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><div id="colee_left" style="overflow:hidden;width:920px; margin:0px; padding:0px; height:142px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="colee_left1" valign="top" align="center"><table cellpadding="3" cellspacing="0" border="0"><tr align="center"><td><div width="169" height="116" /></a></div> <div width="169" height="116" /></a></div> <div width="169" height="116" /></div> <div width="169" height="116" /></div> <div width="169" height="116" /></div> <div 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></body></html>