手机版 | 登陆 | 注册 | 留言 | 设首页 | 加收藏
当前位置: 网站首页 > 源码分享 > 网页代码 > 文章 当前位置: 网页代码 > 文章

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

时间:2019-11-24    点击: 次    来源:网络    作者:小码 - 小 + 大

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

将此代码根据需要插入到网页中的合适位置即可,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>

上一篇:网站http强制跳转到https的JS代码(JavaScript)

下一篇:软码库背景图片加句子表白网页特效源码

软码库_找资源就来软码库!