各种高宽间距和图片滚动1.doc

各种高宽间距和图片滚动 一、各种高宽和间距示scrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置event.clientX 相对文档的水平座标event.clientY 相对文档的垂直座标event.offsetX 相对容器的水平坐标event.offsetY 相对容器的垂直坐标? document.documentElement.scrollTop 垂直方向滚动的值event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量二、图片滚动特效的js实现 1.图片的上下滚动是通过设置的两个div的承接实现的，由于在一个中，div的摆放是上下的关系，所以不需要在页面中对div的摆放做处理即可实现图片的上下滚动。图片向上滚动和向下滚动只是js代码略有不同，下面是图片向上滚动的html代码：?图片向上滚动 var speed=50;demo2.innerHTML=demo1.innerHTML;function Marquee()if(demo2.offsetTop-demo.scrollTop=0) demo.scrollTop-=demo1.offsetHeight;else demo.scrollTop+;var MyMar=setInterval(Marquee,speed);demo.onmouseover=function() clearInterval(MyMar);demo.onmouseout=function() MyMar=setInterval(Marquee,speed); 2.下面是图片向下滚动的js代码，只需将上面页面中的js用此替换掉即可实现图片向下滚动。var speed=30demo2.innerHTML=demo1.innerHTMLdemo.scrollTop=demo.scrollHeightfunction Marquee()if(demo1.offsetTop-demo.scrollTop=0)demo.scrollTop+=demo2.offsetHeightelsedemo.scrollTop-var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() clearInterval(MyMar)demo.onmouseout=function() MyMar=setInterval(Marquee,speed)3.图片向左右滚动时则div的摆放需要与滚动方向一致，即将两个div分别放在一个的两个中，这样才能实现图片的左右滚动，下面是图片向左滚动的html代码。图片向左滚动 ? var speed=25;demo2.innerHTML=demo1.innerHTML;function Marquee()if(demo2.offsetWidth-demo.scrollLeft=0)demo.scrollLeft-=demo1.offsetWidth;elsedemo.scrollLeft+;var MyMar=setInterval(Marquee,speed);demo.onmouseover=function() clearInterval(MyMar);demo.onmouseout=function() MyMar=setInterval(Marquee,speed);4.下面是图片向右滚动的js代码，只需将上面页面中的js用此替换掉即可实现图片向右滚动。var speed=25demo2.innerHTML=demo1.innerHTMLdemo.scrollLeft=demo.scrollWidthfunction Marquee()if(demo.scrollLeft=0)demo.scrollLeft+=demo2.offsetWidthelsedemo.scrollLeft-var MyMar=setInterval(Marquee,speed)demo.