js实现文字滚动效果_搜索框里面文字滚动效果js-CSDN博客

本文链接：https://blog.csdn.net/kataerdeshui/article/details/12507749

<html>
<head>
<title>文字轮动实现Demo</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
var speed = 50 ;
var _demo = document.getElementById("demo");
var _demo1 = document.getElementById("demo1");
var _demo2 = document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML ;
function Marquee(){
if(_demo2.offsetTop-_demo.scrollTop<=0){
_demo.scrollTop-=_demo1.offsetHeight
}else{
_demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed) ;
_demo.οnmοuseοver=function() {clearInterval(MyMar)} ;
_demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
});
</script>
</head>
<body>
<div class="RPR-P1">
<div class="RPR-P1-R2">
<div id="demo" class="OBQList" style="overflow: hidden; width: 100%; height:152px; color:#fff; margin:0px;line-height:22px;">
<div id="demo1">·<a href="" target="_blank" style="text-decoration:none;color:greenyellow; ">以房养老首倡者：民众借反对以房养老抒发怨气</a><br>
  ......<br>
·<a href="" target="_blank" style="text-decoration:none;color:orangered; ">华谊王中军：青年创业是中国主流日本年轻人差远了</a><br>
  ......<br>
·<a href="" target="_blank" style="text-decoration:none;color:cyan;">图集：福布斯2013科技富豪榜苹果首席设计师操刀徕卡</a><br>
  ......<br>
</div>
<div id="demo2"></div>
</div>
</div>
</div>
</body>

</html>

横向滚动：

<div id="demo" style="overflow: hidden; height: 20px; width: 500px; background: #f4f4f4;
color: #000">
<div id="demo1">
<div style="float:left; width: 1000px; ">123456789123456789 sadfasdfasdf dfgsdfghywserty 地方规划水电费噶 2354687567u fgsdghsdfgh 3455678965 sdfasdfh</div></div>
<div id="demo2"></div>
</div>
<script type="text/javascript">
var speed = 50;
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
demo2.innerHTML = demo1.innerHTML;
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth;
else{
demo.scrollLeft++;
}
setTimeout(Marquee, speed);
}
</script>