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

jQuery缓缓下滑三级导航特效代码

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

以下是 jQuery缓缓下滑三级导航特效代码 的示例演示效果:

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

部分效果截图:

jQuery缓缓下滑三级导航特效代码

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=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> 
<script type='text/javascript' src='js/jquery.js'></script> 
<script type='text/javascript' src='js/custom.js'></script> 
<script type='text/javascript' src='js/jquery.prettyPhoto.js'></script> 
<title>jQuery缓缓下滑三级导航</title> 
</head>
<body>
<br>
<div class="wrap_all" style="height:65px; width:420px; margin:0px auto;"> 
<div id="top" >
<div class="navwrap">	
   <ul id="nav"> 
    <li class="current_page_item" ><a href="http://www.baidu.com/">站点首页</a></li>
    <li class="page_item"><a href="http://www.baidu.com/" >展示Cases</a> 
    <ul class='children'> 
	<li class="page_item"><a href="http://www.baidu.com/" >平面设计</a></li> 
	<li class="page_item"><a href="http://www.baidu.com/" >网页设计</a> 
	<ul class='children'> 
		<li class="page_item"><a href="http://www.baidu.com/" >网页html</a></li> 
		<li class="page_item"><a href="http://www.baidu.com/" >Psd设计稿</a></li> 
	</ul> 
</li> 
	<li class="page_item"><a href="http://www.baidu.com/" >3Dmax</a></li> 
	<li class="page_item"><a href="http://www.baidu.com/" >工业设计</a></li> 
</ul> 
</li> 
 <li class="current_page_item" ><a href="http://www.baidu.com/">BLog</a></li> 
<li class="current_page_item" ><a href="http://www.baidu.com/">联系我们</a></li> 
                </ul>                
 </div><!--end navwrap-->                                
</div><!--end top-->
</div>
<div style=" clear:both"></div>
</body>
</html>

JS代码(custom.js):

jQuery.noConflict();
	jQuery(document).ready(function(){
	var autoslide = jQuery("meta[name=twicet1]").attr('content');
	var autoslide_dur = jQuery("meta[name=twicet2]").attr('content');
	whichlightbox();
	// activates the lightbox used at the portfolio pagek_menu();
	//improves the css dropdown menu with animation and ie6 compatibilityk_fader(".preview_images a",".featured_item");
	// this is the mainpages fading script-> when a image is clicked a fadeout followed by a fade in occursk_pointer();
	// this script manages the pointer below the preview picsif (autoslide == "1"){
	if (autoslide_dur != ""){
	$duration = autoslide_dur}
else{
	$duration = 7000;
}
k_autoslide(".preview_images a",$duration);
	// this script starts the automatic slideshow,number represents the time between the transition in milliseconds}
k_newsticker(".ticker span",7000);
	// starts the newsticker,number defines the time between transitions in millisecondsk_next_slide(".preview_images a",".featured_item",".show-next");
	// shows the next slidek_form();
	// initializes ajax sending of the contact formtwicet_improvements();
	// adds some improvements to the site}
);
	function whichlightbox(){
	var whichtheme = jQuery("meta[name=twicet4]").attr('content');
	if(whichtheme == 1 || whichtheme == 3 ){
	jQuery("a[rel^='prettyPhoto'],a[rel^='lightbox[portfolio]']").prettyPhoto({
	theme:'light_rounded' /* light_rounded / dark_rounded / light_square / dark_square */
}
);
}
else{
	jQuery("a[rel^='prettyPhoto'],a[rel^='lightbox[portfolio]']").prettyPhoto({
	theme:'dark_rounded' /* light_rounded / dark_rounded / light_square / dark_square */
}
);
}
}
function k_menu(){
	jQuery("#nav a").removeAttr('title');
	jQuery("#nav ul").css({
	display:"none"}
);
	// Opera FixjQuery(" #nav li").hover(function(){
	jQuery(this).find('ul:first').css({
	visibility:"visible",display:"none"}
).slideDown(400,"easeInOutQuart");
}
,function(){
	jQuery(this).find('ul:first').css({
	visibility:"hidden"}
);
}
);
}
function twicet_improvements(){
	jQuery(".featured_item").prepend("<div class='corner_left ie6fix'></div><div class='corner_right ie6fix'></div>");
	if((jQuery.browser.msie && parseInt(jQuery.browser.version) < 7)){
	jQuery("#nav,.navwrap,#main,#featured,#featured_bottom,.content_top,#content,#footer").addClass("ie6fix");
}
}
jQuery.extend( jQuery.easing,{
	def:'easeOutQuad',swing:function (x,t,b,c,d){
	//alert(jQuery.easing.default);
	return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
	return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
	return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
	return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t + b;
	return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
	return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
	return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
	return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
	return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
	return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
	return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
	return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
	return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
	return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
	if (t==0) return b;
	if (t==d) return b+c;
	if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
	return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
	return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
	return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
	if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
	return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d)==1) return b+c;
	if (!p) p=d*.3;
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
	var s=1.70158;
	var p=0;
	var a=c;
	if (t==0) return b;
	if ((t/=d/2)==2) return b+c;
	if (!p) p=d*(.3*1.5);
	if (a < Math.abs(c)){
	a=c;
	var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
	if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 0.6;
	return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 0.6;
	return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
	return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
	if ((t/=d) < (1/2.75)){
	return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
	return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
	return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
	return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
	if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
	return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);

JS代码(jquery.prettyPhoto.js):

var $pp_pic_holder;
	var $ppt;
	(function(A){
	A.fn.prettyPhoto=function(W){
	var E=true;
	var K=false;
	var O=[];
	var D=0;
	var R;
	var S;
	var V;
	var Y;
	var F="image";
	var Z;
	var M=G();
	A(window).scroll(function(){
	M=G();
	C()}
);
	A(window).resize(function(){
	C();
	U()}
);
	A(document).keypress(function(c){
	switch(c.keyCode){
	case 37:if(D==1){
	return}
N("previous");
	break;
	case 39:if(D==setCount){
	return}
N("next");
	break;
	case 27:L();
	break}
}
);
	W=jQuery.extend({
	animationSpeed:"normal",padding:40,opacity:0.8,showTitle:true,allowresize:true,counter_separator_label:"/",theme:"light_rounded",callback:function(){
}
}
,W);
	if(A.browser.msie&&A.browser.version==6){
	W.theme="light_square"}
A(this).each(function(){
	var e=false;
	var d=false;
	var f=0;
	var c=0;
	O[O.length]=this;
	A(this).bind("click",function(){
	J(this);
	return false}
)}
);
	function J(c){
	Z=A(c);
	theRel=Z.attr("rel");
	galleryRegExp=/\[(?:.*)\]/;
	theGallery=galleryRegExp.exec(theRel);
	isSet=false;
	setCount=0;
	b();
	for(i=0;
	i<O.length;
	i++){
	if(A(O[i]).attr("rel").indexOf(theGallery)!=-1){
	setCount++;
	if(setCount>1){
	isSet=true}
if(A(O[i]).attr("href")==Z.attr("href")){
	D=setCount;
	arrayPosition=i}
}
}
X();
	$pp_pic_holder.find("p.currentTextHolder").text(D+W.counter_separator_label+setCount);
	C();
	A("#pp_full_res").hide();
	$pp_pic_holder.find(".pp_loaderIcon").show()}
showimage=function(f,c,j,h,g,d,e){
	A(".pp_loaderIcon").hide();
	if(A.browser.opera){
	windowHeight=window.innerHeight;
	windowWidth=window.innerWidth}
else{
	windowHeight=A(window).height();
	windowWidth=A(window).width()}
$pp_pic_holder.find(".pp_content").animate({
	height:g}
,W.animationSpeed);
	projectedTop=M.scrollTop+((windowHeight/2)-(h/2));
	if(projectedTop<0){
	projectedTop=0+$pp_pic_holder.find(".ppt").height()}
$pp_pic_holder.animate({
	top:projectedTop,left:((windowWidth/2)-(j/2)),width:j}
,W.animationSpeed,function(){
	$pp_pic_holder.width(j);
	$pp_pic_holder.find(".pp_hoverContainer,#fullResImage").height(c).width(f);
	$pp_pic_holder.find("#pp_full_res").fadeIn(W.animationSpeed,function(){
	A(this).find("object,embed").css("visibility","visible")}
);
	I();
	if(e){
	A("a.pp_expand,a.pp_contract").fadeIn(W.animationSpeed)}
}
)}
;
	function I(){
	if(isSet&&F=="image"){
	$pp_pic_holder.find(".pp_hoverContainer").fadeIn(W.animationSpeed)}
else{
	$pp_pic_holder.find(".pp_hoverContainer").hide()}
$pp_pic_holder.find(".pp_details").fadeIn(W.animationSpeed);
	if(W.showTitle&&hasTitle){
	$ppt.css({
	top:$pp_pic_holder.offset().top-22,left:$pp_pic_holder.offset().left+(W.padding/2),display:"none"}
);
	$ppt.fadeIn(W.animationSpeed)}
}
function Q(){
	$pp_pic_holder.find(".pp_hoverContainer,.pp_details").fadeOut(W.animationSpeed);
	$pp_pic_holder.find("#pp_full_res object,#pp_full_res embed").css("visibility","hidden");
	$pp_pic_holder.find("#pp_full_res").fadeOut(W.animationSpeed,function(){
	A(".pp_loaderIcon").show();
	a()}
);
	$ppt.fadeOut(W.animationSpeed)}
function N(c){
	if(c=="previous"){
	arrayPosition--;
	D--}
else{
	arrayPosition++;
	D++}
if(!E){
	E=true}
Q();
	A("a.pp_expand,a.pp_contract").fadeOut(W.animationSpeed,function(){
	A(this).removeClass("pp_contract").addClass("pp_expand")}
)}
function L(){
	$pp_pic_holder.find("object,embed").css("visibility","hidden");
	A("div.pp_pic_holder,div.ppt").fadeOut(W.animationSpeed);
	A("div.pp_overlay").fadeOut(W.animationSpeed,function(){
	A("div.pp_overlay,div.pp_pic_holder,div.ppt").remove();
	if(A.browser.msie&&A.browser.version==6){
	A("select").css("visibility","visible")}
W.callback()}
);
	E=true}
function H(){
	if(D==setCount){
	$pp_pic_holder.find("a.pp_next").css("visibility","hidden");
	$pp_pic_holder.find("a.pp_arrow_next").addClass("disabled").unbind("click")}
else{
	$pp_pic_holder.find("a.pp_next").css("visibility","visible");
	$pp_pic_holder.find("a.pp_arrow_next.disabled").removeClass("disabled").bind("click",function(){
	N("next");
	return false}
)}
if(D==1){
	$pp_pic_holder.find("a.pp_previous").css("visibility","hidden");
	$pp_pic_holder.find("a.pp_arrow_previous").addClass("disabled").unbind("click")}
else{
	$pp_pic_holder.find("a.pp_previous").css("visibility","visible");
	$pp_pic_holder.find("a.pp_arrow_previous.disabled").removeClass("disabled").bind("click",function(){
	N("previous");
	return false}
)}
$pp_pic_holder.find("p.currentTextHolder").text(D+W.counter_separator_label+setCount);
	Z=(isSet)?A(O[arrayPosition]):Z;
	b();
	if(Z.attr("title")){
	$pp_pic_holder.find(".pp_description").show().html(unescape(Z.attr("title")))}
else{
	$pp_pic_holder.find(".pp_description").hide().text("")}
if(Z.find("img").attr("alt")&&W.showTitle){
	hasTitle=true;
	$ppt.html(unescape(Z.find("img").attr("alt")))}
else{
	hasTitle=false}
}
function P(d,c){
	hasBeenResized=false;
	T(d,c);
	imageWidth=d;
	imageHeight=c;
	windowHeight=A(window).height();
	windowWidth=A(window).width();
	if(((Y>windowWidth)||(V>windowHeight))&&E&&W.allowresize&&!K){
	hasBeenResized=true;
	notFitting=true;
	while(notFitting){
	if((Y>windowWidth)){
	imageWidth=(windowWidth-200);
	imageHeight=(c/d)*imageWidth}
else{
	if((V>windowHeight)){
	imageHeight=(windowHeight-200);
	imageWidth=(d/c)*imageHeight}
else{
	notFitting=false}
}
V=imageHeight;
	Y=imageWidth}
T(imageWidth,imageHeight)}
return{
	width:imageWidth,height:imageHeight,containerHeight:V,containerWidth:Y,contentHeight:R,contentWidth:S,resized:hasBeenResized}
}
function T(d,c){
	$pp_pic_holder.find(".pp_details").width(d).find(".pp_description").width(d-parseFloat($pp_pic_holder.find("a.pp_close").css("width")));
	R=c+$pp_pic_holder.find(".pp_details").height()+parseFloat($pp_pic_holder.find(".pp_details").css("marginTop"))+parseFloat($pp_pic_holder.find(".pp_details").css("marginBottom"));
	S=d;
	V=R+$pp_pic_holder.find(".ppt").height()+$pp_pic_holder.find(".pp_top").height()+$pp_pic_holder.find(".pp_bottom").height();
	Y=d+W.padding}
function b(){
	if(Z.attr("href").match(/youtube\.com\/watch/i)){
	F="youtube"}
else{
	if(Z.attr("href").indexOf(".mov")!=-1){
	F="quicktime"}
else{
	if(Z.attr("href").indexOf(".swf")!=-1){
	F="flash"}
else{
	if(Z.attr("href").indexOf("iframe")!=-1){
	F="iframe"}
else{
	F="image"}
}
}
}
}
function C(){
	if($pp_pic_holder){
	if($pp_pic_holder.size()==0){
	return}
}
else{
	return}
if(A.browser.opera){
	windowHeight=window.innerHeight;
	windowWidth=window.innerWidth}
else{
	windowHeight=A(window).height();
	windowWidth=A(window).width()}
if(E){
	$pHeight=$pp_pic_holder.height();
	$pWidth=$pp_pic_holder.width();
	$tHeight=$ppt.height();
	projectedTop=(windowHeight/2)+M.scrollTop-($pHeight/2);
	if(projectedTop<0){
	projectedTop=0+$tHeight}
$pp_pic_holder.css({
	top:projectedTop,left:(windowWidth/2)+M.scrollLeft-($pWidth/2)}
);
	$ppt.css({
	top:projectedTop-$tHeight,left:(windowWidth/2)+M.scrollLeft-($pWidth/2)+(W.padding/2)}
)}
}
function a(){
	H();
	if(F=="image"){
	imgPreloader=new Image();
	nextImage=new Image();
	if(isSet&&D>setCount){
	nextImage.src=A(O[arrayPosition+1]).attr("href")}
prevImage=new Image();
	if(isSet&&O[arrayPosition-1]){
	prevImage.src=A(O[arrayPosition-1]).attr("href")}
pp_typeMarkup='<img id="fullResImage" src="" />';
	$pp_pic_holder.find("#pp_full_res")[0].innerHTML=pp_typeMarkup;
	$pp_pic_holder.find(".pp_content").css("overflow","hidden");
	$pp_pic_holder.find("#fullResImage").attr("src",Z.attr("href"));
	imgPreloader.onload=function(){
	var c=P(imgPreloader.width,imgPreloader.height);
	imgPreloader.width=c.width;
	imgPreloader.height=c.height;
	showimage(imgPreloader.width,imgPreloader.height,c.containerWidth,c.containerHeight,c.contentHeight,c.contentWidth,c.resized)}
;
	imgPreloader.src=Z.attr("href")}
else{
	movie_width=(parseFloat(B("width",Z.attr("href"))))?B("width",Z.attr("href")):"425";
	movie_height=(parseFloat(B("height",Z.attr("href"))))?B("height",Z.attr("href")):"344";
	if(movie_width.indexOf("%")!=-1||movie_height.indexOf("%")!=-1){
	movie_height=(A(window).height()*parseFloat(movie_height)/100)-100;
	movie_width=(A(window).width()*parseFloat(movie_width)/100)-100;
	parsentBased=true}
else{
	movie_height=parseFloat(movie_height);
	movie_width=parseFloat(movie_width)}
if(F=="quicktime"){
	movie_height+=13}
correctSizes=P(movie_width,movie_height);
	if(F=="youtube"){
	pp_typeMarkup='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+correctSizes.width+'" height="'+correctSizes.height+'"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://www.youtube.com/v/'+B("v",Z.attr("href"))+'" /><embed src="http://www.youtube.com/v/'+B("v",Z.attr("href"))+'" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="'+correctSizes.width+'" height="'+correctSizes.height+'"></embed></object>'}
else{
	if(F=="quicktime"){
	pp_typeMarkup='<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="'+correctSizes.height+'" width="'+correctSizes.width+'"><param name="src" value="'+Z.attr("href")+'"><param name="autoplay" value="true"><param name="type" value="video/quicktime"><embed src="'+Z.attr("href")+'" height="'+correctSizes.height+'" width="'+correctSizes.width+'" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>'}
else{
	if(F=="flash"){
	flash_vars=Z.attr("href");
	flash_vars=flash_vars.substring(Z.attr("href").indexOf("flashvars")+10,Z.attr("href").length);
	filename=Z.attr("href");
	filename=filename.substring(0,filename.indexOf("?"));
	pp_typeMarkup='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+correctSizes.width+'" height="'+correctSizes.height+'"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="'+filename+"?"+flash_vars+'" /><embed src="'+filename+"?"+flash_vars+'" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="'+correctSizes.width+'" height="'+correctSizes.height+'"></embed></object>'}
else{
	if(F=="iframe"){
	movie_url=Z.attr("href");
	movie_url=movie_url.substr(0,movie_url.indexOf("iframe")-1);
	pp_typeMarkup='<iframe src ="'+movie_url+'" width="'+(correctSizes.width-10)+'" height="'+(correctSizes.height-10)+'" frameborder="no"></iframe>'}
}
}
}
$pp_pic_holder.find("#pp_full_res")[0].innerHTML=pp_typeMarkup;
	showimage(correctSizes.width,correctSizes.height,correctSizes.containerWidth,correctSizes.containerHeight,correctSizes.contentHeight,correctSizes.contentWidth,correctSizes.resized)}
}
function G(){
	if(self.pageYOffset){
	scrollTop=self.pageYOffset;
	scrollLeft=self.pageXOffset}
else{
	if(document.documentElement&&document.documentElement.scrollTop){
	scrollTop=document.documentElement.scrollTop;
	scrollLeft=document.documentElement.scrollLeft}
else{
	if(document.body){
	scrollTop=document.body.scrollTop;
	scrollLeft=document.body.scrollLeft}
}
}
return{
	scrollTop:scrollTop,scrollLeft:scrollLeft}
}
function U(){
	A("div.pp_overlay").css({
	height:A(document).height(),width:A(window).width()}
)}
function X(){
	toInject="";
	toInject+="<div class='pp_overlay'></div>";
	if(F=="image"){
	pp_typeMarkup='<img id="fullResImage" src="" />'}
else{
	pp_typeMarkup=""}
toInject+='<div class="pp_pic_holder"><div class="pp_top"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div><div class="pp_content"><a href="#" class="pp_expand" title="Expand the image">Expand</a><div class="pp_loaderIcon"></div><div class="pp_hoverContainer"><a class="pp_next" href="#">next</a><a class="pp_previous" href="#">previous</a></div><div id="pp_full_res">'+pp_typeMarkup+'</div><div class="pp_details clearfix"><a class="pp_close" href="#">Close</a><p class="pp_description"></p><div class="pp_nav"><a href="#" class="pp_arrow_previous">Previous</a><p class="currentTextHolder">0'+W.counter_separator_label+'0</p><a href="#" class="pp_arrow_next">Next</a></div></div></div><div class="pp_bottom"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div></div>';
	toInject+='<div class="ppt"></div>';
	A("body").append(toInject);
	$pp_pic_holder=A(".pp_pic_holder");
	$ppt=A(".ppt");
	A("div.pp_overlay").css("height",A(document).height()).bind("click",function(){
	L()}
);
	$pp_pic_holder.css({
	opacity:0}
).addClass(W.theme);
	A("a.pp_close").bind("click",function(){
	L();
	return false}
);
	A("a.pp_expand").bind("click",function(){
	$this=A(this);
	if($this.hasClass("pp_expand")){
	$this.removeClass("pp_expand").addClass("pp_contract");
	E=false}
else{
	$this.removeClass("pp_contract").addClass("pp_expand");
	E=true}
Q();
	$pp_pic_holder.find(".pp_hoverContainer,#pp_full_res,.pp_details").fadeOut(W.animationSpeed,function(){
	a()}
);
	return false}
);
	$pp_pic_holder.find(".pp_previous,.pp_arrow_previous").bind("click",function(){
	N("previous");
	return false}
);
	$pp_pic_holder.find(".pp_next,.pp_arrow_next").bind("click",function(){
	N("next");
	return false}
);
	$pp_pic_holder.find(".pp_hoverContainer").css({
	"margin-left":W.padding/2}
);
	if(!isSet){
	$pp_pic_holder.find(".pp_hoverContainer,.pp_nav").hide()}
if(A.browser.msie&&A.browser.version==6){
	A("body").addClass("ie6");
	A("select").css("visibility","hidden")}
A("div.pp_overlay").css("opacity",0).fadeTo(W.animationSpeed,W.opacity,function(){
	$pp_pic_holder.css("opacity",0).fadeIn(W.animationSpeed,function(){
	$pp_pic_holder.attr("style","left:"+$pp_pic_holder.css("left")+";
	top:"+$pp_pic_holder.css("top")+";
	");
	a()}
)}
)}
}
;
	function B(E,D){
	E=E.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
	var C="[\\?&]"+E+"=([^&#]*)";
	var G=new RegExp(C);
	var F=G.exec(D);
	if(F==null){
	return""}
else{
	return F[1]}
}
}
)(jQuery);

CSS代码(prettyPhoto.css):

div.light_rounded .pp_top .pp_left{background:url(../images/sprite.png) -88px -53px no-repeat}
div.light_rounded .pp_top .pp_middle{background:#fff}
div.light_rounded .pp_top .pp_right{background:url(../images/sprite.png) -110px -53px no-repeat}
div.light_rounded .pp_content{background-color:#fff}
div.light_rounded .pp_content a.pp_next:hover{background:url(../images/btnNext.png) center right no-repeat;cursor:pointer}
div.light_rounded .pp_content a.pp_previous:hover{background:url(../images/btnPrevious.png) center left no-repeat;cursor:pointer}
div.light_rounded .pp_content a.pp_expand{background:url(../images/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.light_rounded .pp_content a.pp_expand:hover{background:url(../images/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.light_rounded .pp_content a.pp_contract{background:url(../images/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.light_rounded .pp_content a.pp_contract:hover{background:url(../images/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.light_rounded .pp_content a.pp_close{width:75px;height:22px;background:url(../images/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.light_rounded .pp_content .pp_details .pp_nav a.pp_arrow_previous{background:url(../images/sprite.png) 0 -71px no-repeat}
div.light_rounded .pp_content .pp_details .pp_nav a.pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
div.light_rounded .pp_content .pp_details .pp_nav a.pp_arrow_next{background:url(../images/sprite.png) -22px -71px no-repeat}
div.light_rounded .pp_content .pp_details .pp_nav a.pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
div.light_rounded .pp_bottom .pp_left{background:url(../images/sprite.png) -88px -80px no-repeat}
div.light_rounded .pp_bottom .pp_middle{background:#fff}
div.light_rounded .pp_bottom .pp_right{background:url(../images/sprite.png) -110px -80px no-repeat}
div.light_rounded .pp_loaderIcon{background:url(../images/loader.gif) center center no-repeat}
div.dark_rounded .pp_top .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat}
div.dark_rounded .pp_top .pp_middle{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat}
div.dark_rounded .pp_top .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat}
div.dark_rounded .pp_content{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat}
div.dark_rounded .pp_content a.pp_next:hover{background:url(../images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat;cursor:pointer}
div.dark_rounded .pp_content a.pp_previous:hover{background:url(../images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat;cursor:pointer}
div.dark_rounded .pp_content a.pp_expand{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.dark_rounded .pp_content a.pp_expand:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.dark_rounded .pp_content a.pp_contract{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.dark_rounded .pp_content a.pp_contract:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.dark_rounded .pp_content a.pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.dark_rounded .currentTextHolder{color:#c4c4c4}
div.dark_rounded p.pp_description{color:#fff}
div.dark_rounded .pp_content .pp_details .pp_nav a.pp_arrow_previous{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat}
div.dark_rounded .pp_content .pp_details .pp_nav a.pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
div.dark_rounded .pp_content .pp_details .pp_nav a.pp_arrow_next{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat}
div.dark_rounded .pp_content .pp_details .pp_nav a.pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
div.dark_rounded .pp_bottom .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat}
div.dark_rounded .pp_bottom .pp_middle{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat}
div.dark_rounded .pp_bottom .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat}
div.dark_rounded .pp_loaderIcon{background:url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat}
div.dark_square .pp_top .pp_left,div.dark_square .pp_top .pp_middle,div.dark_square .pp_top .pp_right,div.dark_square .pp_bottom .pp_left,div.dark_square .pp_bottom .pp_middle,div.dark_square .pp_bottom .pp_right,div.dark_square .pp_content{background:url(../images/prettyPhoto/dark_square/contentPattern.png) top left repeat}
div.dark_square .currentTextHolder{color:#c4c4c4}
div.dark_square p.pp_description{color:#fff}
div.dark_square .pp_loaderIcon{background:url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat}
div.dark_square .pp_content a.pp_expand{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.dark_square .pp_content a.pp_expand:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.dark_square .pp_content a.pp_contract{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.dark_square .pp_content a.pp_contract:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.dark_square .pp_content a.pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.dark_square .pp_content .pp_details .pp_nav a.pp_arrow_previous{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat}
div.dark_square .pp_content .pp_details .pp_nav a.pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
div.dark_square .pp_content .pp_details .pp_nav a.pp_arrow_next{background:url(../images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat}
div.dark_square .pp_content .pp_details .pp_nav a.pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
div.dark_square .pp_content a.pp_next:hover{background:url(../images/prettyPhoto/dark_square/btnNext.png) center right no-repeat;cursor:pointer}
div.dark_square .pp_content a.pp_previous:hover{background:url(../images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat;cursor:pointer}
div.light_square .pp_top .pp_left,div.light_square .pp_top .pp_middle,div.light_square .pp_top .pp_right,div.light_square .pp_bottom .pp_left,div.light_square .pp_bottom .pp_middle,div.light_square .pp_bottom .pp_right,div.light_square .pp_content{background:#fff}
div.light_square .pp_content a.pp_expand{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.light_square .pp_content a.pp_expand:hover{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.light_square .pp_content a.pp_contract{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.light_square .pp_content a.pp_contract:hover{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.light_square .pp_content a.pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.light_square .pp_content .pp_details .pp_nav a.pp_arrow_previous{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat}
div.light_square .pp_content .pp_details .pp_nav a.pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
div.light_square .pp_content .pp_details .pp_nav a.pp_arrow_next{background:url(../images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat}
div.light_square .pp_content .pp_details .pp_nav a.pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
div.light_square .pp_content a.pp_next:hover{background:url(../images/prettyPhoto/light_square/btnNext.png) center right no-repeat;cursor:pointer}
div.light_square .pp_content a.pp_previous:hover{background:url(../images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat;cursor:pointer}
div.pp_pic_holder a:focus{outline:none}
div.pp_overlay{background:#000;position:absolute;top:0;left:0;z-index:9500;width:100%}
div.pp_pic_holder{position:absolute;z-index:10000;width:100px}
div.pp_pic_holder .pp_top{position:relative;height:20px}
* html div.pp_pic_holder .pp_top{padding:0 20px}
div.pp_pic_holder .pp_top .pp_left{position:absolute;left:0;width:20px;height:20px}
div.pp_pic_holder .pp_top .pp_middle{position:absolute;left:20px;right:20px;height:20px}
* html div.pp_pic_holder .pp_top .pp_middle{position:static;left:0}
div.pp_pic_holder .pp_top .pp_right{position:absolute;top:0;left:auto;right:0;width:20px;height:20px}
div.pp_pic_holder .pp_content{position:relative;text-align:left;width:100%;height:40px}
div.pp_pic_holder .pp_content .pp_details{display:none;margin:10px 15px 2px 20px}
div.pp_pic_holder .pp_content .pp_details p.pp_description{display:none;float:left;margin:0}
div.pp_pic_holder .pp_content .pp_details .pp_nav{float:left;margin:3px 0 0 0}
div.pp_pic_holder .pp_content .pp_details .pp_nav p{float:left;margin:2px 4px}
div.pp_pic_holder .pp_content .pp_details .pp_nav a.pp_arrow_previous,div.pp_pic_holder .pp_content .pp_details .pp_nav a.pp_arrow_next{float:left;display:block;width:14px;height:15px;overflow:hidden;text-indent:-10000px;margin-top:3px}
div.pp_pic_holder .pp_content div.pp_hoverContainer{position:absolute;z-index:2000;top:0;left:0;width:100%}
div.pp_pic_holder .pp_content a.pp_next{display:block;float:right;text-indent:-10000px;width:49%;height:100%;background:url(../images/btnNext.png) 10000px 10000px no-repeat}
div.pp_pic_holder .pp_content a.pp_previous{display:block;float:left;text-indent:-10000px;width:49%;height:100%;background:url(../images/btnNext.png) 10000px 10000px no-repeat}
div.pp_pic_holder .pp_content a.pp_expand,div.pp_pic_holder .pp_content a.pp_contract{position:absolute;z-index:20000;top:10px;right:30px;cursor:pointer;display:none;text-indent:-10000px;width:20px;height:20px}
div.pp_pic_holder .pp_content a.pp_close{float:right;display:block;text-indent:-10000px}
div.pp_pic_holder .pp_bottom{position:relative;height:20px}
* html div.pp_pic_holder .pp_bottom{padding:0 20px}
div.pp_pic_holder .pp_bottom .pp_left{position:absolute;left:0;width:20px;height:20px}
div.pp_pic_holder .pp_bottom .pp_middle{position:absolute;left:20px;right:20px;height:20px}
* html div.pp_pic_holder .pp_bottom .pp_middle{position:static;left:0}
div.pp_pic_holder .pp_bottom .pp_right{position:absolute;top:0;left:auto;right:0;width:20px;height:20px}
div.pp_pic_holder .pp_loaderIcon{display:none;position:absolute;top:50%;left:50%;margin:-12px 0 0 -12px;width:24px;height:24px}
div.pp_pic_holder #pp_full_res{display:block;margin:0 auto;width:100%;text-align:center}
div.pp_pic_holder #pp_full_res object,div.pp_pic_holder #pp_full_res embed{visibility:hidden}
div.ppt{display:none;position:absolute;top:0;left:0;z-index:9999;color:#fff;font-size:17px}
/* ------------------------------------------------------------------------Miscellaneous------------------------------------------------------------------------- */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */

CSS代码(style.css):

@charset "utf-8";*,html{margin:0;padding:0;}
/*Structured layout mainpage*/
body{font-size:11.5px;font-family:'Lucida Grande','Lucida Sans Unicode',Tahoma,Arial,san-serif;line-height:21px;}
.wrap_all{/*only needed if using big background images like in theme 5*/
width:100%;position:relative;display:table;}
#top{position:relative;margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;}
/*navigation*/
.navwrap{height:50px;line-height:50px;padding-right:18px;position:absolute;font-size:12px;z-index:6;}
#top #nav{float:left;height:50px;line-height:50px;padding-left:13px;}
#nav,#nav ul{margin:0;padding:0;list-style-type:none;list-style-position:outside;position:relative;line-height:50px;z-index:5;}
#top #nav a{height:33px;display:block;padding:0 21px;text-decoration:none;text-align:center;line-height:28px;outline:none;z-index:35;position:relative;float:left;}
#top #nav ul a{line-height:33px;}
#top #nav li{float:left;position:relative;z-index:20;margin-top:11px;}
#top #nav li li{border-left:none;margin-top:0;}
#top #nav ul{position:absolute;display:none;width:172px;top:33px;left:-1px;}
#top #nav li ul a{width:130px;height:auto;float:left;text-align:left;padding:0 21px;}
#top #nav ul ul{top:auto;border-top:none;}
#top #nav li ul ul{left:172px;top:0px;}
#top #nav li:hover ul ul,#top #nav li:hover ul ul ul,#top #nav li:hover ul ul ul ul{display:none;}
#top #nav li:hover ul,#top #nav li li:hover ul,#top #nav li li li:hover ul,#top #nav li li li li:hover ul{display:block;}
.navwrap{background:transparent url(../images/menu.png) no-repeat scroll right bottom;}
#top #nav{background:transparent url(../images/menu.png) left top no-repeat;}
/*naviagation*/
#top #nav a{color:#888;}
#top #nav ul{border:1px solid #DFDFDF;border-top:none;}
#top #nav li ul a{border-bottom:1px solid #fff;border-top:1px solid #DFDFDF;}
#top #nav ul a,#top #nav ul li{background-color:#f5f5f5;background-image:none;}
#top #nav ul a:hover,#top #nav ul a:focus{background-color:#fff;color:#555;}
#top #nav a:hover,#top #nav a:focus{color:#555;}
#top #nav .current_page_item a{color:#555;}
#top #nav .current_page_parent .current_page_item a,#top #nav .current_page_item ul a{border-right:1px solid #f5f5f5;border-left:none;background-image:none;color:#444;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
33.38 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
33.38 KB
立即下载
金秋爱
了解
打赏作者 鼓励作者
Html Js 菜单导航特效3
最新结算
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
打赏文章