jquery html5搜狗高速瀏覽器5.0新頁面動畫特效



123 489 164



特效描述:jquery html5搜狗高速瀏覽器 頁面動畫特效,搜狗高速瀏覽器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">搜狗高速瀏覽器 5.0</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>豆瓣FM - Beta</li>
									<li id="li7"><div class="icon_b"></div><div class="icon_a" id="icon7"></div>豆瓣 - 提供圖書、電影、音樂唱片的推薦、評論...</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://123.sogou.com"></a>
						<div class="guide"></div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<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>
	<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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 加載動畫 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 導航切換 菜單切換 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子