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

jQuery flipLightBox灯箱插件特效代码

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

以下是 jQuery flipLightBox灯箱插件特效代码 的示例演示效果:

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

部分效果截图:

jQuery flipLightBox灯箱插件特效代码

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" />
<title>jQuery flipLightBox灯箱插件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0;">
<link rel="SHORTCUT ICON" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/flb3.css" />
</head>
<body >
<div id="container">
<div id="content-background" class="content">
</div>
<div id="about-content" class="content">
<div id="inner-about-content">
<div id="about-column">
<h1>About flipLightBox <img src="images/website/browsers2.png" width="161" height="26" alt="Browsers" id="browsers"></h1><br />
flipLightBox is a free Responsive Lightbox jQuery Plugin that is extremely easy to implement and doesn't require any additional stylesheets, scripts or libraries. Its main feature is an optional flip effect as each lightbox image opens and closes. Another optional feature is a toggled slide text bar and navigation to accompany the lightbox images.
<a href="download/flipLightBox.zip" class="download">Upgrades</a> are also available.<br /><br />
<h2><a href="download/flipLightBox.zip" class="download" style="color: #cc0000;">Download flipLightBox Here</a></h2><br />
<h3>How To Set Up</h3><br />
<b>1)</b> In your html document, before the closing <b>&#60;/body&#62;</b> tag insert:<br /><span class="script">&#60;script type="text/javascript" src="<span id="condensed">http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js</span>"&#62;&#60;/script&#62;<br />
&#60;script type="text/javascript" src="fliplightbox/fliplightbox.min.js"&#62;&#60;/script&#62;<br />&#60;script type="text/javascript"&#62;$('body').flipLightBox()&#60;/script&#62;</span><br /><br />
<b>2)</b> Create an <b>&#60;a&#62;</b> tag that links to your lightbox image jpg, gif or png. Then add a class attribute named <b>flipLightBox</b>, like so: <br /><span class="script">&#60;a href="lightbox-image.jpg" class="flipLightBox"&#62;Link Text or Image&#60;span&#62;Optional Lightbox Text&#60;/span&#62;&#60;/a&#62;</span><br />Notice there is a <b>&#60;span&#62;</b> tag next to the image. Within this you can add optional text to accompany the lightbox image when opened.<br /><br />
<b>3)</b> Download <a href="download/flipLightBox.zip" class="download">flipLightBox.zip</a>, unzip and place the <b>fliplightbox</b> folder into your website directory. <b>You are now up and running!</b><br /><br />
<h3>Adjusting The Settings</h3><br />
The settings can be adjusted either within <b>fliplightbox.min.js</b> or by modifying the 'plugin call', as the example below:<br /><span class="script">$('body').flipLightBox({ lightbox_flip_speed: 500, lightbox_border_color: '#666666' })</span><br /><br />
Demos and more instructions can also be found in <a href="download/flipLightBox.zip" class="download">flipLightBox.zip</a><br /><br />
</div>
<img id="close-about" src="data:image/gif;base64,R0lGODlhMgAyAIABAP///////yH5BAEAAAEALAAAAAAyADIAAALPjI+py+0Po5y0HoCz3rx7/HziKDbkiWZLyp5Kd7VcvL01ImvJvOu2vPLhVAxgkTgEmVIOIQ0QcjWRT+i0dFUmqUFP1GmAZcE/sndsXfK2N3X6KGa3j5BPOW4JjO54ConfJ/HXMygoJWcXwUR46FZYtffVGIZiOKl3iXaGuDZx+egXyclVIQpJ1iPZSRnIqGrWKveqdTr71gWLOnrLd2erW1X2O4cr7GhqvHUMqszIi2mUDOnc4kudljO3Cp3djdsdfQ3OvDu+nYeerr7Ojl4AADs=" width="25px" height="25px" alt="Close" />
</div>
<div class="contact">
Contact us at <a href="mailto:info@flipgallery.net?subject=flipGallery Product Enquiry" class="how-to-email">info@flipGallery.net</a> for product enquiries. <span class="fliplink">Also check out our other script: <a href="" target="_blank">flipGallery</a></span><br /><br />
</div>
</div>
<div id="download-content" class="content">
<div id="inner-download-content">
<h4>Download Options</h4>
<div class="option-column">
<h5>Non Commercial</h5><br />
<span class="price">Free</span><br /><br />
<a href="download/flipLightBox.zip" id="non-commercial-use-download"><img src="images/website/download.png" width="150" height="45" alt="Download Non Comercial Version" /></a><br /><br />
<span class="licence">Non Commercial Use<br />or Trial Purposes<br /><br /></span>
<span class="features"><b>Features</b><br />
Responsive<br />
Speed, Navigation &amp; Text Control<br /><br />
</span>
</div>
<div class="option-column">
<h6>Multi Commercial Use</h6><br />
<span class="price">&#36;12</span><br /><br />
<form action="#" method="post"><input type="hidden" name="cmd" value="_s-xclick"><input type="hidden" name="hosted_button_id" value="CLF7QWRHRA2LS"><input type="image" src="images/website/purchase.png" width="150" height="45" id="purchase-commercial-version" alt="Purchase Commercial Version"></form><br />
<span class="licence">For Commercial Use<br />Multi Domain Licence<br /><br /></span>
<span class="features"><b>Features</b><br />
Retina/HD Display Media Kit<br />
Responsive<br />
Speed, Navigation &amp; Text Control<br />
</span>
</div>
<div class="option-column">
<h6>Custom Solutions</h6><br />
<span class="price">&#36;49+</span><br /><br />
<a href="mailto:info@flipgallery.net?subject=Custom Solutions Enquiry" id="custom-solutions-enquiry"><img src="images/website/enquiry.png" width="150" height="45" alt="Make An Enquiry" /></a><br /><br />
<span class="licence">For Commercial Use<br />Unlimited Domain Licence<br /><br /></span>
<span class="features"><b>Services<span class="star">*</span></b><br />
Bespoke Customisations<br /><br />
</span>
<span id="star">*All Custom Solutions include features from Multi Commercial Use version</span>
</div>
<img class="close-download" id="close-download" src="data:image/gif;base64,R0lGODlhMgAyAIABAP///////yH5BAEAAAEALAAAAAAyADIAAALPjI+py+0Po5y0HoCz3rx7/HziKDbkiWZLyp5Kd7VcvL01ImvJvOu2vPLhVAxgkTgEmVIOIQ0QcjWRT+i0dFUmqUFP1GmAZcE/sndsXfK2N3X6KGa3j5BPOW4JjO54ConfJ/HXMygoJWcXwUR46FZYtffVGIZiOKl3iXaGuDZx+egXyclVIQpJ1iPZSRnIqGrWKveqdTr71gWLOnrLd2erW1X2O4cr7GhqvHUMqszIi2mUDOnc4kudljO3Cp3djdsdfQ3OvDu+nYeerr7Ojl4AADs=" width="25px" height="25px" alt="Close Download" /><br />
<div class="contact">
Contact us at <a href="mailto:info@flipgallery.net?subject=flipGallery Product Enquiry" class="how-to-email">info@flipGallery.net</a> for product enquiries. <span class="fliplink">Also check out our other script: <a href="" target="_blank">flipGallery</a></span><br /><br />
</div>
</div>
</div>
<div id="demo">
<a href="images/eamonnmccabe2/enlarged/jude-law.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/jude-law.jpg" alt="Jude Law" width="230" height="230" /><span><b>Jude Law</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/al-pacino.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/al-pacino.jpg" alt="Al Pacino" width="230" height="230" /><span><b>Al Pacino</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/antony-hopkins.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/antony-hopkins.jpg" alt="Antony Hopkins" width="230" height="230" /><span><b>Antony Hopkins</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/ben-kingsley.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/ben-kingsley.jpg" alt="Ben Kingsley" width="230" height="230" /><span><b>Ben Kingsley</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/bono.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/bono.jpg" alt="Bono" width="230" height="230" /><span><b>Bono</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/zadie-smith.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/zadie-smith.jpg" alt="Zadie Smith" width="230" height="230" /><span><b>Zadie Smith</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/john-hurt.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/john-hurt.jpg" alt="John Hurt" width="230" height="230" /><span><b>John Hurt</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/lou-reed.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/lou-reed.jpg" alt="Lou Reed" width="230" height="230" /><span><b>Lou Reed</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/kristin-scott-thomas.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/kristin-scott-thomas.jpg" alt="Kristin Scott Thomas" width="230" height="230" /><span><b>Kristin Scott Thomas</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/lemmy.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/lemmy.jpg" alt="Lemmy" width="230" height="230" /><span><b>Lemmy</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/morgan-freeman.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/morgan-freeman.jpg" alt="Morgan Freeman" width="230" height="230" /><span><b>Morgan Freeman</b> &copy; Eamonn McCabe.</span></a>
<a href="images/eamonnmccabe2/enlarged/mel-brooks.jpg" class="flipLightBox"><img src="images/eamonnmccabe2/thumbs/mel-brooks.jpg" alt="Mel Brooks" width="230" height="230" /><span><b>Mel Brooks</b> &copy; Eamonn McCabe.</span></a>
</div>
</div>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="fliplightbox/fliplightbox.min.js"></script>
<script type="text/javascript">$('body').flipLightBox()</script>
<script type="text/javascript" src="scripts/flb_showcase.js"></script>
</body>
</html>

JS代码(flb_showcase.js):

(function( $ ){
	$.fn.flb_showcase = function(){
	$(".content").css('visibility','visible').hide();
	$("#header a").click(function(e){
	e.preventDefault();
	if ($(window).height() < 820){
	$("#about-column").css('height',$(window).height()-250).css('overflow-y','scroll');
}
else{
	$("#about-column").css('height','auto').css('overflow-y','auto');
}
$("#header a").html('');
	$("#about-content,#content-background").fadeIn(1000);
	$("#close-about").show();
}
);
	$("#close-about").click(function(e){
	e.preventDefault();
	$("#close-about").hide();
	$("#header a").html('About/Download');
	$("#about-content,#content-background").fadeOut(1000);
}
);
	$(".close-download").click(function(e){
	e.preventDefault();
	$("#close-download").hide();
	$("#download-content").fadeOut(500);
	$("#about-content").fadeIn(1000);
}
);
	$(".download").click(function(e){
	e.preventDefault();
	$("#about-content").fadeOut(500);
	$("#download-content").fadeIn(1000);
	$("#close-download").show();
}
);
	$("#non-commercial-use-download").click(function(){
	$.ajax({
	async:false,type:'POST',url:'scripts/flb-non-commercial-use-download.php',success:function(){
	$("#non-commercial-use-download").html('<br />Download Initiated<br />');
}
}
);
}
);
	function process_order(){
	$('#inner-download-content').html('<div class="option-column" style="width:870px;
	height:300px;
	font-size:40px;
	color:#3e6c14;
	"><br /><br /><br />Processing Order...</div>');
	setTimeout(function(){
	$('.option-column').html('');
}
,1000);
	setTimeout(function(){
	process_order();
}
,1500);
}
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
	$("#purchase-commercial-version").click(function(){
	$.ajax({
	async:false,type:'POST',url:'scripts/flb-purchase-commercial-version.php',success:function(){
}
}
);
	if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
}
else{
	process_order();
}
}
)$("#custom-solutions-enquiry").click(function(){
	$.ajax({
	async:false,type:'POST',url:'scripts/flb-custom-solutions-enquiry.php',success:function(){
}
}
);
}
)if (window.location.hash == '#download'){
	$("#demo").hide();
	$("body").css('background-image','url("images/website/background.gif")');
	$("#header a").html('View Demo');
	$("#download-content").show();
	$("#footer,#host").html('');
	$("#header a,.close-download").unbind("click");
	$("#header a,.close-download").click(function(e){
	e.preventDefault();
	location = "http://www.flipgallery.net/fliplightbox.html";
}
)}
else if (window.location.hash == '#set-up'){
	$("#demo").hide();
	$("body").css('background-image','url("images/website/background.gif")');
	$("#header a").html('View Demo');
	$("#about-content").show();
	$("#footer,#host").html('');
	$("#header a,#close-about").unbind("click");
	$("#header a,#close-about").click(function(e){
	e.preventDefault();
	location = "http://www.flipgallery.net/fliplightbox.html";
}
)}
else{
	$("#header a").html('About/Download');
}
}
}
)( jQuery );

JS代码(fliplightbox.min.js):

/*! * flipLightBox - Responsive Lightbox jQuery Plugin * version:1.0.0 * @requires jQuery v1.5 or later * * License at http://flipgallery.net/fliplightbox.html#download * * Example at http://flipgallery.net/fliplightbox.html * * Copyright 2013 flipGallery.net * */
(function( $ ){
	$.fn.flipLightBox = function(flb_options){
	var flb_settings = $.extend({
	// FLIP MODE SETTINGS // ------------------ flip_mode:1,// 1 = Flip On & 0 = Flip Off (fade). // VISUAL SETTINGS // --------------- lightbox_background_opacity:0.8,lightbox_border_width:10,// (pixels) lightbox_border_color:'#fff',lightbox_z_index:'1000',// SPEED SETTINGS // -------------- lightbox_flip_speed:800,// Speed of complete lightbox flip or fade (milliseconds). // TEXT SETTINGS // ------------- // *Picture/Lightbox Text Settings* lightbox_text_status:1,// 1 = On & 0 = Off. lightbox_text_style:'font-size:14px;
	line-height:1.4;
	color:#000;
	text-align:center;
	',lightbox_text_background_style:'background-color:#fff;
	opacity:0.8;
	',lightbox_text_area_position:'bottom',// bottom or top // *Picture/Lightbox Navigation Text Settings* lightbox_navigation_status:1,// 1 = On & 0 = Off. next_image_text:'Next &rsaquo;
	&rsaquo;
	',back_image_text:'&lsaquo;
	&lsaquo;
	Back',next_and_back_image_text_style:'font-weight:bold;
	color:#000;
	',image_number_page:'Image',image_number_of:'of',image_number_text_style:'color:#000;
	',// *Image Streaming Text Settings* loading_text_color:'#fff',loading_text_opacity:'0.3'}
,flb_options );
	var flb_loading_image="data:image/gif;
	base64,R0lGODlhCgARAIABAP///////yH5BAEAAAEALAAAAAAKABEAAAIWTIBpl80No5y00gdXXBjxD4biSJZGAQA7";
	var flb_close_image="data:image/gif;
	base64,R0lGODlhMgAyAIABAP///////yH5BAEAAAEALAAAAAAyADIAAALPjI+py+0Po5y0HoCz3rx7/HziKDbkiWZLyp5Kd7VcvL01ImvJvOu2vPLhVAxgkTgEmVIOIQ0QcjWRT+i0dFUmqUFP1GmAZcE/sndsXfK2N3X6KGa3j5BPOW4JjO54ConfJ/HXMygoJWcXwUR46FZYtffVGIZiOKl3iXaGuDZx+egXyclVIQpJ1iPZSRnIqGrWKveqdTr71gWLOnrLd2erW1X2O4cr7GhqvHUMqszIi2mUDOnc4kudljO3Cp3djdsdfQ3OvDu+nYeerr7Ojl4AADs=";
	var flb_blank_image="data:image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=";
	var flb_image_innit_width;
	var flb_box_sizing='box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	';
	var flb_distance_from_top;
	var flb_new_height;
	var flb_new_width;
	var flb_placement;
	var flb_i;
	var flb_total_lightbox_width;
	var flb_loading;
	var flb_in_img;
	var flb_image_name;
	var flb_class;
	var flb_textcontent;
	var flb_lightbox_data;
	var flb_total_images;
	var fgi_lb_name='flipLightBox';
	var fgi_lb_ind_name;
	var flb_classnum=1;
	var flb_itemnum;
	var flb_clickclass;
	var flb_classamount=new Array();
	function flb_find(){
	if(flb_classnum==1){
	fgi_lb_ind_name=fgi_lb_name}
else{
	fgi_lb_ind_name=fgi_lb_name;
	fgi_lb_ind_name+=flb_classnum}
if($('.'+fgi_lb_ind_name)[0]){
	$('.'+fgi_lb_ind_name+' span').hide();
	flb_itemnum=0;
	$('.'+fgi_lb_ind_name).each(function(){
	flb_itemnum=flb_itemnum+1;
	$(this).attr('class',fgi_lb_ind_name+'-'+flb_itemnum);
	if(flb_clickclass==null){
	flb_clickclass='.'+fgi_lb_ind_name+'-'+flb_itemnum}
else{
	flb_clickclass+=',.'+fgi_lb_ind_name+'-'+flb_itemnum}
}
);
	flb_classamount[fgi_lb_ind_name]=flb_itemnum;
	flb_classnum++;
	flb_find()}
}
flb_find();
	$(this).append('<div id="flb-lightbox" style="position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:'+flb_settings.lightbox_z_index+';
	'+flb_box_sizing+'"><div id="flb-lightbox-background" style="width:100%;
	height:100%;
	background-color:#000;
	opacity:'+flb_settings.lightbox_background_opacity+';
	'+flb_box_sizing+'"></div><div id="flb-lightbox-content" style="position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:none;
	text-align:center;
	'+flb_box_sizing+'"></div><div id="flb-load" style="position:fixed;
	top:40%;
	left:0px;
	width:100%;
	text-align:center;
	font-size:14px;
	color:'+flb_settings.loading_text_color+';
	opacity:'+flb_settings.loading_text_opacity+';
	'+flb_box_sizing+'"></div><div id="flb-lightbox-text" style="position:fixed;
	'+flb_settings.lightbox_text_area_position+':0px;
	width:90%;
	padding-left:5%;
	padding-right:6%;
	margin-right:auto;
	margin-left:auto;
	'+flb_settings.lightbox_text_background_style+' '+flb_settings.lightbox_text_style+' '+flb_box_sizing+' padding-top:15px;
	padding-bottom:15px;
	"></div><div id="flb-load2" style="position:fixed;
	top:40%;
	left:0px;
	width:100%;
	text-align:center;
	font-size:14px;
	color:'+flb_settings.loading_text_color+';
	opacity:'+flb_settings.loading_text_opacity+';
	"></div>');
	$("#flb-lightbox,#flb-lightbox-content,#flb-lightbox-text").hide();
	function flb_get_image_width(a){
	var b=new Image();
	b.src=a;
	return b.width}
function flb_get_image_height(a){
	var b=new Image();
	b.src=a;
	return b.height}
function flb_iphone_check(){
	return((navigator.platform.indexOf("iPhone")!=-1)||(navigator.platform.indexOf("iPod")!=-1))}
function flb_load_animation(){
	$("#flb-load").html('<div id="flb-loading-img"></div>').show();
	setTimeout(function(){
	$("#flb-loading-img").html('<br />Loading Image')}
,500);
	setTimeout(function(){
	$("#flb-loading-img").prepend('<img width="5" src="'+flb_loading_image+'" /> ')}
,1000);
	setTimeout(function(){
	$("#flb-loading-img").prepend('<img width="5" src="'+flb_loading_image+'" /> ')}
,1500);
	setTimeout(function(){
	$("#flb-loading-img").prepend('<img width="5" src="'+flb_loading_image+'" /> ')}
,2000);
	setTimeout(function(){
	$("#flb-loading-img").fadeOut(500)}
,2500);
	flb_loading=setTimeout(function(){
	flb_load_animation()}
,3000)}
$(flb_clickclass).click(function(e){
	e.preventDefault();
	flb_image_name=$(this).attr('href');
	flb_class=$(this).attr('class');
	flb_textcontent=$('.'+flb_class+' span').html();
	flb_lightbox_data=flb_class.split('-');
	flb_total_images=flb_classamount[flb_lightbox_data[0]];
	$("#flb-lightbox-text").html('');
	if(flb_textcontent!=null&&flb_textcontent!=''&&flb_settings.lightbox_text_status==1){
	if(flb_settings.lightbox_navigation_status==1&&flb_total_images>1){
	$("#flb-lightbox-text").append('<br /><br />')}
$("#flb-lightbox-text").append(flb_textcontent)}
$("#flb-lightbox").fadeIn(flb_settings.lightbox_flip_speed/2);
	flb_load_animation();
	flb_in_img=document.createElement('img');
	$("<img />").attr('src',flb_image_name).load(function(){
	flb_in_img.onload=function(){
	$("#flb-load").html('');
	clearTimeout(flb_loading);
	$("#flb-lightbox-content").html('<img src="'+flb_image_name+'" id="flb-lightbox-image" style="border:solid '+flb_settings.lightbox_border_width+'px '+flb_settings.lightbox_border_color+';
	'+flb_box_sizing+'"/>');
	if(navigator.userAgent.match('CriOS')){
	flb_new_width=flb_image_width=flb_in_img.width;
	flb_new_height=flb_image_height=flb_in_img.height}
else{
	flb_new_width=flb_image_width=flb_get_image_width(flb_image_name);
	flb_new_height=flb_image_height=flb_get_image_height(flb_image_name)}
if((flb_settings.lightbox_navigation_status!=1&&flb_settings.lightbox_text_status!=1)||(flb_settings.lightbox_navigation_status!=1&&(flb_textcontent==null||flb_textcontent==''))||(flb_total_images<=1&&(flb_textcontent==null||flb_textcontent==''))||(flb_total_images<=1&&flb_settings.lightbox_text_status!=1)){
	$("#flb-lightbox-text").css('visibility','hidden');
	flb_h=50}
else{
	$("#flb-lightbox-text").css('visibility','visible');
	flb_h=70}
$("#flb-lightbox-content").hide();
	setTimeout(function(){
	$(window).resize();
	$("#flb-lightbox-image").attr('src',flb_image_name).css({
	width:flb_image_innit_width,height:flb_new_height,opacity:0}
);
	setTimeout(function(){
	if($("#flb-lightbox-text").is(':hidden')){
	if(navigator.userAgent.match(/iPad/i)||flb_iphone_check()){
	$("#flb-lightbox-text").show()}
else{
	$("#flb-lightbox-text").slideToggle()}
}
}
,flb_settings.lightbox_flip_speed);
	window.setTimeout(function(){
	$("#flb-lightbox-content").show();
	$("#flb-lightbox-image").attr('src',flb_image_name).animate({
	width:flb_new_width,height:flb_new_height,opacity:1}
,{
	duration:flb_settings.lightbox_flip_speed/2}
)}
,flb_settings.lightbox_flip_speed/2);
	flb_distance_from_top=flb_new_height+(flb_settings.lightbox_border_width*2)+25;
	flb_distance_from_top=($(window).height()-flb_distance_from_top)/2-(($('#flb-lightbox-text').height()/2)+20)+flb_placement;
	if(flb_distance_from_top<0){
	flb_distance_from_top=10}
$("#flb-lightbox-content").prepend('<img id="flb-close" src="'+flb_blank_image+'" width="25px" height="25px" alt="Close" style="margin-top:'+flb_distance_from_top+'px;
	margin-left:'+flb_total_lightbox_width+'px;
	'+flb_box_sizing+'"/><br />');
	$("#flb-close").click(function(){
	$(document).unbind("keyup",flb_escape);
	$("#flb-close,#flb-next-pic,#flb-back-pic").unbind("click");
	$("#flb-close").attr('src',flb_blank_image);
	$("#flb-lightbox-image").attr('src',flb_image_name).animate({
	width:flb_image_innit_width,opacity:0}
,{
	duration:flb_settings.lightbox_flip_speed/2}
);
	setTimeout(function(){
	$("#flb-lightbox").fadeOut(500);
	if($("#flb-lightbox-text").is(':visible')){
	if(navigator.userAgent.match(/iPad/i)||flb_iphone_check()){
	$("#flb-lightbox-text").fadeOut()}
else{
	$("#flb-lightbox-text").slideToggle()}
}
}
,flb_settings.lightbox_flip_speed/2)}
);
	window.setTimeout(function(){
	$("#flb-close").attr('src',flb_close_image);
	clearTimeout(flb_loading)}
,flb_settings.lightbox_flip_speed);
	if(flb_settings.lightbox_navigation_status==1&&flb_total_images>1){
	if(flb_lightbox_data[1]<flb_total_images){
	$("#flb-lightbox-text").prepend('<a href="next" id="flb-next-pic" style="'+flb_settings.next_and_back_image_text_style+''+flb_box_sizing+'">'+flb_settings.next_image_text+'</a>');
	$("#flb-next-pic").click(function(e){
	$(document).unbind("keyup",flb_escape);
	$("#flb-close,#flb-next-pic,#flb-back-pic").unbind("click");
	if($("#flb-lightbox-text").is(':visible')){
	if(navigator.userAgent.match(/iPad/i)||flb_iphone_check()){
	$("#flb-lightbox-text").fadeOut()}
else{
	$("#flb-lightbox-text").slideToggle()}
}
e.preventDefault();
	setTimeout(function(){
	$('.'+flb_lightbox_data[0]+'-'+(Math.floor(flb_lightbox_data[1])+1)).trigger('click')}
,flb_settings.lightbox_flip_speed/2);
	$("#flb-close").attr('src',flb_blank_image);
	$("#flb-lightbox-image").attr('src',flb_image_name).animate({
	width:flb_image_innit_width,opacity:0}
,{
	duration:flb_settings.lightbox_flip_speed/2}
)}
)}
$("#flb-lightbox-text").prepend('<span style="'+flb_settings.image_number_text_style+''+flb_box_sizing+'"> '+flb_settings.image_number_page+' '+flb_lightbox_data[1]+' '+flb_settings.image_number_of+' '+flb_total_images+' </span>');
	if(flb_lightbox_data[1]>1){
	$("#flb-lightbox-text").prepend('<a href="next" id="flb-back-pic" style="'+flb_settings.next_and_back_image_text_style+''+flb_box_sizing+'">'+flb_settings.back_image_text+'</a>');
	$("#flb-back-pic").click(function(e){
	$(document).unbind("keyup",flb_escape);
	$("#flb-close,#flb-next-pic,#flb-back-pic").unbind("click");
	if($("#flb-lightbox-text").is(':visible')){
	if(navigator.userAgent.match(/iPad/i)||flb_iphone_check()){
	$("#flb-lightbox-text").fadeOut()}
else{
	$("#flb-lightbox-text").slideToggle()}
}
e.preventDefault();
	setTimeout(function(){
	$('.'+flb_lightbox_data[0]+'-'+(Math.floor(flb_lightbox_data[1])-1)).trigger('click')}
,flb_settings.lightbox_flip_speed/2);
	$("#flb-close").attr('src',flb_blank_image);
	$("#flb-lightbox-image").attr('src',flb_image_name).animate({
	width:flb_image_innit_width,opacity:0}
,{
	duration:flb_settings.lightbox_flip_speed/2}
)}
)}
}
function flb_escape(e){
	if(e.keyCode==27){
	$('#flb-close').trigger('click')}
}
$(document).keyup(flb_escape)}
,100)}
;
	flb_in_img.src=flb_image_name}
).error(function(){
	$("#flb-load").html('');
	clearTimeout(flb_loading);
	setTimeout(function(){
	clearTimeout(flb_loading)}
,3000);
	$("#flb-lightbox").fadeOut(500);
	$("#flb-lightbox-content,#flb-lightbox-text").html('');
	$("#flb-lightbox-text").hide()}
)}
);
	$(window).resize(function(){
	flb_i=1;
	if($(window).height()<(flb_image_height+$('#flb-lightbox-text').height()+flb_h)+(flb_settings.lightbox_border_width*2)){
	flb_new_height=$(window).height()-(flb_settings.lightbox_border_width*2)-$('#flb-lightbox-text').height()-flb_h;
	flb_new_width=flb_image_width/flb_image_height*flb_new_height;
	flb_i=0}
if($(window).width()<(flb_image_width+60)+(flb_settings.lightbox_border_width*2)&&($(window).width()-flb_image_width)<($(window).height()-flb_image_height-($('#flb-lightbox-text').height()+flb_h))){
	flb_new_width=$(window).width()-(flb_settings.lightbox_border_width*2)-60;
	flb_new_height=flb_image_height/flb_image_width*flb_new_width;
	flb_i=0}
if(flb_i==1){
	flb_new_width=flb_image_width;
	flb_new_height=flb_image_height}
if(flb_settings.lightbox_text_area_position=='top'&&flb_h==70){
	flb_placement=(($('#flb-lightbox-text').height()/2)+15)*2}
else{
	flb_placement=0}
$("#flb-lightbox-image").css({
	width:flb_new_width,height:flb_new_height}
);
	flb_distance_from_top=flb_new_height+(flb_settings.lightbox_border_width*2)+25;
	flb_distance_from_top=($(window).height()-flb_distance_from_top)/2-(($('#flb-lightbox-text').height()/2)+20)+flb_placement;
	if(flb_distance_from_top<0){
	flb_distance_from_top=10}
$("#flb-close").css({
	'margin-top':flb_distance_from_top,'margin-left':($(window).width()-85)+(flb_settings.lightbox_border_width*2)+(($('#flb-lightbox-text').height()/2)+20)-flb_placement}
);
	flb_total_lightbox_width=(flb_new_width+25)+(flb_settings.lightbox_border_width*2);
	$("#flb-close").attr('style','margin-top:'+flb_distance_from_top+'px;
	margin-left:'+flb_total_lightbox_width+'px;
	'+flb_box_sizing+'');
	if(flb_settings.flip_mode==0){
	flb_image_innit_width=flb_new_width}
else{
	flb_image_innit_width=0}
}
)}
}
)( jQuery );

CSS代码(flb3.css):

body{background-image:url('../images/website/background2.gif');}
#header{color:#fff;background-color:#000;background-image:none;}
#header span{color:#999;}
#header a{float:right;padding-top:8px;font-size:15px;color:#33cc00;font-weight:bold;}
#demo{width:960px;margin:auto;position:relative;}
.flipLightBox,.flipLightBox-1,.flipLightBox-2,.flipLightBox-3,.flipLightBox-4,.flipLightBox-5,.flipLightBox-6,.flipLightBox-7,.flipLightBox-8,.flipLightBox-9,.flipLightBox-10,.flipLightBox-11,.flipLightBox-12{float:left;width:230px;height:230px;margin:5px;}
.flipLightBox span{background:#fff;color:#fff;}
.option-column{width:230px;padding:40px;padding-top:20px;height:315px;}
@media (max-width:985px){.option-column{padding:26px;padding-top:20px;}
}
@media (max-width:960px){#container,#demo,#footer{width:720px;}
}
@media (max-width:720px){#container,#demo,#footer{width:480px;}
}
@media (max-width:480px){#container,#demo,#footer{width:240px;}
}
@media (max-width:340px){#header{width:100%;text-align:center;}
#header a{width:100%;text-align:center;}
#demo{padding-top:20px;}
#contact,#copyright{width:100%;text-align:center;}
#contact{padding-bottom:20px;}
#footer{margin-top:15px;}
}
@media (max-width:250px){#footer,.flipLightBox,.flipLightBox-1,.flipLightBox-2,.flipLightBox-3,.flipLightBox-4,.flipLightBox-5,.flipLightBox-6,.flipLightBox-7,.flipLightBox-8,.flipLightBox-9,.flipLightBox-10,.flipLightBox-11,.flipLightBox-12{width:100%;height:auto;margin-left:0px;margin-right:0px;}
#container,#demo,#footer{width:100%;}
}
@media (max-width:240px){.flipLightBox img,.flipLightBox-1 img,.flipLightBox-2 img,.flipLightBox-3 img,.flipLightBox-4 img,.flipLightBox-5 img,.flipLightBox-6 img,.flipLightBox-7 img,.flipLightBox-8 img,.flipLightBox-9 img,.flipLightBox-10 img,.flipLightBox-11 img,.flipLightBox-12 img{width:100%;height:auto;}
}

CSS代码(global.css):

body{background-image:url('../images/website/background.gif');font-family:Arial,Helvetica,sans-serif;font-size:14px;}
h1,h3{font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:23px;color:#3e6c14;font-weight:bold;}
h2{font-size:16px;color:#cc0000;}
h2 a{color:#cc0000;}
h4{font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;color:#fff;font-size:25px;padding:13px;padding-top:2px;padding-left:5px;text-align:center;}
h5,h6{font-size:22px;font-weight:bold;margin:0px;}
#header{font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;position:fixed;top:0px;width:96%;background-color:#fff;padding-top:15px;padding-left:2%;padding-right:3%;padding-bottom:15px;font-size:27px;color:#000;background-image:-ms-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:-moz-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:-o-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FFFFFF),color-stop(1,#999999));background-image:-webkit-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:linear-gradient(to bottom,#FFFFFF 0%,#999999 100%);z-index:3;}
#header span{padding-top:10px;padding-left:20px;font-size:14px;color:#333;font-weight:bold;}
#header a{float:right;padding-top:8px;font-size:15px;color:#cc0000;font-weight:bold;}
#container{width:960px;padding-top:65px;margin:auto;position:relative;}
.content{visibility:hidden;}
#content-background{position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:#000;opacity:0.8;z-index:2;}
#about-content,#download-content{width:100%;position:fixed;top:0px;left:0px;z-index:2;}
#browsers{float:right;}
#condensed{letter-spacing:-0.1em;}
#close-about{float:right;}
#close-download{float:right;}
.fliplink{padding-left:10px;}
.fliplink a{color:#cc0000;font-size:14px;}
.star{color:#3e6c14;}
#inner-download-content{width:985px;padding-top:70px;padding-left:25px;margin:auto;position:relative;}
#inner-about-content{width:985px;padding-top:107px;padding-left:25px;margin:auto;position:relative;}
#about-column{float:left;width:895px;padding:30px;margin-top:3px;background-color:#fff;background-image:-ms-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:-moz-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:-o-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FFFFFF),color-stop(1,#999999));background-image:-webkit-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:linear-gradient(to bottom,#FFFFFF 0%,#999999 100%);-moz-border-radius:3px;-webkit-border-radius:3px;font-size:15px;line-height:1.3;}
#about-column a,.how-to-email{color:#3e6c14;font-weight:bold;}
.script{float:left;width:98%;padding:1%;margin-top:10px;margin-bottom:10px;background-color:#000;font-family:"Lucida Console",Monaco,monospace;color:#fff;font-size:14px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.option-column{float:left;color:#000;width:210px;height:395px;margin-left:5px;margin-right:5px;padding:10px;padding-top:20px;background-color:#fff;background-image:-ms-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:-moz-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:-o-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FFFFFF),color-stop(1,#999999));background-image:-webkit-linear-gradient(top,#FFFFFF 0%,#999999 100%);background-image:linear-gradient(to bottom,#FFFFFF 0%,#999999 100%);-moz-border-radius:3px;-webkit-border-radius:3px;text-align:center;}
.option-column a{color:#3e6c14;font-weight:bold;}
.price{font-size:44px;color:#3e6c14;}
.licence{float:left;width:100%;line-height:1.4;color:#666;font-weight:bold;}
.features{float:left;width:100%;line-height:1.4;text-align:left;color:#333;}
.features b{color:#000;font-size:16px;}
#non-commercial-use-download{color:#cc0000;text-decoration:none;font-weight:bold;font-size:19px;}
#star{color:#3e6c14;line-height:1.4;}
#footer{width:960px;float:left;margin-top:30px;margin-bottom:20px;font-size:12px;}
#contact{float:left;}
#contact a{color:#666;text-decoration:underline;}
.contact{float:left;width:100%;margin-top:20px;text-align:center;color:#999;font-size:12px;}
#copyright{float:right;color:#666;}
#host{float:left;width:100%;font-size:11px;color:#666;font-weight:normal;text-align:center;}
#host a{color:#336600;font-weight:bold;}
@media (max-width:985px){#inner-download-content,#inner-about-content{width:905px;}
#about-column{width:815px;}
.option-column{width:190px;height:365px;}
.features{font-size:12px;}
}
@media (max-width:660px){#header span{position:absolute;left:-9999px;}
}

CSS代码(reset.css):

@charset "UTF-8";/* CSS Document */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
725.08 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
725.08 KB
立即下载
危琬娅怡
了解
打赏作者 鼓励作者
Html Js 翻页特效
最新结算
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
打赏文章