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 相关文章推荐
js 函数调用模式小结
Dec 26 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
Python求出0~100以内的所有素数
2018/01/23 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python三大神器之fabric使用教程
2019/06/10 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
企业承诺书格式
2014/05/21 职场文书
小学班主任培训方案
2014/06/04 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
2019银行竞聘书
2019/06/21 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫