js案例之跑马灯代码

来源：动视网责编：小采时间：2020-11-27 20:16:54

js案例之跑马灯代码

js案例之跑马灯代码:具体代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;

推荐度：

点击下载本文 文档为doc格式

导读js案例之跑马灯代码:具体代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
 margin:0;
 padding:0;
 font-size:14px;
 }
 #box{
 margin:50px auto;
 padding:0 10px;
 width:1000px;
 height:35px;
 line-height:35px;
 border:1px dashed green;
 background:lightgreen;
 }
 #box #wrap{
 height:35px;
 overflow:hidden;
 white-space:nowrap;
 }
 #box span{
 color:red;
 font-weight:bold;
 font-size:16px;
 }
 #wrap div{
 display:inline-block;
 }</style>
</head>
<body>
 <div id='box'>
 <div id='wrap'>
 <div id='conBegin'>
 <span>通知：</span>7月6日消息,今日下午人民日报在微博上发表了一篇名为《新闻莫被算法"绑架"》的文章,文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越'简单粗暴'了,并批判这些公司引.文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越'简单粗暴'了,并批判这些公司引
 </div>
 <div id='conEnd'>
 <span>通知：</span>7月6日消息,今日下午人民日报在微博上发表了一篇名为《新闻莫被算法"绑架"》的文章,文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越'简单粗暴'了,并批判这些公司引.文中直指"今日头条""一点资讯"这类痴迷于技术和算法的新闻客户端越来越'简单粗暴'了,并批判这些公司引
 </div>
 </div>
 
 </div>

 <script>
 ~function(){var box = document.getElementById('box');var conBegin = document.getElementById('conBegin');var wrap = document.getElementById('wrap');var conBegin_width = getCss(conBegin,'width');//之前封装好的获取css样式的方法var timer = window.setInterval(move,10)function move(){//优化前的代码// var curLeft = wrap.scrollLeft;// wrap.scrollLeft = curLeft +1;// var newLeft = wrap.scrollLeft;// if(curLeft == newLeft){// //利用了scrollLeft是存在最大值的思想，在累加1之前获取一个值，在累加之后获取一个值，如果两个值相等了，说明已经达到最大值了，所以清除定时器// // window.clearInterval(timer)// wrap.scrollLeft = 0//这样虽然从头开始了，但是会导致会闪烁一下。// }//优化后的代码 使用两个一样内容的div避免闪烁wrap.scrollLeft++;var curLeft = wrap.scrollLeft;if(wrap.scrollLeft >= conBegin_width){
 wrap.scrollLeft = 0}
 }//鼠标划过停止box.onmouseover = function(){
 window.clearInterval(timer);
 }
 box.onmouseout = function(){
 timer = window.setInterval(move,10)
 }
 }() </script>
</body>
</html>

js案例之跑马灯代码

js案例之跑马灯代码:具体代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;

推荐度：

点击下载本文 文档为doc格式

标签：跑马灯 js 代码

热门焦点

js案例之跑马灯代码

js案例之跑马灯代码

js案例之跑马灯代码

最新推荐

猜你喜欢

热门推荐