分别用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 XML实现两级级联下拉列表
Nov 10 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
javascript折半查找详解
Jan 26 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
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使用数组实现队列
2012/02/05 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python 连连看连接算法
2008/11/22 Python
python连接mysql调用存储过程示例
2014/03/05 Python
python实现无证书加密解密实例
2014/10/27 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
python后端接收前端回传的文件方法
2019/01/02 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
应届生.NET方向面试题
2015/05/23 面试题
linux面试题参考答案(10)
2013/11/04 面试题
会计师职业生涯规划范文
2014/02/18 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
活动总结书怎么写
2015/05/11 职场文书
尼克胡哲观后感
2015/06/08 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python