jQuery仿QQ游戏首页Flash滚动效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿QQ游戏首页Flash滚动效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>仿QQ游戏首页flash滚动</title>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/jQueryTimer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	
	$("div[id*='listbox']").hover(
		function(){$(this).animate({"margin-top":"-10px"},200)},
		function(){$(this).animate({"margin-top":"0px"},200);}
	);
	var tmp=$("div[id*='listbox']").eq(0).children("img").attr("src");
	//鼠标点击过程
	$("div[id*='listbox']").click(function(){
		  if(parseInt($(this).css("z-index"))<=3){
			  var curZindex = parseInt($(this).css("z-index"));
			  //通过z-index差计算该层需要经过几次轮换效果置顶，
			  var  fntimes = 4-curZindex;
			  //对于当前处于第一位的图片点击无效果.
			  $(document).everyTime(300,function(){
				  $("div[id*='listbox']").each(function(){
					  if(parseInt($(this).css("z-index"))==4){$(this).css("z-index","1");}
					  else{$(this).css("z-index",""+(parseInt($(this).css("z-index"))+1)+"");}
					  $(this).css("margin-top","0px");
					  $(this).animate({"margin-left":((4-parseInt($(this).css("z-index")))*29)+"px"},300);
				  });
			  },fntimes);
		  }
	  });
	


setInterval(function(){
	$("div[id*='listbox']").each(function(){
				if(parseInt($(this).css("z-index"))==4){$(this).css("z-index","1");}
				else{$(this).css("z-index",""+(parseInt($(this).css("z-index"))+1)+"");}
				$(this).animate({"margin-left":((4-parseInt($(this).css("z-index")))*29)+"px"},300);
			});
},3000);

})

</script>
<style>
	body{ margin:0; padding:0; font-size:12px;}
	.showbox{ height:213px; width:765px; margin:100px auto 0;}
	.showbox #listbox0{height:213px; width:678px; z-index:4; float:left;cursor:pointer; display:inline; margin-left:0px; position:absolute; margin-top:0px;}
	.showbox #listbox1{height:213px; width:678px; z-index:3; float:left;cursor:pointer; display:inline; margin-left:29px; position:absolute;margin-top:0px;}
	.showbox #listbox2{height:213px; width:678px; z-index:2; float:left;cursor:pointer; display:inline; margin-left:58px; position:absolute;margin-top:0px;}
	.showbox #listbox3{height:213px; width:678px; z-index:1; float:left;cursor:pointer; display:inline; margin-left:87px; position:absolute;margin-top:0px;}
</style>

</head>

<body>
<div class="showbox">
	<div id="listbox0"><img src="img/QQad0.png" height="213" width="678" border="0" /></div>
    <div id="listbox1"><img src="img/QQad1.png" height="213" width="678" border="0" /></div>
    <div id="listbox2"><img src="img/QQad2.png" height="213" width="678" border="0" /></div>
    <div id="listbox3"><img src="img/QQad3.png" height="213" width="678" border="0" /></div>
</div>
</body>
</html>

JS代码(jQueryTimer.js):

// JavaScript Document/** * jQuery.timers - Timer abstractions for jQuery * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com) * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/). * Date:2009/10/16 * * @author Blair Mitchelmore * @version 1.2 * **/
jQuery.fn.extend({
	everyTime:function(interval,label,fn,times){
	return this.each(function(){
	jQuery.timer.add(this,interval,label,fn,times);
}
);
}
,oneTime:function(interval,label,fn){
	return this.each(function(){
	jQuery.timer.add(this,interval,label,fn,1);
}
);
}
,stopTime:function(label,fn){
	return this.each(function(){
	jQuery.timer.remove(this,label,fn);
}
);
}
}
);
	jQuery.extend({
	timer:{
	global:[],guid:1,dataKey:"jQuery.timer",regex:/^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,powers:{
	// Yeah this is major overkill...'ms':1,'cs':10,'ds':100,'s':1000,'das':10000,'hs':100000,'ks':1000000}
,timeParse:function(value){
	if (value == undefined || value == null)return null;
	var result = this.regex.exec(jQuery.trim(value.toString()));
	if (result[2]){
	var num = parseFloat(result[1]);
	var mult = this.powers[result[2]] || 1;
	return num * mult;
}
else{
	return value;
}
}
,add:function(element,interval,label,fn,times){
	var counter = 0;
	if (jQuery.isFunction(label)){
	if (!times)times = fn;
	fn = label;
	label = interval;
}
interval = jQuery.timer.timeParse(interval);
	if (typeof interval != 'number' || isNaN(interval) || interval < 0)return;
	if (typeof times != 'number' || isNaN(times) || times < 0)times = 0;
	times = times || 0;
	var timers = jQuery.data(element,this.dataKey) || jQuery.data(element,this.dataKey,{
}
);
	if (!timers[label])timers[label] ={
}
;
	fn.timerID = fn.timerID || this.guid++;
	var handler = function(){
	if ((++counter > times && times !== 0) || fn.call(element,counter) === false)jQuery.timer.remove(element,label,fn);
}
;
	handler.timerID = fn.timerID;
	if (!timers[label][fn.timerID])timers[label][fn.timerID] = window.setInterval(handler,interval);
	this.global.push( element );
}
,remove:function(element,label,fn){
	var timers = jQuery.data(element,this.dataKey),ret;
	if ( timers ){
	if (!label){
	for ( label in timers )this.remove(element,label,fn);
}
else if ( timers[label] ){
	if ( fn ){
	if ( fn.timerID ){
	window.clearInterval(timers[label][fn.timerID]);
	delete timers[label][fn.timerID];
}
}
else{
	for ( var fn in timers[label] ){
	window.clearInterval(timers[label][fn]);
	delete timers[label][fn];
}
}
for ( ret in timers[label] ) break;
	if ( !ret ){
	ret = null;
	delete timers[label];
}
}
for ( ret in timers ) break;
	if ( !ret )jQuery.removeData(element,this.dataKey);
}
}
}
}
);
	jQuery(window).bind("unload",function(){
	jQuery.each(jQuery.timer.global,function(index,item){
	jQuery.timer.remove(item);
}
);
}
);

附件:下载该文件资源,减少时间成本(增值服务)