分别用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中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
Vue动态创建注册component的实例代码
Jun 14 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
PHP4和PHP5共存于一系统
2006/11/17 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
python实现数独算法实例
2015/06/09 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Python制作exe文件简单流程
2019/01/24 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
煤矿机修工岗位职责
2014/02/07 职场文书
化学工程专业求职信
2014/08/10 职场文书
初中毕业生自我评价
2015/03/02 职场文书
个人专业技术总结
2015/03/05 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
python和anaconda的区别
2022/05/06 Python