IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

div+css+js无缝滚动代码

web前端开发 2011-09-26 23:28:14 累计浏览 3,815 次
本机暂存

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

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

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. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,350)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,405)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,934)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,764)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,224)
  9. 什么是全栈工程师? (累计阅读 14,039)
  10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)