搜索
查看: 43|回复: 0

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

[复制链接]

374

帖子

19

精华

1686

金币

本站管理员

XM币
6700

灌水之王突出贡献本站元老大师哥一枚金牛座至尊勋章蘑菇头

发表于 2020-6-19 22:44:51 | 显示全部楼层 |阅读模式
此代码可以实现文字或图片不间断上下滚动, 鼠标经过暂停滚动功能。
将此代码根据需要插入到网页中的合适位置即可,CSS样式根据实际需要修改。,其中里面的文字可以替换成图片<img>。
  1. <style type="text/css">
  2.   *{
  3.    margin:0px;
  4.    padding:0px;
  5.    border:0px;
  6.   }
  7.   body{
  8. font-size:12px;
  9. font-family: "微软雅黑", "新宋体";
  10. }
  11.   #demo{
  12. overflow:hidden;
  13. height:100px;
  14. width:300px;
  15. margin:100px auto;
  16. position:relative;
  17. background-color: #000000;
  18.   }
  19.   #demo1{
  20.    height:auto;
  21.    text-align:left;
  22.   }
  23.   #demo2{
  24.    height:auto;
  25.    text-align:left;
  26.   }
  27.   #demo1 li{
  28. list-style-type:none;
  29. height:25px;
  30. text-align:left;
  31. text-indent:20px;
  32. color: #FFFFFF;
  33.   }
  34.   #demo2 li{
  35. list-style-type:none;
  36. height:25px;
  37. text-align:left;
  38. text-indent:20px;
  39. color: #FFFFFF;
  40.   }
  41. </style>
  42. </head>
  43. <body>
  44. <div id="demo">
  45. <ul id="demo1">
  46.   <li>文字上下滚动代码 第一行</li>
  47.   <li>文字上下滚动代码 第二行</li>
  48.   <li>文字上下滚动代码 第三行</li>
  49.   <li>文字上下滚动代码 第四行</li>
  50.   <li>文字上下滚动代码 第五行</li>
  51.   <li>文字上下滚动代码 第六行</li>
  52. </ul>
  53. <div id="demo2"></div>
  54. </div>
  55. <script type="text/javascript">
  56. var speed=20
  57.   // speed= 滚动速度 数值越大速度越慢
  58.   var demo=document.getElementById("demo");
  59.   var demo2=document.getElementById("demo2");
  60.   var demo1=document.getElementById("demo1");
  61.   demo2.innerHTML=demo1.innerHTML
  62.   function Marquee(){
  63.    if(demo.scrollTop>=demo1.offsetHeight){
  64.     demo.scrollTop=0;
  65.    }
  66.    else{
  67.     demo.scrollTop=demo.scrollTop+1;
  68.    }
  69.   }
  70.   var MyMar=setInterval(Marquee,speed)
  71.   demo.onmouseover=function(){clearInterval(MyMar)}
  72.   demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
  73. </script>
复制代码


免费提供各类网站模板,游戏开服网页模版,魔域版本源码,娱乐网站模板,各类技术分享,魔域GM技术文章,魔域攻略资讯,魔域外挂辅助下载,单机游戏,分享各类游戏源码和辅助工具尽在(WWW.XMMYW.COM)小孟魔域资源网!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热门源码
整站精华排行
工具推荐

小孟魔域网是一个爱好魔域研究技术分享站。

游戏网页模板,娱乐模板,游戏工具,游戏技术分享等!

Copyright © 2018-2020 WWW.XMMYW.COM by Discuz! X3.4

返回顶部 返回列表