分别用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性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
js分页工具实例
Jan 28 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
我的论坛源代码(六)
2006/10/09 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php创建无限级树型菜单
2015/11/05 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
农历与西历对照
2006/09/06 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
学习vue.js计算属性
2016/12/03 Javascript
js实现图片360度旋转
2017/01/22 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
如何将json数据转换为python数据
2020/09/04 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
数据库专业英语
2012/11/30 面试题
空中乘务员岗位职责
2014/03/08 职场文书
实习报告评语
2014/04/26 职场文书
管理建议书范文
2014/05/13 职场文书
捐款活动总结
2014/08/27 职场文书