分别用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 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
使用原生JS实现滚轮翻页效果的示例代码
May 31 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强制下载类型的实现代码
2011/04/21 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
php生成动态验证码gif图片
2015/10/19 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
使用Python编写vim插件的简单示例
2015/04/17 Python
Python程序运行原理图文解析
2018/02/10 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python如何安装第三方模块
2020/05/28 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
应届毕业生简历自我评价
2014/01/31 职场文书
房屋租赁意向书
2014/04/01 职场文书
学风建设演讲稿
2014/09/12 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
学校计划生育责任书
2015/05/09 职场文书
中秋节随笔
2015/08/15 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书