了解示例以前,先普及几个名词:
offsetWidth:offsetWidth = width + padding + border;
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离;
setInterval:有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码.
原理:每隔设定的时间后,id为demo的div向左移动1个px(scrollLeft++),当移动的长度等于id为demo1的
offsetWidth时,相当于整个id为demo1的div全部隐藏,这时我们看到的其实是demo2,此时将demo的scrollLeft恢复为
初始值,demo1重新向左移动,以此往复。
注:demo1的offsetWidth >
demo的offsetWidth,此为关键点
。否则就会出现,往左移动到demo2的最后一张图片出来后就卡住不动的情况。
<div align="center" id="demo">
<div id="demo1">
<img src="xxx.jpg">
<img src="xxx.jpg">
<img src="xxx.jpg">
<img src="xxx.jpg">
<img src="xxx.jpg">
<img src="xxx.jpg">
</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed = 10; //滚动速度值,值越大速度越慢
demo2.innerHTML = demo1.innerHTML;//克隆demo2为demo1
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth;
}else{
demo.scrollLeft++;
}
}
var MyMar = setInterval(Marquee, speed); //设置定时器
demo.onmouseover = function() {
clearInterval(MyMar);
} //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed);
} //鼠标移开时重设定时器
-->
</script>
分享到:
相关推荐
跑马灯公告 播放器LOGO 时间显示 电量显示 标题显示 字幕功能 弹幕功能 选集列表 下一集 自动下一集 播放记录 加载画面 画中画 锁屏 视频旋转 移动端自动横屏 资源地址加密 注意问题: 1.不兼容IE浏览器 2.php版本...
跑马灯公告 播放器LOGO 时间显示 电量显示 标题显示 字幕功能 弹幕功能 选集列表 下一集 自动下一集 播放记录 加载画面 画中画 锁屏 视频旋转 移动端自动横屏 资源地址加密 注意问题: 1.不兼容IE浏览器 2.php版本...
[x] 文字跑马灯 [x] 弹出层(常用于选择商品属性) [x] 订单好中差评价交互 [x] 富文本解析 [x] 左侧可滑动tabbar [x] 横向滚动图文 [x] 省市区三级联动(单页面(小程序的页面层级限制)、...
4.3.3字体跑马灯效果实现 28 4.3.4游戏初始化 28 4.3.5判断消除图片 29 4.3.6在两图片之间连线 32 4.4 本章小结 33 第5章 系统测试与性能 34 5.1软件测试 34 5.1.1测试简介 34 5.1.2测试分类 34 5.1.3测试步骤 34 ...
3.抽奖界面可自由设定,操作类似Office非常方便,功能远超过同类产品,并且享受模板支持,无须自己寻找素材 (自定义背景、图片、文字、跑马灯等效果) 4.抽奖音乐可自由设置 (三种抽奖音乐模式:背景音乐、抽奖进行...
mvc:增加简易跑马灯效果 mvc:增加简易幻灯片效果 mvc:html过滤:允许属性id,允许img的border,width,height属性 mvc:修复了使用to针对textarea验证时无效的bug mvc:增加 ctx.PostDecimal/ctx.PostDouble ...
13.5 实例三:跑马灯特效 13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章...
13.5 实例三:跑马灯特效 13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字...
13.5 实例三:跑马灯特效 13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:...
13.5 实例三:跑马灯特效 13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字...
13.5 实例三:跑马灯特效 13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字...
13.5 实例三:跑马灯特效 13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字...
文字跑马灯 弹出层(常用于选择商品属性) 订单好中差评价相互作用 富文本解析(项目地址: ) 顶端可滑动tabbar 横向滚动图文 省市区三级联动(单页面(小程序的页面层级限制),多页面两种) 装货 验证码倒计时 ...
13.5 实例三:跑马灯特效 13.6 实例四:图片淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字...
util实现Java图片水印添加功能,有添加图片水印和文字水印,可以设置水印位置,透明度、设置对线段锯齿状边缘处理、水印图片的路径,水印一般格式是gif,png,这种图片可以设置透明度、水印旋转等,可以参考代码...