JQ 文字无缝滚动效果

阅读更多

demo.css

.box{ width:400px; margin:0 auto;}
.bcon{ width:270px; border:1px solid #eee; margin:30px auto;}
.bcon h1{ border-bottom:1px solid #eee; padding:0 10px;}
.bcon h1 b{ font-size:14px; line-height:40px; border-top:2px solid #3492D1; padding:0 8px; margin-top:-1px; display:inline-block;}

.list_lh{ height:400px; overflow:hidden;}
.list_lh li{ padding:10px;}
.list_lh li.lieven{ background:#F0F2F3;}
.list_lh li p{ height:24px; line-height:24px;}
.list_lh li p a{ float:left;}
.list_lh li p em{ width:80px; font:normal 12px/24px Arial; color:#FF3300; float:right; display:inline-block;}
.list_lh li p span{ color:#999; float:right;}
.list_lh li p a.btn_lh{ background:#28BD19; height:17px; line-height:17px; color:#fff; padding:0 5px; margin-top:4px; display:inline-block; float:right;}
.btn_lh:hover{ color:#fff; text-decoration:none;}

 

scroll.js

(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);

 

demo.html

    

        
文字无缝上下滚动
        
        

            

                

                    
1000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
2000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
3000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
4000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
5000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
6000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
7000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
8000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
9000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
1000000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
1100000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
                

                    
1200000详情推荐
                    
阅谁问君诵，水落清香浮17:28:05
                
            
        
         
    

 

效果图：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• 
• 大小: 29.1 KB

• demo.rar (33.9 KB)
• 下载次数: 7

• 查看图片附件