跑马灯(字幕水平滚动)的两种实现方式
2017-04-09 13:15
453 查看
js实现
以上为js实现的跑马灯效果,支持google、firefox和ie,不过在ie上有一个bug就是input输入框的光标闪烁很不稳定,有时候正常,有时候过快,有时候没有。
marquee标签实现
以上为marquee标签实现的跑马灯效果,不过marquee标签已被html5遗弃,虽然marquee在google、firefox和ie中都有效,但onMouseOut=”this.start();” onMouseOver=”this.stop();”在firefox中会报错。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin: 0px; padding: 0px; } .scroll-bar{ width: 100%; overflow: hidden; } .scroll-content{ display: inline-block; white-space : nowrap; } input{ margin-left: 100px; } </style> </head> <body> <div class="scroll-bar"> <div class="scroll-content"> 床前明月光,疑是地上霜。举头望明月,低头思故乡。 </div> </div> <input type="text" name="" value=""> </body> <script type="text/javascript" src="jquery-3.0.0.min.js"></script> <script type="text/javascript"> var interval = null; var contentWidth = $(".scroll-content").width(); $(function(){ $(".scroll-content").css("margin-left",0-contentWidth); startScroll(); $(".scroll-content").mouseover(function(){ console.log("mouseover;"); clearInterval(interval); }); $(".scroll-content").mouseout(function(){ console.log("mouseout;"); startScroll(); }); }); function startScroll(){ var offset = parseFloat($(".scroll-content").css("margin-left")); interval = setInterval(function(){ if (offset <= document.body.clientWidth) { offset = offset + 10; $(".scroll-content").css("margin-left",offset); }else{ offset = 0-contentWidth; } },100); } </script> </html>
以上为js实现的跑马灯效果,支持google、firefox和ie,不过在ie上有一个bug就是input输入框的光标闪烁很不稳定,有时候正常,有时候过快,有时候没有。
marquee标签实现
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> *{ margin: 0px; padding: 0px; } .scroll-bar{ width: 100%; } input{ margin-left: 100px; } </style> </head> <body> <div class="scroll-bar"> <marquee direction="right" onMouseOut="this.start();" onMouseOver="this.stop();"> 床前明月光,疑是地上霜。举头望明月,低头思故乡。 </marquee> </div> <input type="text" name="" value=""> </body> <script type="text/javascript" src="jquery-3.0.0.min.js"></script> </html>
以上为marquee标签实现的跑马灯效果,不过marquee标签已被html5遗弃,虽然marquee在google、firefox和ie中都有效,但onMouseOut=”this.start();” onMouseOver=”this.stop();”在firefox中会报错。
相关文章推荐
- 三种方式实现字幕水平滚动(走马灯),而且定时更新
- Android 文字自动滚动(跑马灯)效果的两种实现方法
- Android之如何用TextView实现滚动字幕的效果【跑马灯】
- (二)跑马灯的两种实现方式
- 自定义View实现文字跑马灯效果(垂直滚动和水平滚动)
- 安卓TextView滚动字幕实现跑马灯
- Android 跑马灯效果实现的两种方式,解决和viewpager的冲突问题
- iOS - 支持水平 / 垂直显示自动滚动的跑马灯控件 --- SKAutoScrollLabel 的使用和实现
- 安卓开发文字跑马灯效果的两种实现方式
- Android 文字自动滚动(跑马灯)效果的两种实现方法
- Android 文字自动滚动(跑马灯)效果的两种实现方法[特别好使]
- Android 文字自动滚动(跑马灯)效果的两种实现方法
- Android 文字自动滚动(跑马灯)效果的两种实现方法
- javascript方式实现无缝滚动(两种方式)
- Android 使GridView横向水平滚动的实现方式
- ios自动滚动UILabel,跑马灯,有两种滚动方式
- 详解Android使GridView横向水平滚动的实现方式
- 水平方向滚动字幕的实现
- 超界文字滚动 (id和类型两种实现方式)
- Android 文字自动滚动(跑马灯)效果的两种实现方法[特别好使]