首页 > 代码库 > JS 在 HTML 无缝滚动
JS 在 HTML 无缝滚动
marquee图片无缝滚动
先了解一下对象的几个的属性:
innerHTML: 设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
<style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;height: 100px;text-align: center;float: left;}#demo img {border: 3px solid #F2F2F2;display: block;}--></style>向上滚动<div id="demo"><div id="demo1"><a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a><a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a><a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a><a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a><a href="#"><img src=" http://www.chaofan.biz/Clear_logo.gif" border="0" /></a></div><div id="demo2"></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; //克隆demo1为demo2function Marquee(){if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端else{tab.scrollTop++}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器--></script>
向右滚动
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on"></SPAN></MARQUEE><DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;" onm ouseover="aa()" onm ouseout="b()" >[CROSSSELLING3][CROSSSELLING4][CROSSSELLING5][CROSSSELLING6][CROSSSELLING7][CROSSSELLING8][CROSSSELLING9][CROSSSELLING10]</DIV><script language="javascript" type="text/javascript"><!-- function scroll(obj) { var tmp = (obj.scrollLeft)++; //当滚动条到达右边顶端时 if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML; //当滚动条滚动了初始内容的宽度时滚动条回到最左端 if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0; } var a = setInterval("scroll(document.getElementById(‘scrollobj‘))",20); function aa(){ clearInterval(a); } function b(){ a=setInterval("scroll(document.getElementById(‘scrollobj‘))",10); }//--></script>
JS 在 HTML 无缝滚动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。