分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码


Posted in Javascript onSeptember 21, 2011
<!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> 
<TITLE>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE> 
</HEAD> 
<BODY> 
用marquee实现首尾相连循环滚动效果(仅IE):<br /><br /> 
<MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on">这里是要滚动的内容</SPAN></MARQUEE> 
<br /><br />用DIV+javascript实现首尾相连循环滚动效果(兼容firefox):<br /><br /> 
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;"><span>这里是要滚动的内容</span></DIV> 
<script language="javascript" type="text/javascript"> 
<!-- 
function scroll(obj) { 
var tmp = (obj.scrollLeft)++; 
//当滚动条到达右边顶端时 
if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML; 
//当滚动条滚动了初始内容的宽度时滚动条回到最左端 
if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0; 
} 
setInterval("scroll(document.getElementById('scrollobj'))",20); 
//--> 
</script> 
</BODY> 
</HTML>
Javascript 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
Dom操作之兼容技巧分享
Sep 20 #Javascript
js获取图片大小的函数代码
Sep 20 #Javascript
javascript中的注释使用与注意事项小结
Sep 20 #Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 #Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 #Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 #Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 #Javascript
You might like
用PHP读取IMAP邮件
2006/10/09 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python 的 with 语句详解
2014/06/13 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python实现弹球小游戏
2020/08/01 Python
Python 高效编程技巧分享
2020/09/10 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
python温度转换华氏温度实现代码
2020/12/06 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
铭立家具面试题
2012/12/06 面试题
自行车广告词大全
2014/03/21 职场文书
大学生新学期计划书
2014/04/28 职场文书
公司委托书怎么写
2014/08/02 职场文书
圣诞节开幕词
2015/01/29 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS