JS网页实现文字图片上下滚动代码
JS网页实现文字图片上下滚动代码
2023-02-15 22:52
此代码可以实现文字或图片不间断上下滚动， 鼠标经过暂停滚动功能。
将此代码根据需要插入到网页中的合适位置即可，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>