第六章 JavaScript动画图片效果--左右翻滚图片

效 果 演 示：

1 2 3 4 5 6 7 8 9 0

<script type=text/javascript> var speed=30 marquePic2.innerHTML=marquePic1.innerHTML function Marquee(){ if(demo.scrollLeft>=marquePic1.scrollWidth){ demo.scrollLeft=0 }else{ demo.scrollLeft++ }} var MyMar=setInterval(Marquee,speed) demo.οnmοuseοver=function() {clearInterval(MyMar)} demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} </script>

JavaScript代码：

　var speed=30
　marquePic2.innerHTML=marquePic1.innerHTML
　function Marquee(){
　　if(demo.scrollLeft>=marquePic1.scrollWidth){
　　　demo.scrollLeft=0
　　}else{
　　　demo.scrollLeft++
　　}
　}
　var MyMar=setInterval(Marquee,speed)
　demo.οnmοuseοver=function() {clearInterval(MyMar)}
　demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}

JavaScript代码讲解：

var speed=30	定义图片移动速度
marquePic2.innerHTML=marquePic1.innerHTML	innerHTML:也就是从对象的起始位置到终止位置的全部内容,包括Html标签 marquePic2从起始到结束内容与marquePic1一致
function Marquee(){	定义Marquee函数
if(demo.scrollLeft>=marquePic1.scrollWidth){ 　　　demo.scrollLeft=0 　　}else{ 　　　demo.scrollLeft++ 　　} 　}	scrollLeft:对象的最左边到对象在当前窗口显示的范围内的左边的距离． 即是在出现了横向滚动条的情况下，滚动条拉动的距离
var MyMar=setInterval(Marquee,speed)	设置自动滚动条事件，每speed毫秒滚动一次，以此实现慢慢的，渐渐的滚动的效果
demo.οnmοuseοver=function() {clearInterval(MyMar)}	当鼠标移到图片时，图片停止滚动
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}	当鼠标从图片上移开时，又调用上面函数，图片开始滚动