1. 程式人生 > >文字無縫滾動jQuery上下滾動js效果程式碼

文字無縫滾動jQuery上下滾動js效果程式碼

HTML程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery文字無縫滾動效果程式碼 - 16素材網</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.list_lh li:even').addClass('lieven');
})
$(function(){
	$("div.list_lh").myScroll({
		speed:40, //數值越大,速度越慢
		rowHeight:68 //li的高度
	});
});
</script>
</head>

<body>
<div class="box">
	<div class="bcon">
		<h1><b>領號實時播報</b></h1>
		<!-- 程式碼開始 -->
		<div class="list_lh">
			<ul>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">1000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">2000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">3000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">4000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">5000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">6000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">7000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">8000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">9000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">1000000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">1100000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
				<li>
					<p><a href="http://www.16sucai.com/" target="_blank">1200000</a><a href="http://www.16sucai.com/" target="_blank" class="btn_lh">領號</a><em>獲得</em></p>
					<p><a href="http://www.16sucai.com/" target="_blank" class="a_blue">網遊戰江湖公測豪華禮包</a><span>17:28:05</span></p>
				</li>
			</ul>
		</div>
		<!-- 程式碼結束 -->
	</div>
	
	<div class="btm">
	<p>適用瀏覽器:IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗. 不支援及以下瀏覽器。</p>
	 
	</div>
	
</div>

</body>
</html>

css程式碼
/* CSS Document */
*{margin:0;padding:0;font-size:12px;}
body{ background:none;}
input,button,select,textarea{outline:none;}
ul,li,dl,ol{list-style:none;}
a{color:#666; text-decoration:none;}

.box{ width:980px; 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:bold 14px/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;}

.btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;}

JS程式碼
// JavaScript Document
(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);


相關推薦

no