利用jquery实现搜狗浏览器5.0页面动画特效



63 251 84



特效描述:利用jquery实现 搜狗浏览器 5.0页面动画,利用jquery实现搜狗浏览器5.0页面动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="plugin/slitslider/css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery_1.7.2.js"></script>
<script type="text/javascript" src="plugin/slitslider/js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="plugin/slitslider/js/jquery.transit.min.js"></script>
<script type="text/javascript" src="plugin/slitslider/js/jquery.slitslider.js"></script>

3. HTML代码

	<div id="cont">
		<div id="guider">
			<img src="images/features5.0/fixed_arrow.png">
		</div>
		<a id="btn_down" type="btn_down" index="3">
			<div class="sign signImg1" id="sign1_1"></div>
			<div class="sign signImg2" id="sign2_1"></div>
		</a>
		<section id="sl-slider" class="sl-slider">
			<div class="sl-slide" data-orientation="vertical" data-cut1-rotation="-25" data-cut2-rotation="-25" data-cut1-scale="2" data-cut2-scale="2">
				<div id="cont1" class="cont">
					<div id="version">来源:<a href="http://51qianduan.com/" target="_blank">51前端</a></div>
					<div id="cont_box1" class="cont_box">
						<div id="top1" class="top">
							<div id="top1_hightlight"></div>
							<div id="unfold">
								<div id="num1">0</div>
								<div id="num2">0</div>
								<div id="switch1" class="switch">
									<div class="key"></div>
								</div>
								<div id="switch2" class="switch">
									<div class="key"></div>
								</div>
								<div id="switch3" class="switch">
									<div class="key"></div>
								</div>
								<div id="unfold_btm"></div>
							</div>
						</div>
						<div id="btm1" class="btm"></div>
						<div class="guide"></div>
					</div>
				</div>
			</div>
			<div class="sl-slide sl-slide-dark" data-orientation="vertical" data-cut1-rotation="25" data-cut2-rotation="25" data-cut1-scale="1.5" data-cut2-scale="1.5">
				<div id="cont2" class="cont">
					<div id="cont_box2" class="cont_box">
						<div id="top2" class="top">
							<object class="swf_object" width="100%" height="100%" style="visibility: visible;align:center;valign:center;width:100%;background:transparent" type="application/x-shockwave-flash" data="features5.0.swf" id="swf1">
								<param name="movie" value="features5.0.swf">
								 <param name="wmode" value="transparent">
								 <param name="Scale" value="ShowAll"> 
								 <param name="swLiveConnect" value="true">
								 <param name="allowScriptAccess" value="always" /> 
								<embed src="features5.0.swf" autostart="false" allowScriptAccess="always" style="visibility: visible;align:center;valign:center;width:100%;height:100%" play="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="swf1"></embed>
							</object>
						</div>
						<div id="btm2" class="btm"></div>
						<div class="guide"></div>
					</div>
				</div>
			</div>
			<div class="sl-slide sl-slide-color-1" data-orientation="vertical" data-cut1-rotation="-25" data-cut2-rotation="-25" data-cut1-scale="2" data-cut2-scale="1">
				<div id="cont3" class="cont">
					<div id="cont_box3" class="cont_box">
						<div id="top3" class="top"></div>
						<div id="btm3" class="btm">
							<div id="titles">
								<ul>
									<li id="li1"><div class="icon_b"></div><div class="icon_a" id="icon1"></div>搜狐 - 中国最大的门户网站...</li>
									<li id="li2"><div class="icon_b"></div><div class="icon_a" id="icon2"></div>搜狐视频 - 搜狐视频</li>
									<li id="li3"><div class="icon_b"></div><div class="icon_a" id="icon3"></div>搜狗搜索引擎 - 上网从搜狗开始</li>
									<li id="li4"><div class="icon_b"></div><div class="icon_a" id="icon4"></div>腾讯网 - 中国浏览量最大的中文门户网站</li>
									<li id="li5"><div class="icon_b"></div><div class="icon_a" id="icon5"></div>站酷(ZCOOL) - 设计师互动平台...</li>
									<li id="li6"><div class="icon_b"></div><div class="icon_a" id="icon6"></div>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </li>
									<li id="li7"><div class="icon_b"></div><div class="icon_a" id="icon7"></div>来源:<a href="http://51qianduan.com/" target="_blank">51前端</a></li>
								</ul>
							</div>
							<div id="feature1"><div class="marck"></div></div>
							<div id="feature2"><div class="marck"></div></div>
							<div id="btm3_highlight"></div>
							<div id="btns"></div>
						</div>
						<a id="startjourney" href="http://51qianduan.com"></a>
						<div class="guide"></div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<script>
	var pingback;
	var page_function = ["page1","page2","page3"];
	var page_o1,page_o2,page_o3;
	var slider_o1;
	$(document).ready(function(){
		slider_o1 = $( '#sl-slider' ).slitslider({"autoplay":true});
		resize();
		page_o1 = new page1();
		page_o2 = new page2();
		page_o3 = new page3();
		eval('page_o1.startplay()');
		$(window).resize(function(){
			resize();
		});
		signAnimate();
		$(document).bind("contextmenu",function(e){  
            return false;  
        });  
        pingback = new PingbackApp();
		pingback.getPv();
	});
	function resize(){
		var width = $(window).width();
		if(width<900){width=900;}
		var height = $(window).height();
		if(height<577){height=577;}
		$("#cont").css("height",height+"px");
		$("#cont").css("width",width+"px");
		$(".cont").css("width",width+"px");
		$(".sl-content-wrapper").css("width",width+"px");
		$(".cont_box").css({"margin-top":(height-577)/2+"px"});
		var height = height>577?(height-577)/2:0;
		$(".cont_inner").css({"top":height+'px'});
	}
	function page1(){
		this.init = function(){
			this.container = $("#cont_box1");
			this.top = $("#cont_box1 .top");
			this.btm = $("#cont_box1 .btm");
			this.highlight = this.container.find("#top1_hightlight");
			this.unfold = this.container.find("#unfold");
			this.key= this.unfold.find(".key");
			this.switchs = this.unfold.find(".switch");
			this.num1 = this.unfold.find("#num1");
			this.num2 = this.unfold.find("#num2");
			this.reset();
		};
		this.reset = function(){
			this.highlight.hide();
			this.unfold.hide();
			this.unfold.css({"height":"106px"});
			this.switchs.show();
			this.switchs.find(".key").css("left","0px");
		};
		var self = this;
		this.animatelist= [
		    function(next){
		    	self.highlight.fadeIn(500,next);
		    },
		    function(next){
		    	self.unfold.fadeIn(10);
		    	self.unfold.animate({"height":"375px"},200).animate({"height":"-=20px"},60).animate({"height":"+=20px"},40,next);
		    },
		    function(next){
		    	self.key.delay(500).animate({"left":"19px"},200,next);
		    },
		    function(next){
		    	self.switchs.hide();
		    	var num1 = 0;
				var num_timer1 = setInterval(function(){
					self.num1.html(parseInt(num1+=1));
					if(num1>=345||num2>=2.08){
						clearInterval(num_timer1);
						self.num1.text("345");
					}
				},5);
				var num2 = 0;
				var num_timer2 = setInterval(function(){
					num2 = ((Number)(num2)+0.01).toFixed(2);
					//num2 = (Number)(num2).toFixed(2)
					self.num2.html(num2);
					if(num1>=345||num2>=2.08){
						clearInterval(num_timer2);
						self.num2.text("2.08");
					}
				},5);
		    }
		  ];
		this.startplay = function(){
			queue( this.animatelist, function( current, index, next ) {
				current(next);
			}, function() {
			    //alert('end');
			});
		};
		this.init();
	}
	function page2(){
		this.init = function(){
			this.container = $("#cont_box2");
			this.top = $("#cont_box2 .top");
			this.btm = $("#cont_box2 .btm");
		};
		this.reset = function(){
			this.top.css("background","url(images/features5.0/cont2_t.png) no-repeat  -10px top");
			//this.container.hide();
			//this.
			// this.top.css({"top":"26px"});
			// this.btm.css({"top":"260px"});
		};
		this.startplay = function(){
			//this.container.fadeIn(500);
			callExternal("swf1");
			// this.top.animate({"top":"+=20px",},500);
			// this.btm.animate({"top":"-=20px",},500);
		};
		this.init();
	}
	function page3(){
		this.init = function(){
			this.container = $("#cont_box3");
			this.top = $("#cont_box3 .top");
			this.btm = $("#cont_box3 .btm");
			this.lis =  $("#cont_box3 li");
			this.text_bs =  $("#cont_box3 ul li .text_b");
			this.highlight = $("#cont_box3 #btm3 #btm3_highlight");
			this.feature1 = $("#cont_box3 #btm3 #feature1");
			this.feature2 = $("#cont_box3 #btm3 #feature2");
			this.btns =  $("#cont_box3 #btm3 #btns");
			this.startjourney = $("#cont_box3 #startjourney");
		};
		this.reset = function(){
			this.highlight.hide();
			this.lis.css("height","0px");
			this.feature1.css({"background-position":"0px -8px","opacity":"0"});
			this.feature2.css({"background-position":"0px -38px","opacity":"0"});
			var arr = [0,27,54,81,108,135,163];
			for(var i=1;i<=7;i++){
				$("#li"+i).css("top",arr[i-1]+"px");
			}
			this.btm.find(".icon_b").css("display","block");
			this.btm.find(".icon_a").css("display","none");
			this.lis.css("width","auto");
			this.btns.css("display","block");
			this.startjourney.css("display","none");
		};
		var self = this;
		this.animatelist=[
		    function(next){
		    	$.when(self.lis.animate({"height":"27px"},800)).then(next);
		    },
		    function(next){
		    	self.highlight.fadeIn(200,next);
		    },
		    function(next){
		    	var list = [30,50,30,40,40,50,30];
		    	queue(list,function(width,index,next){
		    		self.lis.eq(index).animate({"width":width+"px"},150,next);  
		    	});
		    	var icon1s =[1,2,3,4,5,6,7];
		    	self.feature1.animate({"background-position-y":"0px","opacity":"1"},500);
		    	//self.feature1.fadeIn(1000);
		    	queue(icon1s,function(current,index,next){
		    		$("#cont_box3 #btm3 #icon"+current).fadeIn(200);
		    		//setTimeOut()
		    		$("#cont_box3 #btm3 .icon_b").eq(index).fadeOut(50).fadeIn(50).fadeOut(50,next);
		    	},next);
		    },
		    function(next){
		    	self.btns.fadeOut(500);
		    	self.highlight.fadeOut(500);
		    	$("#cont_box3 #btm3 #li3").animate({"top":"0px"},250,next);
		    },
		    function(next){
		    	$("#cont_box3 #btm3 #li1").delay(50).animate({"top":"27px"},250);
		    	$("#cont_box3 #btm3 #li2").delay(50).animate({"top":"54px"},250,next);
		    },
		    function(next){
		    	$("#cont_box3 #btm3 #li5").delay(100).animate({"top":"135px"},250);
		    	$("#cont_box3 #btm3 #li6").delay(100).animate({"top":"108px"},250,next);
		    },
		    function(next){
		    	self.feature2.animate({"background-position-y":"-30px","opacity":"1"},500,next);
		    },
		    function(next){
		    	self.startjourney.fadeIn(600);
		    }
		];
		this.startplay = function(){
			queue( this.animatelist, function( current, index, next ) {
				current(next);
			}, function() {
			    //alert('end');
			});
		};
		this.init();
	}
	var queue = function ( list, fn, callback, index, ret ) {
	    index = index || 0;
	    ret = ret || [];
	    var next = function ( value, stop, returnCurrentValue ) {
	     	ret[ ret.length ] = value;
	      	if ( stop ) {
	        	return callback.apply( null, returnCurrentValue ? [value] : ret );
	      	}
	      	queue( list, fn, callback, ++index, ret );
	    };
	    if ( index < list.length ) {
	    	var argus = [ list[ index ], index, ret ];
	    	if ( fn.length ) {
	       		argus = argus.slice( 0, fn.length - 1 );
	      	}
	      	argus.push( next );
	      	fn.apply( null, argus );
	    }else if ( callback ) {
	      	callback.apply( null, ret );
	    }
	};
	//搭建js与flash互通的环境
	function thisMovie(movieName) {
		if (navigator.appName.indexOf("Microsoft") != -1) {
	         return window[movieName];
	     } else {
	        return document[movieName];
	     }
	}
	function callExternal(ele_id) {
		var timer = setInterval(function(){
			if(thisMovie(ele_id).PercentLoaded()==100){
					clearInterval(timer);
					thisMovie(ele_id).playflash();
					setTimeout(function(){
						$("#top2").css("background","none");
					},250);
					//ifPlayed[index] = 1;
			}
		},100);
	}
	function flashPlayOver(){
		//console.log(0);
	}
	function signAnimate(){
		var cicleFun=function(name1,name2,shift,interval){
			$(name1).animate({"bottom":"-="+shift+"px"},interval,function(){
				$(name1).hide();
				$(name2).animate({"bottom":"-="+shift+"px"},interval,function(){
					$(name2).hide();
					$(name1).css("bottom","+="+ shift*2+"px").show().animate({"bottom":"-="+shift+"px"},interval,function(){
						$(name2).css("bottom","+="+shift*2+"px").show().animate({"bottom":"-="+shift+"px"},interval,function(){
							setTimeout(function(){cicleFun(name1,name2,shift,interval)},1500);
						});
					});
				});
			});
		}
		cicleFun("#sign1_1","#sign2_1",30,200);
	}
	function getCookie1(offset) { var endstr = document.cookie.indexOf (";", offset);if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); }
	function getCookie2(name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookie1(j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; }
	function setCookie(name, value, exptime, domain){ var domain = domain ? domain : "ie.sogou.com"; var exp  = new Date(); exp.setTime(exp.getTime() + exptime); document.cookie = name + "=" + value + ";path=/;expires=" + exp.toGMTString() + ";domain=" + domain + ";"; }
	var PingbackApp = function(){
		var pingServerUrl = "http://ping.ie.sogou.com/";
		var n = new Date().getTime();
		var c = escape(n*1000+Math.round(Math.random()*1000));
		this.getUid = function(){
			var uid = "";
			if(getCookie2("SMYUV") != null) {
				uid = getCookie2("SMYUV");
			} else {
				uid = c;
				setCookie("SMYUV", uid, 2592000000, "sogou.com");
			}
			return uid;
		}	
		this.getYYID = function(){
			var yyid = "";
			if(getCookie2("YYID") != null) {
				yyid = getCookie2("YYID");
			} else {
				yyid = "";	
			}
			return yyid;
		}	
		this.refurl = document.referrer == ""? "" : encodeURIComponent(document.referrer);
		//pl(page location)
		this.pl = encodeURIComponent(window.location.href);
		var u = this.getUid();
		this.getPv = function(){
			var pvImg =document.createElement('img');
			pvImg.src = pingServerUrl + "pv.GIF?t="+c+"&u="+ u +"&r="+this.refurl+"&pl="+this.pl;
		}
		this.refresh = function(){
			var pvImg =document.createElement('img');
			pvImg.src = pingServerUrl + "pv.GIF?t="+c+"&u="+ u +"&r="+this.refurl+"&pl="+this.pl+"&type=refresh";
		}
	}
	</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动切换 滑动选项卡切换 加载动画 自动滚动图片轮播 选项卡切换 滑动手风琴 滑动星星打分 html5弹窗动画 切换按钮 html5动画 表单 其他 html5按钮动画 html5图片动画 跳转 全屏滚动 全屏切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到