分别用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系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
k8s node节点重新加入master集群的实现
Feb 22 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设计模式中工厂模式详细介绍
2013/05/15 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
php生成gif动画的方法
2015/11/05 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
实例解析Python中的__new__特殊方法
2016/06/02 Python
便捷提取python导入包的属性方法
2018/10/15 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
详解Python sys.argv使用方法
2019/05/10 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python 制作本地应用搜索工具
2021/02/27 Python
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
类和结构的区别
2012/08/15 面试题
30年同学聚会邀请函
2014/01/25 职场文书
培养联系人考察意见
2015/06/01 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android