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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
js操作iframe父子窗体示例
May 22 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
JS实现九宫格拼图游戏
Jun 28 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/03 冲泡冲煮
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
Python中的getopt函数使用详解
2015/07/28 Python
Python 加密的实例详解
2017/10/09 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
最新大学职业规划书范文
2013/12/30 职场文书
庆七一活动方案
2014/01/25 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
离婚协议书样本
2015/01/26 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang
nginx静态资源的服务器配置方法
2022/07/07 Servers