活动:一次性充值满500元,虚拟主机产品8折特惠! 全国免费咨询热线:℡ 400-9918-136
帮助和公告

感谢您的关注,我们一直致力于为您提供放心、满意的服务。

返回首页

JS网页实现文字图片上下滚动代码

信息来源:亿速互联修改时间:2019/8/15 13:50:09

此代码可以实现文字或图片不间断上下滚动, 鼠标经过暂停滚动功能。

将此代码根据需要插入到网页中的合适位置即可,CSS样式根据实际需要修改。,其中里面的文字可以替换成图片<img>。


<style type="text/css">
  *{
   margin:0px;
   padding:0px;
   border:0px;
  }
  body{
 font-size:12px;
 font-family: "微软雅黑", "新宋体";
}
  #demo{
 overflow:hidden;
 height:100px;
 width:300px;
 margin:100px auto;
 position:relative;
 background-color: #000000;
  }
  #demo1{
   height:auto;
   text-align:left;
  }
  #demo2{
   height:auto;
   text-align:left;
  }
  #demo1 li{
 list-style-type:none;
 height:25px;
 text-align:left;
 text-indent:20px;
 color: #FFFFFF;
  }
  #demo2 li{
 list-style-type:none;
 height:25px;
 text-align:left;
 text-indent:20px;
 color: #FFFFFF;
  }
 </style>
</head>
<body>
<div id="demo">
 <ul id="demo1">
  <li>文字上下滚动代码 第一行</li>
  <li>文字上下滚动代码 第二行</li>
  <li>文字上下滚动代码 第三行</li>
  <li>文字上下滚动代码 第四行</li>
  <li>文字上下滚动代码 第五行</li>
  <li>文字上下滚动代码 第六行</li>
 </ul>
 <div id="demo2"></div>
</div>
<script type="text/javascript">
 var speed=20
  // speed= 滚动速度 数值越大速度越慢
  var demo=document.getElementById("demo");
  var demo2=document.getElementById("demo2");
  var demo1=document.getElementById("demo1");
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
   if(demo.scrollTop>=demo1.offsetHeight){
    demo.scrollTop=0;
   }
   else{
    demo.scrollTop=demo.scrollTop+1;
   }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function(){clearInterval(MyMar)}
  demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
 </script>

为您推荐以下内容