经验分享程序开发文档资料数据资源其它资源

jquery搜狗浏览器5.0页面滑动滚动特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery搜狗浏览器5.0页面滑动滚动特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery搜狗浏览器5.0页面滑动滚动特效代码

HTML代码(index.html):

<html>
<head>
<meta charset="utf-8">
<title>jquery搜狗浏览器5.0页面特效</title>
<script type="text/javascript" src="js/jquery_1.7.2.js"></script>
<style>
*{
	margin:0px;
}
body{
	text-align: center;
}
#cont{position:relative;}
.cont{
	padding-top: 1px;
}
#cont1{
	margin:0px auto;
	position:relative;
	z-index:3;
	width:100%;
	height:100%;
	text-align: center;
	background:#6096e6;
}
#cont1 #version{
	z-index:100;
	line-height:18px;
	text-indent: 25px;
	text-align: left;
	height:18px;
	display:block;
	width:200px;
	position:absolute;
	top:30px;
	left:50px;
	font-size:14px;
	color:#fff;
	font-family: "微软雅黑";
	background:url(images/features5.0/logo.png) no-repeat left center;
}
#cont2{
	margin:0px auto;
	position:relative;
	z-index:2;
	width:100%;
	height:100%;
	text-align: center;
	background:#f7a257;
}
#cont3{
	margin:0px auto;
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	text-align: center;
	background:#5cca5a;
}
#top1{
	position:absolute;
	left:48px;
	top:26px;
	width:769px;
	height:253px;
	background:url(images/features5.0/cont1_t.png) no-repeat;
}
#btm1{
	position:absolute;
	left:454px;
	top:147px;
	width:409px;
	height:220px;
	background:url(images/features5.0/cont1_b.png) no-repeat;
}
#top1 #top1_hightlight{
	position:absolute;
	left:181px;
	top:2px;
	width:70px;
	height:68px;
	background:url(images/features5.0/cont1_highlight.png) no-repeat;
	display:none;
}
#top1 #unfold{
	position:absolute;
	left: 30px;
	top: 76px;
	width:304px;
	height:375px;
	background:url(images/features5.0/unfold.jpg) no-repeat;
	height:0px;
}
#top1 #unfold_btm{
	position:absolute;
	width:100%;
	height:41px;
	left:0px;
	bottom:0px;
	background:url(images/features5.0/unfold.jpg) left bottom no-repeat;
}
#top1 #unfold #switch1{
	top:126px;
}
#top1 #unfold #switch2{
	top:216px;
}
#top1 #unfold #switch3{
	top:261px;
}

#top1 #unfold .switch{
	position:absolute;
	left:241px;
	width:41px;
	height:12px;
	background:#cccccc;
	border:1px solid #b4b4b4;
}
#top1 #unfold .key{
	position:absolute;
	left:0px;
	top:0px;
	background:#fff;
	width:22px;
	height:12px;
}
#top1 #unfold #num1{
	position:absolute;
	left: 101px;
	top: 52px;
	width:30px;
	font-size:18px;
	font-family: "微软雅黑";
	color:#000;
	text-align: right;
}
#top1 #unfold #num2{
	position:absolute;
	left: 195px;
	top: 53px;
	width:35px;
	font-size:18px;
	font-family: "微软雅黑";
	color:#000;
	text-align: right;
}
#top2{
	position:absolute;
	left: 32px;
	top: 4px;
	width:820px;
	height:350px;
	background:url(images/features5.0/cont2_t.png) no-repeat -10px top;
}
#swf1{
	margin-left:-20px;
}
#btm2{
	position:absolute;
	left:50px;
	top:306px;
	width:808px;
	height:161px;
	background:url(images/features5.0/cont2_b.png) no-repeat;
}
#top3{
	position:absolute;
	left:50px;
	top:0px;
	width: 801px;
	height: 161px;
	background:url(images/features5.0/cont3_t.png) no-repeat;
}

.cont_box.on{-webkit-animation:module_change .4s ease-in;}
 @-webkit-keyframes module_change{
        0%{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-o-transform:scale(0.9);}
        100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);}
}
#btm3{
	position:absolute;
	left:175px;
	top:148px;
	width:676px;
	height:278px;
	background:url(images/features5.0/cont3_b.png) no-repeat;
}
#startjourney{
	position:absolute;
	width:150px;
	height:45px;
	left:372px;
	bottom:0px;
	background:url(images/features5.0/startjourney.png) no-repeat;
}
#btm3 #titles{
	position:absolute;
	left: 228px;
	top:65px;
	width:295px;
}
#btm3 #titles ul{
	overflow: hidden;
	padding: 0px;
}
#btm3 #titles ul li{
	list-style: none;
	height: 27px;
	line-height: 25px;
	color: #18381e;
	font-size: 12px;
	font-family: "微软雅黑";
	/* float: left; */
	text-align: left;
	position: relative;
	padding-left:30px;
	position:absolute;
	left:0px;
	overflow:hidden;
	height:0px;
}
#btm3 #titles ul li .text_b{
	
}
#btm3 #titles ul #li1{
	top:0px;
}
#btm3 #titles ul #li2{
	top:27px;
}
#btm3 #titles ul #li3{
	top:54px;
}
#btm3 #titles ul #li4{
	top:81px;
}
#btm3 #titles ul #li5{
	top:108px;
}
#btm3 #titles ul #li6{
	top:135px;
}
#btm3 #titles ul #li7{
	top:163px;
}
#btm3 .icon_b{
	position:absolute;
	left:0px;
	top:5px;
	width:21px;
	height:16px;
	background: url(images/features5.0/titles.jpg) no-repeat -2px -8px;
}
#btm3 .icon_a{
	position:absolute;
	left:0px;
	top:5px;
	width:21px;
	height:16px;
	display:none;
}
#btm3 #icon1.icon_a{
	background:url(images/features5.0/icons.jpg) no-repeat 3px 0px;
}
#btm3 #icon2.icon_a{
	background:url(images/features5.0/icons.jpg) no-repeat 3px -27px;
}
#btm3 #icon3.icon_a{
	background:url(images/features5.0/icons.jpg) no-repeat 3px -54px;
}
#btm3 #icon4.icon_a{

	background:url(images/features5.0/icons.jpg) no-repeat 3px -82px;
}
#btm3 #icon5.icon_a{
	background:url(images/features5.0/icons.jpg) no-repeat 3px -109px;
}
#btm3 #icon6.icon_a{
	background:url(images/features5.0/icons.jpg) no-repeat 3px -137px;
}
#btm3 #icon7.icon_a{
	background:url(images/features5.0/icons.jpg) no-repeat 3px -164px;
}

#btm3 #btm3_highlight{
	position:absolute;
	left: 466px;
	top: -6px;
	width:62px;
	height:63px;
	background:url(images/features5.0/cont3_highlight.jpg) no-repeat;
	/*display:none;*/
}
#cont_box3 #btm3 #feature1{
	position:absolute;
	left:361px;
	top:86px;
	width:186px;
	height:30px;
	background:url(images/features5.0/functions.jpg) no-repeat 0px 0px;
}
#cont_box3 #btm3 #btns{
	position:absolute;
	left:312px;
	top:13px;
	width:348px;
	height:25px;
	background:url(images/features5.0/cont3_btn.png) no-repeat;
}
#cont_box3 #btm3 .marck{
	position:absolute;
	bottom:0px;
	left:0px;
	width:30px;
	height:30px;
	background:url(images/features5.0/functions.jpg) no-repeat 0px 0px;
}
#cont_box3 #btm3 #feature2{
	position:absolute;
	left:361px;
	top:117px;
	width:186px;
	height:30px;
	background:url(images/features5.0/functions.jpg) no-repeat 0px -30px;
}
/*#btm3 .icon_a{
	position:absolute;
	left:0px;
	top:5px;
	width:21px;
	height:16px;
}*/
.top{
	/*display:none;*/
}
.btm{
	/*display:none;*/
}

.cont_box{
	width:900px;
	height:577px;
	margin:0px auto;
	position:relative;
	/*display:none;*/
}
#fixed{
	position:fixed;
	bottom:;
}
.guide{
	position:absolute;
	right:50px;
	bottom:0px;
	width:70px;
	height:24px;
	/*background:url(images/features5.0/fixed.png) no-repeat;*/
}
#guider{
	z-index: 99;
	position:fixed;
	right:50px;
	bottom:50px;
	width:70px;
	height:24px;
	background:url(images/features5.0/fixed.png) no-repeat;
}
#guider img{
	-webkit-animation: guider 6s linear infinite;
	-moz-animation: guider 6s linear infinite;
	-o-animation: guider 6s linear infinite;
	animation: guider 6s linear infinite;
	opacity: 0;
}
@-webkit-keyframes guider{
	0%{}
	30%{opacity: 0;}
	40%{opacity: 1;}
	50%{opacity: 0;}
	60%{opacity: 1;}
	70%{opacity: 0;}
	100%{}
}
@-moz-keyframes guider{
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}
@-o-keyframes guider{
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}
@keyframes guider{
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}

#btn_down{z-index:99;width:70px;height:80px;position:absolute;bottom:0px;left:50%;margin-left:-35px;cursor:pointer;}
.sign {
	position: absolute;
	width: 32px;
	height: 13px;
	left: 24px;
}
#sign1_1{background: url(images/features5.0/arrow2.png) no-repeat ;bottom: 30px;}
#sign2_1{background: url(images/features5.0/arrow1.png) no-repeat ;bottom: 38px;}
.sl-slide, .sl-slides-wrapper{overflow:auto;}
</style>
<link rel="stylesheet" type="text/css" href="plugin/slitslider/css/style.css" />
</head>
<body>
	<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="#/" target="_blank">程序员设计师联盟淘宝店</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>
								</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="#"></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 = "#";
		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>
</body>
</html>

JS代码(jquery.transit.min.js):

/*! * jQuery Transit - CSS3 transitions and transformations * Copyright(c) 2011 Rico Sta. Cruz <rico@ricostacruz.com> * MIT Licensed. * * http://ricostacruz.com/jquery.transit * http://github.com/rstacruz/jquery.transit */
(function(d){
	function k(a){
	var b=["Moz","Webkit","O","ms"],c=a.charAt(0).toUpperCase()+a.substr(1);
	if(a in i.style)return a;
	for(a=0;
	a<b.length;
	++a){
	var d=b[a]+c;
	if(d in i.style)return d}
}
function j(a){
	"string"===typeof a&&this.parse(a);
	return this}
function p(a,b,c){
	!0===b?a.queue(c):b?a.queue(b,c):c()}
function m(a){
	var b=[];
	d.each(a,function(a){
	a=d.camelCase(a);
	a=d.transit.propertyMap[a]||a;
	a=r(a);
	-1===d.inArray(a,b)&&b.push(a)}
);
	return b}
function q(a,b,c,e){
	a=m(a);
	d.cssEase[c]&&(c=d.cssEase[c]);
	var h=""+n(b)+" "+c;
	0<parseInt(e,10)&&(h+=" "+n(e));
	var f=[];
	d.each(a,function(a,b){
	f.push(b+" "+h)}
);
	return f.join(",")}
function f(a,b){
	b||(d.cssNumber[a]=!0);
	d.transit.propertyMap[a]=e.transform;
	d.cssHooks[a]={
	get:function(b){
	return(d(b).css("transform")||new j).get(a)}
,set:function(b,e){
	var h=d(b).css("transform")||new j;
	h.setFromString(a,e);
	d(b).css({
	transform:h}
)}
}
}
function r(a){
	return a.replace(/([A-Z])/g,function(a){
	return"-"+a.toLowerCase()}
)}
function g(a,b){
	return"string"===typeof a&&!a.match(/^[\-0-9\.]+$/)?a:""+a+b}
function n(a){
	d.fx.speeds[a]&&(a=d.fx.speeds[a]);
	return g(a,"ms")}
d.transit={
	version:"0.1.3",propertyMap:{
	marginLeft:"margin",marginRight:"margin",marginBottom:"margin",marginTop:"margin",paddingLeft:"padding",paddingRight:"padding",paddingBottom:"padding",paddingTop:"padding"}
,enabled:!0,useTransitionEnd:!1}
;
	var i=document.createElement("div"),e={
}
,s=-1<navigator.userAgent.toLowerCase().indexOf("chrome");
	e.transition=k("transition");
	e.transitionDelay=k("transitionDelay");
	e.transform=k("transform");
	e.transformOrigin=k("transformOrigin");
	i.style[e.transform]="";
	i.style[e.transform]="rotateY(90deg)";
	e.transform3d=""!==i.style[e.transform];
	d.extend(d.support,e);
	var o=e.transitionEnd={
	MozTransition:"transitionend",OTransition:"oTransitionEnd",WebkitTransition:"webkitTransitionEnd",msTransition:"MSTransitionEnd"}
[e.transition]||null,i=null;
	d.cssEase={
	_default:"ease","in":"ease-in",out:"ease-out","in-out":"ease-in-out",snap:"cubic-bezier(0,1,.5,1)"}
;
	d.cssHooks.transform={
	get:function(a){
	return d(a).data("transform")}
,set:function(a,b){
	var c=b;
	c instanceof j||(c=new j(c));
	a.style[e.transform]="WebkitTransform"===e.transform&&!s?c.toString(!0):c.toString();
	d(a).data("transform",c)}
}
;
	d.cssHooks.transformOrigin={
	get:function(a){
	return a.style[e.transformOrigin]}
,set:function(a,b){
	a.style[e.transformOrigin]=b}
}
;
	f("scale");
	f("translate");
	f("rotate");
	f("rotateX");
	f("rotateY");
	f("rotate3d");
	f("perspective");
	f("skewX");
	f("skewY");
	f("x",!0);
	f("y",!0);
	j.prototype={
	setFromString:function(a,b){
	var c="string"===typeof b?b.split(","):b.constructor===Array?b:[b];
	c.unshift(a);
	j.prototype.set.apply(this,c)}
,set:function(a){
	var b=Array.prototype.slice.apply(arguments,[1]);
	this.setter[a]?this.setter[a].apply(this,b):this[a]=b.join(",")}
,get:function(a){
	return this.getter[a]?this.getter[a].apply(this):this[a]||0}
,setter:{
	rotate:function(a){
	this.rotate=g(a,"deg")}
,rotateX:function(a){
	this.rotateX=g(a,"deg")}
,rotateY:function(a){
	this.rotateY=g(a,"deg")}
,scale:function(a,b){
	void 0===b&&(b=a);
	this.scale=a+","+b}
,skewX:function(a){
	this.skewX=g(a,"deg")}
,skewY:function(a){
	this.skewY=g(a,"deg")}
,perspective:function(a){
	this.perspective=g(a,"px")}
,x:function(a){
	this.set("translate",a,null)}
,y:function(a){
	this.set("translate",null,a)}
,translate:function(a,b){
	void 0===this._translateX&&(this._translateX=0);
	void 0===this._translateY&&(this._translateY=0);
	null!==a&&(this._translateX=g(a,"px"));
	null!==b&&(this._translateY=g(b,"px"));
	this.translate=this._translateX+","+this._translateY}
}
,getter:{
	x:function(){
	return this._translateX||0}
,y:function(){
	return this._translateY||0}
,scale:function(){
	var a=(this.scale||"1,1").split(",");
	a[0]&&(a[0]=parseFloat(a[0]));
	a[1]&&(a[1]=parseFloat(a[1]));
	return a[0]===a[1]?a[0]:a}
,rotate3d:function(){
	for(var a=(this.rotate3d||"0,0,0,0deg").split(","),b=0;
	3>=b;
	++b)a[b]&&(a[b]=parseFloat(a[b]));
	a[3]&&(a[3]=g(a[3],"deg"));
	return a}
}
,parse:function(a){
	var b=this;
	a.replace(/([a-zA-Z0-9]+)\((.*?)\)/g,function(a,d,e){
	b.setFromString(d,e)}
)}
,toString:function(a){
	var b=[],c;
	for(c in this)if(this.hasOwnProperty(c)&&(e.transform3d||!("rotateX"===c||"rotateY"===c||"perspective"===c||"transformOrigin"===c)))"_"!==c[0]&&(a&&"scale"===c?b.push(c+"3d("+this[c]+",1)"):a&&"translate"===c?b.push(c+"3d("+this[c]+",0)"):b.push(c+"("+this[c]+")"));
	return b.join(" ")}
}
;
	d.fn.transition=d.fn.transit=function(a,b,c,f){
	var h=this,g=0,i=!0;
	"function"===typeof b&&(f=b,b=void 0);
	"function"===typeof c&&(f=c,c=void 0);
	"undefined"!==typeof a.easing&&(c=a.easing,delete a.easing);
	"undefined"!==typeof a.duration&&(b=a.duration,delete a.duration);
	"undefined"!==typeof a.complete&&(f=a.complete,delete a.complete);
	"undefined"!==typeof a.queue&&(i=a.queue,delete a.queue);
	"undefined"!==typeof a.delay&&(g=a.delay,delete a.delay);
	"undefined"===typeof b&&(b=d.fx.speeds._default);
	"undefined"===typeof c&&(c=d.cssEase._default);
	var b=n(b),j=q(a,b,c,g),l=d.transit.enabled&&e.transition?parseInt(b,10)+parseInt(g,10):0;
	if(0===l)return p(h,i,function(b){
	h.css(a);
	f&&f();
	b()}
),h;
	var k={
}
,m=function(b){
	var c=!1,g=function(){
	c&&h.unbind(o,g);
	0<l&&h.each(function(){
	this.style[e.transition]=k[this]||null}
);
	"function"===typeof f&&f.apply(h);
	"function"===typeof b&&b()}
;
	0<l&&o&&d.transit.useTransitionEnd?(c=!0,h.bind(o,g)):window.setTimeout(g,l);
	h.each(function(){
	0<l&&(this.style[e.transition]=j);
	d(this).css(a)}
)}
;
	p(h,i,function(a){
	var b=0;
	"MozTransition"===e.transition&&25>b&&(b=25);
	window.setTimeout(function(){
	m(a)}
,b)}
);
	return this}
;
	d.transit.getTransitionValue=q}
)(jQuery);

CSS代码(style.css):

.sl-slider{position:absolute;top:0;left:0;font-family:'Montserrat',Arial,sans-serif;}
/* Navigation arrows */
.sl-slider nav span{position:fixed;z-index:2000;top:50%;width:80px;height:80px;border:2px solid red;border:2px solid red;text-indent:-90000px;margin-top:-40px;cursor:pointer;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.sl-slider nav span:hover{border-color:rgba(150,150,150,0.9);}
.sl-slider nav span.sl-prev{left:60px;border-right:none;border-top:none;}
.sl-slider nav span.sl-next{right:60px;border-left:none;border-bottom:none;}
/* Slide wrapper and slides */
.sl-slide,.sl-slides-wrapper{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;}
.sl-slide{z-index:1;}
/* The duplicate parts/cuts */
.sl-content-cut{overflow:hidden;position:absolute;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;}
/* Horizontal cut */
.sl-slide-horizontal .sl-content-cut{width:100%;height:50%;left:-200px;}
.sl-slide-horizontal .sl-content-cut:first-child{top:-200px;padding:200px 200px 0px 200px;}
.sl-slide-horizontal .sl-content-cut:nth-child(2){top:50%;padding:0px 200px 200px 200px;}
/* Vertical cut */
.sl-slide-vertical .sl-content-cut{width:50%;height:100%;top:-200px;}
.sl-slide-vertical .sl-content-cut:first-child{left:-200px;padding:200px 0px 200px 200px;}
.sl-slide-vertical .sl-content-cut:nth-child(2){left:50%;padding:200px 200px 200px 0px;}
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper{position:absolute;}
.sl-content{width:100%;height:100%;background:#fff;}
/* Content elements */
.sl-deco{width:260px;height:260px;border:2px dashed #ddd;border:2px dashed rgba(150,150,150,0.4);border-radius:50%;position:absolute;bottom:50%;left:50%;margin-left:-130px;}
[data-icon]:after{content:attr(data-icon);font-family:'AnimalsNormal';color:#000;text-shadow:0 0 1px #000;position:absolute;width:220px;height:220px;line-height:220px;text-align:center;font-size:100px;top:50%;left:50%;margin:-110px 0 0 -110px;box-shadow:inset 0 0 0 10px #f7f7f7;border-radius:50%;}
.sl-slide h2{color:#000;text-shadow:0 0 1px #000;padding:20px;position:absolute;font-size:34px;font-weight:300;letter-spacing:13px;text-transform:uppercase;width:80%;left:10%;text-align:center;line-height:50px;bottom:50%;margin:0 0 -120px 0;}
.sl-slide blockquote{position:absolute;width:30%;text-align:center;left:35%;font-size:13px;line-height:20px;height:70px;color:#8b8b8b;z-index:2;bottom:50%;margin:0 0 -200px 0;padding:0;}
.sl-slide blockquote:before{color:#f0f0f0;color:rgba(244,244,244,0.65);font-family:"Bookman Old Style",Bookman,Garamond,serif;position:absolute;line-height:60px;width:75px;height:75px;font-size:200px;z-index:-1;left:-15px;top:35px;content:'\201C';}
.sl-slide blockquote cite{font-size:10px;font-style:normal;text-transform:uppercase;letter-spacing:4px;}
/* Dark slides */
.sl-slide-dark .sl-content-cut,.sl-slide-dark .sl-content{background:#f7a257;}
.sl-slide-dark [data-icon]:after,.sl-slide-dark.sl-slide h2{color:#fff;}
.sl-slide-dark.sl-slide blockquote:before{color:#222;}
/* Color 1 slides */
.sl-slide-color-1 .sl-content-cut,.sl-slide-color-1 .sl-content{background:#5cca5a;}
.sl-slide-color-1 [data-icon]:after{color:#e6a6bb;text-shadow:0 0 1px #e6a6bb;box-shadow:inset 0 0 0 10px #e6a6bb;}
.sl-slide-color-1.sl-slide h2,.sl-slide-color-1.sl-slide blockquote{color:#fff;}
.sl-slide-color-1.sl-slide blockquote:before{color:#7b0c31;}
/* Color 2 slides */
.sl-slide-color-2 .sl-content-cut,.sl-slide-color-2 .sl-content{background:#ade1f4;}
.sl-slide-color-2 [data-icon]:after{text-shadow:0 0 1px #8bc7dd;color:#8bc7dd;}
.sl-slide-color-2.sl-slide h2,.sl-slide-color-2.sl-slide blockquote{color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.2);}
.sl-slide-color-2.sl-slide blockquote:before{color:#8bc7dd;}
/* Color 3 slides */
.sl-slide-color-3 .sl-content-cut,.sl-slide-color-3 .sl-content{background:#ffeb41;}
.sl-slide-color-3.sl-slide h2,.sl-slide-color-3.sl-slide blockquote{color:#000;text-shadow:1px 1px 1px rgba(0,0,0,0.1);}
.sl-slide-color-3.sl-slide blockquote:before{color:#ecd82c;}
/* Animations for elements */
.sl-trans-elems .sl-deco{-webkit-animation:roll 1s ease-out both;-moz-animation:roll 1s ease-out both;-o-animation:roll 1s ease-out both;-ms-animation:roll 1s ease-out both;animation:roll 1s ease-out both;}
.sl-trans-elems h2{-webkit-animation:moveUp 1s ease-in-out both;-moz-animation:moveUp 1s ease-in-out both;-o-animation:moveUp 1s ease-in-out both;-ms-animation:moveUp 1s ease-in-out both;animation:moveUp 1s ease-in-out both;}
.sl-trans-elems blockquote{-webkit-animation:fadeIn 0.5s linear 0.5s both;-moz-animation:fadeIn 0.5s linear 0.5s both;-o-animation:fadeIn 0.5s linear 0.5s both;-ms-animation:fadeIn 0.5s linear 0.5s both;animation:fadeIn 0.5s linear 0.5s both;}
@-webkit-keyframes roll{0%{-webkit-transform:translateX(500px) rotate(360deg);opacity:0;}
100%{-webkit-transform:translateX(0px) rotate(0deg);opacity:1;}
}
@-moz-keyframes roll{0%{-moz-transform:translateX(500px) rotate(360deg);opacity:0;}
100%{-moz-transform:translateX(0px) rotate(0deg);opacity:1;}
}
@-o-keyframes roll{0%{-o-transform:translateX(500px) rotate(360deg);opacity:0;}
100%{-o-transform:translateX(0px) rotate(0deg);opacity:1;}
}
@-ms-keyframes roll{0%{-ms-transform:translateX(500px) rotate(360deg);opacity:0;}
100%{-ms-transform:translateX(0px) rotate(0deg);opacity:1;}
}
@keyframes roll{0%{transform:translateX(500px) rotate(360deg);opacity:0;}
100%{transform:translateX(0px) rotate(0deg);opacity:1;}
}
@-webkit-keyframes moveUp{0%{-webkit-transform:translateY(40px);}
100%{-webkit-transform:translateY(0px);}
}
@-moz-keyframes moveUp{0%{-moz-transform:translateY(40px);}
100%{-moz-transform:translateY(0px);}
}
@-o-keyframes moveUp{0%{-o-transform:translateY(40px);}
100%{-o-transform:translateY(0px);}
}
@-ms-keyframes moveUp{0%{-ms-transform:translateY(40px);}
100%{-ms-transform:translateY(0px);}
}
@keyframes moveUp{0%{transform:translateY(40px);}
100%{transform:translateY(0px);}
}
@-webkit-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-o-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
.sl-trans-back-elems .sl-deco{-webkit-animation:scaleDown 1s ease-in-out both;-moz-animation:scaleDown 1s ease-in-out both;-o-animation:scaleDown 1s ease-in-out both;-ms-animation:scaleDown 1s ease-in-out both;animation:scaleDown 1s ease-in-out both;}
.sl-trans-back-elems h2{-webkit-animation:fadeOut 1s ease-in-out both;-moz-animation:fadeOut 1s ease-in-out both;-o-animation:fadeOut 1s ease-in-out both;-ms-animation:fadeOut 1s ease-in-out both;animation:fadeOut 1s ease-in-out both;}
.sl-trans-back-elems blockquote{-webkit-animation:fadeOut 1s linear both;-moz-animation:fadeOut 1s linear both;-o-animation:fadeOut 1s linear both;-ms-animation:fadeOut 1s linear both;animation:fadeOut 1s linear both;}
@-webkit-keyframes scaleDown{0%{-webkit-transform:scale(1);}
100%{-webkit-transform:scale(0.5);}
}
@-moz-keyframes scaleDown{0%{-moz-transform:scale(1);}
100%{-moz-transform:scale(0.5);}
}
@-o-keyframes scaleDown{0%{-o-transform:scale(1);}
100%{-o-transform:scale(0.5);}
}
@-ms-keyframes scaleDown{0%{-ms-transform:scale(1);}
100%{-ms-transform:scale(0.5);}
}
@keyframes scaleDown{0%{transform:scale(1);}
100%{transform:scale(0.5);}
}
@-webkit-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-o-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@-ms-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
208.76 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
208.76 KB
立即下载
陈韵育
了解
打赏作者 鼓励作者
Html 滑动滚动特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章