| 阅：7 | 回：0 | JS网页实现文字图片上下滚动代码 |
| 鱼鱼 |
发表于 2024-12-23 9:58:20
|
 职务:管理员
|
JS网页实现文字图片上下滚动代码 此代码可以实现文字或图片不间断上下滚动， 鼠标经过暂停滚动功能。 将此代码根据需要插入到网页中的合适位置即可，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> 以萌养阵，方可长命百岁。  |
