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 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 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
改造一台复古桌面收音机
2021/03/02 无线电
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
5.1手机促销活动
2014/01/17 职场文书
火箭队口号
2014/06/18 职场文书
英语投诉信范文
2015/07/03 职场文书
交通安全温馨提示语
2015/07/14 职场文书
python装饰器代码解析
2022/03/23 Python