javascript无缝滚动

最新推荐文章于 2025-06-24 14:40:07 发布

原创最新推荐文章于 2025-06-24 14:40:07 发布 · 960 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #microsoft #timer #border #相册

jQuery/HTML5/CSS3 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的无缝滚动效果，包括向上、向下、向左、向右及文字滚动等方向，通过复制元素和定时调整滚动位置实现平滑滚动，并在鼠标悬停时停止。

1、向上滚动

 
<!doctype html>
<title>javascript无缝滚动  by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动  by 司徒正美" />
<style type="text/css">
    h1 {
    font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  }
  #marquee {
    position:relative;
    height:300px;
    width:200px;
    overflow:hidden;
    border:10px solid #369;
  }
  #marquee img {
    display:block;
  }
  #marquee dd {
    margin:0px;
    padding:0px;
  }
</style>
<script type="text/javascript">
  var Marquee = function(id){
    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
    var container = document.getElementById(id),
    original = container.getElementsByTagName("dt")[0],
    clone = container.getElementsByTagName("dd")[0],
    speed = arguments[1] || 10;
    clone.innerHTML=original.innerHTML;
    var rolling = function(){
      if(container.scrollTop == clone.offsetTop){
        container.scrollTop = 0;
      }else{
        container.scrollTop++;
      }
    }
    var timer = setInterval(rolling,speed)//设置定时器
    container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
    container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  }
  window.onload = function(){
    Marquee("marquee");
  }
</script>
<h1>javascript无缝滚动(向上滚动) by 司徒正美</h1>

<dl id="marquee">
  <dt>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/>
  </dt>
  <dd></dd>
</dl>

2、向下滚动：

 
<!doctype html>
<title>javascript无缝滚动  by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动  by 司徒正美" />
<style type="text/css">
   h1 {
    font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  }
  #marquee {
    height:300px;
    width:200px;
    overflow:hidden;
    position:relative;
    border:10px solid #F2F1D7;
  }
  #marquee img {
    display:block;
  }
  #marquee dd {
    margin:0px;
    padding:0px;
  }
</style>
<script type="text/javascript">
  var Marquee = function(id){
    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
    var container = document.getElementById(id),
    original = container.getElementsByTagName("dt")[0],
    clone = container.getElementsByTagName("dd")[0],
    speed = arguments[1] || 10;
    clone.innerHTML=original.innerHTML;
    container.scrollTop = clone.offsetTop;
    var rolling = function(){
      if(container.scrollTop == 0){
        container.scrollTop = clone.offsetTop;
      }else{
        container.scrollTop--;
      }
    }
    var timer = setInterval(rolling,speed)//设置定时器
    container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
    container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  }
  window.onload = function(){
    Marquee("marquee");
  }
</script>
<h1>javascript无缝滚动(向下滚动) by 司徒正美</h1>

<dl id="marquee">
  <dt>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/>
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/>
  </dt>
  <dd></dd>
</dl>

3、向左滚动

 
<!doctype html>
<title>javascript无缝滚动  by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动  by 司徒正美" />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
  h1 {
    font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  }
  #marquee {
    position:relative;
    width: 400px;
    overflow:hidden;
    border: 10px solid #B45B3E;
  }
  #marquee img {
    border:0px;
  }
  #marquee dl, #marquee dt,#marquee dd,#marquee a {
    float:left;
    margin:0;
    padding:0;
  }
  #marquee dl{
    width:1000%;
    height:150px;
  }
</style>
<script type="text/javascript">
  var Marquee = function(id){
    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
    var container = document.getElementById(id),
    original = container.getElementsByTagName("dt")[0],
    clone = container.getElementsByTagName("dd")[0],
    speed = arguments[1] || 10;
    clone.innerHTML=original.innerHTML;
    var rolling = function(){
      if(container.scrollLeft == clone.offsetLeft){
        container.scrollLeft = 0;
      }else{
        container.scrollLeft++;
      }
    }
    var timer = setInterval(rolling,speed)//设置定时器
    container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
    container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  }
  window.onload = function(){
    Marquee("marquee");
  }
</script>
<h1>javascript无缝滚动(向左滚动) by 司徒正美</h1>
<div id="marquee">
  <dl>
    <dt>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
    </dt>
    <dd></dd>
  </dl>
</div>

4、向右滚动

 
<!doctype html>
<title>javascript无缝滚动  by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动  by 司徒正美" />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
  h1 {
    font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  }
  #marquee {
    position:relative;
    width: 400px;
    overflow:hidden;
    border: 10px solid #8080C0;
  }
  #marquee img {
    border:0px;
  }
  #marquee dl, #marquee dt,#marquee dd,#marquee a {
    float:left;
    margin:0;
    padding:0;
  }
  #marquee dl{
    width:1000%;
    height:150px;
  }
</style>
<script type="text/javascript">
  var Marquee = function(id){
    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
    var container = document.getElementById(id),
    original = container.getElementsByTagName("dt")[0],
    clone = container.getElementsByTagName("dd")[0],
    speed = arguments[1] || 10;
    clone.innerHTML=original.innerHTML;
    container.scrollLeft = clone.offsetLeft
    var rolling = function(){
      if(container.scrollLeft == 0){
        container.scrollLeft = clone.offsetLeft;
      }else{
        container.scrollLeft--;
      }
    }
    var timer = setInterval(rolling,speed)//设置定时器
    container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
    container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  }
  window.onload = function(){
    Marquee("marquee");
  }
</script>
<h1>javascript无缝滚动(向右滚动) by 司徒正美</h1>
<div id="marquee">
  <dl>
    <dt>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
      <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
    </dt>
    <dd></dd>
  </dl>
</div>

5、文字滚动

 
<!doctype html>
<title>javascript无缝滚动  by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动  by 司徒正美" />
<base href="http://www.cnblogs.com/rubylouvre/archive/2009/">
<style type="text/css">
  h1 {
    font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
  }
  #marquee,#marquee li {
    margin:0;
    padding:0;
    list-style:none;
  }
  #marquee {
    position:relative;
    height:100px;
    width:280px;
    overflow:hidden;
    border:10px solid #c0c0c0;
  }
  #marquee a {
    display:block;
    padding:5px;
    text-decoration:none;
    white-space: nowrap;
    color:#000;
  }
  #marquee a:hover{
    background: #efefda;
    color:#3bcdfe
  }
</style>
<script type="text/javascript">
  var Marquee = function(id){
    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
    var container = document.getElementById(id),
    original = container.getElementsByTagName("li")[0],
    speed = arguments[1] || 10,
    clone = original.cloneNode(true);
    container.appendChild(clone);
    var rolling = function(){
      if(container.scrollTop == clone.offsetTop){
        container.scrollTop = 0;
      }else{
        container.scrollTop++;
      }
    }
    var timer = setInterval(rolling,speed)//设置定时器
    container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
    container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
  }
  window.onload = function(){
    Marquee("marquee");
  }
</script>
<h1>javascript无缝滚动(向上滚动) by 司徒正美</h1>
<ul id="marquee">
  <li>
    <a href="08/08/1541914.html">一步步教你实现纯CSS的柱形图</a>
    <a href="09/02/1558998.html">javascript十个最常用的自定义函数</a>
    <a href="08/24/1552862.html">javascript鼠标事件总结</a>
    <a href="09/14/1566157.html">一个很简单的淡入淡出相册</a>
    <a href="09/18/1568925.html">纯CSS相册</a>
    <a href="08/13/1544365.html">一步步教你实现表格排序（第一部分）</a>
  </li>
</ul>