分别用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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
npm qs模块使用详解
Feb 07 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获取文件相对路径的方法
2015/02/26 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
JS 实现Json查询的方法实例
2013/04/12 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Python3 assert断言实现原理解析
2020/03/02 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
战友聚会邀请函
2014/01/18 职场文书
优秀部门获奖感言
2014/02/14 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
五一手机促销方案
2014/03/08 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
学校师德承诺书
2014/05/23 职场文书
承诺书格式范文
2014/06/03 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
党委班子剖析材料
2014/08/21 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android