JS简单实现无缝滚动效果实例

本文实例讲述了JS简单实现无缝滚动效果。分享给大家供大家参考,具体如下:

<!doctype html>
<title>javascript无缝滚动</title>
<meta charset="utf-8" />
<meta name="keywords" content="javascript无缝滚动" />
<meta name="description" content="javascript无缝滚动" />
<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无缝滚动(向右滚动)</h1>
<div id="marquee">
  <dl>
    <dt>
      <a href="###"><img src="img/o_s017.jpg" alt="javascript无缝滚动"/></a>
      <a href="###"><img src="img/o_s018.jpg" alt="javascript无缝滚动"/></a>
      <a href="###"><img src="img/o_s019.jpg" alt="javascript无缝滚动"/></a>
      <a href="###"><img src="img/o_s020.jpg" alt="javascript无缝滚动"/></a>
      <a href="###"><img src="img/o_s021.jpg" alt="javascript无缝滚动"/></a>
      <a href="###"><img src="img/o_s022.jpg" alt="javascript无缝滚动"/></a>
      <a href="###"><img src="img/o_s023.jpg" alt="javascript无缝滚动"/></a>
    </dt>
    <dd></dd>
  </dl>
</div>

效果图如下:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • javascript实现的上下无缝滚动效果

    本文实例讲述了javascript实现的上下无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍了JS左右无缝滚动效果,现在做下无缝滚动--上下的效果.其他代码和左右的差不多,只是改变的是 offsetTop 的值,并且不需要计算 ul 整体的宽度了. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚

  • JS无缝滚动效果实现方法分析

    本文实例讲述了JS无缝滚动效果实现方法.分享给大家供大家参考,具体如下: 效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向左运动的效果 3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0.向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度).(拉的瞬间很快,用户察觉不到,造成一种无

  • angularjs实现文字上下无缝滚动特效代码

    最近没有项目做,于是闲暇之余学习了下angularjs知识,然后写了一个文字上下无缝滚动的例子,主要写的是一个小小的指令. css代码: 主要控制样式 <style type="text/css"> *{margin: 0px;padding: 0px;} .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}

  • js向上无缝滚动,网站公告效果 具体代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv=&q

  • JS平滑无缝滚动效果的实现代码

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 {

  • Javascript 实现图片无缝滚动

    效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 复制代码 代码如下: <style type="text/css">             * {                 margin: 0;                 padding: 0;             }             #div1 {                 overflow: hidden;                 width: 71

  • 标准的js无缝滚动效果

    本文实例为大家分享了js无缝滚动效果实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> #warp{ width: 1200px; height: 300px; overflow: hidden; margin:100p

  • javascript实现的左右无缝滚动效果

    本文实例讲述了javascript实现的左右无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍过图片左右滚动,不过图片是间歇性的一张一张滚动,今天介绍的是几张图片一起进行无缝滚动,这是一个常用的 js 效果. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚动--左右</title> &

  • JavaScript实现垂直向上无缝滚动特效代码

    一.循环向上滚动的文字,如上面的滚动效果 二.实现的思路 1.建立三个层dome.dome1.dome2 2.垂直滚动的文字在dome1上 3.通过层的滚动来实现文字滚动 三.源代码 <html> <head> <title>循环向上滚动的文字</title> <link href="css/scrollTop.css" rel="stylesheet" type="text/css" /&g

  • JS实现的N多简单无缝滚动代码(包含图文效果)

    本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

  • js实现可控制左右方向的无缝滚动效果

    本文实例为大家分享了无缝滚动效果JavaScript代码实现,供大家参考,具体内容如下] 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>zzzz</title> <style> *{ margin: 0; padding:0; } body{ width: 1000px; margin: 100px a

  • JQuery插件Marquee.js实现无缝滚动效果

    Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果. { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000 // 滚动完到下一条的间隔时间 pauseOnHover: true // 鼠标滑向文字时是否停止滚动 loop: -1 // 设置循环滚动次

随机推荐

其他