分别用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 在线压缩和格式化收藏
Jan 16 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
js简易版购物车功能
Jun 17 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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执行速度全攻略(上)
2006/10/09 PHP
简单的用PHP编写的导航条程序
2006/10/09 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
Python实现豆瓣图片下载的方法
2015/05/25 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
某个公司的Java笔面试题
2016/03/11 面试题
房地产公司工程部经理岗位职责
2015/04/09 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Nginx限流和黑名单配置
2022/05/20 Servers