技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> div+css+js无缝滚动代码

div+css+js无缝滚动代码

浏览:2908次  出处信息

在做网站时很多时候需要的,今天收集了一下。

 

先了解一下对象的几个的属性:

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动 高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动 宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
DIV + JS 图片上无缝滚动
 
<style type="text/<A title=css href="http://blog.suiyiidan.cn" target=_blank>css</A>">
<!--
#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>
向上<STRONG style="BACKGROUND-COLOR: #ff66ff; COLOR: black">滚动</STRONG>


<<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

 id="demo">
<<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

 id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

>
<<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

 id="demo2"></<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

>
</<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当<STRONG style="BACKGROUND-COLOR: #ff66ff; COLOR: black">滚动</STRONG>

至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到<STRONG style="BACKGROUND-COLOR: #ff66ff; COLOR: black">滚动</STRONG>

停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
 
这是代码,也很容易明白,如果向右或者向左,只要改动想关的参数就可以

建议继续学习:

  1. 小tip: 纯CSS实现视差滚动效果    (阅读:2497)
  2. 全兼容的滚动js脚本    (阅读:1691)
  3. 使用CSS3 will-change提高页面滚动、动画等渲染性能    (阅读:880)
  4. 滚动定位在移动端的研究    (阅读:880)
  5. 小tip: 子元素scroll父元素容器不跟随滚动JS实现    (阅读:858)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1