分别用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获取表单enctype属性的方法
Apr 02 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
vue 文件目录结构详解
Nov 24 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 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 表单数据的获取代码
2009/03/10 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
python中base64加密解密方法实例分析
2015/05/16 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
利用python获取Ping结果示例代码
2017/07/06 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
django解决跨域请求的问题
2018/11/11 Python
python模块导入的细节详解
2018/12/10 Python
python join方法使用详解
2019/07/30 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
给儿子的表扬信
2014/01/15 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
自我评价优缺点范文
2015/03/11 职场文书
超市员工管理制度
2015/08/06 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Go 内联优化让程序员爱不释手
2022/06/21 Golang