1、文字左右滚动
#big-demo{ float: left; width: 500%; } <div class="fr" id="demo"> <div id="big-demo"> <div id="demo1"> <ul> <li></li> <li></li> </ul> </div> <div id="demo2"> </div> </div> </div> <script> var Timer = setInterval(scroll,1000); function scroll(){ clearInterval(Timer); var speed=20; var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } var scroll=setInterval(Marquee,speed); tab.οnmοuseοver=function() {clearInterval(scroll)}; tab.οnmοuseοut=function() {scroll=setInterval(Marquee,speed)}; } </script>
2、文字上下滚动
(function($){
$.fn.myScroll = function(options){
//默认配置
var defaults = {
speed:40, //滚动速度,值越大速度越慢
rowHeight:24 //每行的高度
};
var opts = $.extend({}, defaults, options),intId = [];
function marquee(obj, step){
obj.find("ul").animate({
marginTop: '-=1'
},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}
this.each(function(i){
var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
_this.hover(function(){
clearInterval(intId[i]);
},function(){
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
});
});
}
})(jQuery);
<div class="myscroll">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
.myscroll {
width: 300px;
height: 260px;
margin: 0 auto;
border: 1px solid #ccc;
line-height: 26px;
font-size: 12px;
overflow: hidden;
}
.myscroll li {
height: 26px;//step
margin-left: 25px;
}