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


Posted in Javascript onAugust 24, 2016

本文实例讲述了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>

效果图如下:

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

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

Javascript 相关文章推荐
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
tab栏切换原理
Mar 22 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
vue项目实战总结篇
Feb 11 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 Javascript
JS动态加载脚本并执行回调操作
Aug 24 #Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 #Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 #Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 #Javascript
js友好的时间返回函数
Aug 24 #Javascript
JS转换HTML转义符的方法
Aug 24 #Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 #Javascript
You might like
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
jquery创建div 实现代码
2009/04/27 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解Node 定时器
2018/02/26 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Python的词法分析与语法分析
2013/05/18 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python一键去抖音视频水印工具
2018/09/14 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python Tkinter版学生管理系统
2019/02/20 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
基于python代码批量处理图片resize
2020/06/04 Python
Python中的Cookie模块如何使用
2020/06/04 Python
python中adb有什么功能
2020/06/07 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
临床护理求职信
2014/04/26 职场文书
主要负责人任命书
2014/06/06 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
四风查摆剖析材料
2014/10/10 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript