style:
.wrap{ padding:10px; border:1px #ccc solid; width:500px;margin:20px auto; } .roll-wrap{ height:130px; overflow:hidden; }
html:
<div class="wrap"> <div class="roll-wrap" id="roll-wrap"> <ul> <li>JS文本向上滚动1</li> <li>JS文本向上滚动2</li> <li>JS文本向上滚动3</li> <li>JS文本向上滚动4</li> <li>JS文本向上滚动5</li> <li>JS文本向上滚动6</li> <li>JS文本向上滚动7</li> </ul> </div> </div>
js:
function scrollTxt(){ var controls={}, values={}, t1=200, /*播放动画的时间*/ t2=2000, /*播放时间间隔*/ si; controls.rollWrap=$("#roll-wrap"); controls.rollWrapUl=controls.rollWrap.children(); controls.rollWrapLIs=controls.rollWrapUl.children(); values.liNums=controls.rollWrapLIs.length; values.liHeight=controls.rollWrapLIs.eq(0).height(); values.ulHeight=controls.rollWrap.height(); this.init=function(){ autoPlay(); // pausePlay(); } /*滚动*/ function play(){ controls.rollWrapUl.animate({"margin-top" : "-"+values.liHeight}, t1, function(){ $(this).css("margin-top" , "0").children().eq(0).appendTo($(this)); }); } /*自动滚动*/ function autoPlay(){ /*如果所有li标签的高度和大于.roll-wrap的高度则滚动*/ if(values.liHeight*values.liNums > values.ulHeight){ si=setInterval(function(){ play(); },t2); } } /*鼠标经过ul时暂停滚动*/ function pausePlay(){ controls.rollWrapUl.on({ "mouseenter":function(){ clearInterval(si); } , "mouseleave":function(){ autoPlay(); } }); } } new scrollTxt().init();
还有一种(好像有好多种):
css:
#box{width:260px;height:100px;margin:0 auto;border:2px solid red;overflow: auto} ul{padding:0;margin:0;list-style: none;overflow: hidden} ul li{height:24px;line-height: 24px;padding-left:10px;} a{text-decoration: none;color:#000;} a:hover{color:#f00}
html:
<div id="box"> <ul id="con1" onMouseOut="Up()" onMouseOver="Stop()"> <li><a href="#" >1,课程html</a> </li> <li><a href="#">2,课程css</a> </li> <li><a href="#">3,课程js</a> </li> <li><a href="#">4,课程jquery</a> </li> <li><a href="#">5,课程html5</a> </li> <li><a href="#">6,课程css3</a> </li> <li><a href="#">7,课程hp</a> </li> <li><a href="#">8,课程bpootstrap</a> </li> <li><a href="#">9,课程apicloud</a> </li> </ul> <ul id="con2"></ul> </div>
js:
var box=document.getElementById("box"); var con1=document.getElementById("con1"); var con2=document.getElementById("con2"); var s=document.getElementsByTagName("a"); var speed=50; con2.innerHTML=con1.innerHTML; function ScrollUp(){ if( box.scrollTop>=con1.scrollHeight){ box.scrollTop=0; }else box.scrollTop++; } var i=setInterval("ScrollUp()",speed); function Stop(){ clearInterval(i); } function Up(){ i=setInterval("ScrollUp()",speed); }