jQuery鼠标响应式手风琴特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标响应式手风琴特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>jQuery鼠标响应式手风琴特效</title>
		<meta charset="gb2312">
		<link rel="stylesheet" href="css/slider.css">
		<script src="js/jquery.js"></script>
		<script src="js/kwiks.js"></script>
		<script>
			$(document).ready(function(){})
			var Main = Main || {};
			jQuery(window).load(function() {
				window.responsiveFlag = jQuery('#responsiveFlag').css('display');
				Main.gallery = new Gallery();
				jQuery(window).resize(function() {
					Main.gallery.update();
				});
			});
			function Gallery(){
				var self = this,
					container = jQuery('.flexslider'),
					clone = container.clone( false );
					this.init = function (){
						if( responsiveFlag == 'block' ){
						var slides = container.find('.slides');
						slides.kwicks({
							max : 500,
							spacing : 0
						}).find('li > a').click(function (){
							return false;
						});
						}
					}
					this.update = function () {
						var currentState = jQuery('#responsiveFlag').css('display');
						if(responsiveFlag != currentState) {
							responsiveFlag = currentState;
							container.replaceWith(clone);
							container = clone;
							clone = container.clone( false );
							this.init();
						}
					}
				this.init();
			}
		</script>

	</head>
	<body>
<div class="main">
	<div class="grid_8">
		<div class="flexslider">
			<ul class="slides">
				<li>
					<img src="images/page1_img1.jpg" alt="">
					<div class="flex-caption">
						<p>Hope</p>
					</div>
				</li>
				<li>
					<img src="images/page1_img2.jpg" alt="">
					<div class="flex-caption c2">
						<p>Save</p>
					</div>
				</li>
				<li>
					<img src="images/page1_img3.jpg" alt="">
					<div class="flex-caption">
						<p>Help</p>
					</div>
				</li>
			</ul>
		</div>
		<span id="responsiveFlag"></span>
	</div>
</div>
</body>
</html>

JS代码(kwiks.js):

(function($){
	$.fn.kwicks = function(options){
	var defaults ={
	isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500}
;
	var o = $.extend(defaults,options);
	var WoH = (o.isVertical ? 'height':'width');
	// WoH = Width or Heightvar LoT = (o.isVertical ? 'top':'left');
	// LoT = Left or Topreturn this.each(function(){
	var container = $(this);
	var kwicks = container.children('li');
	var normWoH = kwicks.eq(0).css(WoH).replace(/px/,'');
	// normWoH = Normal Width or Heightif(!o.max){
	o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
}
else{
	o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
}
// set width of container ulif(o.isVertical){
	container.css({
	width:kwicks.eq(0).css('width'),height:(normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'}
);
}
else{
	container.css({
	width:(normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',height:kwicks.eq(0).css('height')}
);
}
// pre calculate left or top values for all kwicks but the first and last// i = index of currently hovered kwick,j = index of kwick we're calculatingvar preCalcLoTs = [];
	// preCalcLoTs = pre-calculated Left or Top'sfor(i = 0;
	i < kwicks.size();
	i++){
	preCalcLoTs[i] = [];
	// don't need to calculate values for first or last kwickfor(j = 1;
	j < kwicks.size() - 1;
	j++){
	if(i == j){
	preCalcLoTs[i][j] = o.isVertical ? j * o.min + (j * o.spacing):j * o.min + (j * o.spacing);
}
else{
	preCalcLoTs[i][j] = (j <= i ? (j * o.min):(j-1) * o.min + o.max) + (j * o.spacing);
}
}
}
// loop through all kwick elementskwicks.each(function(i){
	var kwick = $(this);
	// set initial width or height and left or top values// set first kwickif(i === 0){
	kwick.css(LoT,'0px');
}
// set last kwickelse if(i == kwicks.size() - 1){
	kwick.css(o.isVertical ? 'bottom':'right','0px');
}
// set all other kwickselse{
	if(o.sticky){
	kwick.css(LoT,preCalcLoTs[o.defaultKwick][i]);
}
else{
	kwick.css(LoT,(i * normWoH) + (i * o.spacing));
}
}
// correct size in sticky modeif(o.sticky){
	if(o.defaultKwick == i){
	kwick.css(WoH,o.max + 'px');
	kwick.addClass('active');
}
else{
	kwick.css(WoH,o.min + 'px');
}
}
kwick.css({
	margin:0,position:'absolute'}
);
	kwick.bind(o.event,function(){
	// calculate previous width or heights and left or top valuesvar prevWoHs = [];
	// prevWoHs = previous Widths or Heightsvar prevLoTs = [];
	// prevLoTs = previous Left or Topskwicks.stop().removeClass('active');
	for(j = 0;
	j < kwicks.size();
	j++){
	prevWoHs[j] = kwicks.eq(j).css(WoH).replace(/px/,'');
	prevLoTs[j] = kwicks.eq(j).css(LoT).replace(/px/,'');
}
var aniObj ={
}
;
	aniObj[WoH] = o.max;
	var maxDif = o.max - prevWoHs[i];
	var prevWoHsMaxDifRatio = prevWoHs[i]/maxDif;
	kwick.addClass('active').animate(aniObj,{
	step:function(now){
	// calculate animation completeness as percentagevar percentage = maxDif != 0 ? now/maxDif - prevWoHsMaxDifRatio:1;
	// adjsut other elements based on percentagekwicks.each(function(j){
	if(j != i){
	kwicks.eq(j).css(WoH,prevWoHs[j] - ((prevWoHs[j] - o.min) * percentage) + 'px');
}
if(j > 0 && j < kwicks.size() - 1){
	// if not the first or last kwickkwicks.eq(j).css(LoT,prevLoTs[j] - ((prevLoTs[j] - preCalcLoTs[i][j]) * percentage) + 'px');
}
}
);
}
,duration:o.duration,easing:o.easing}
);
}
);
}
);
	if(!o.sticky){
	container.bind("mouseleave",function(){
	var prevWoHs = [];
	var prevLoTs = [];
	kwicks.removeClass('active').stop();
	for(i = 0;
	i < kwicks.size();
	i++){
	prevWoHs[i] = kwicks.eq(i).css(WoH).replace(/px/,'');
	prevLoTs[i] = kwicks.eq(i).css(LoT).replace(/px/,'');
}
var aniObj ={
}
;
	aniObj[WoH] = normWoH;
	var normDif = normWoH - prevWoHs[0];
	kwicks.eq(0).animate(aniObj,{
	step:function(now){
	var percentage = normDif != 0 ? (now - prevWoHs[0])/normDif:1;
	for(i = 1;
	i < kwicks.size();
	i++){
	kwicks.eq(i).css(WoH,prevWoHs[i] - ((prevWoHs[i] - normWoH) * percentage) + 'px');
	if(i < kwicks.size() - 1){
	kwicks.eq(i).css(LoT,prevLoTs[i] - ((prevLoTs[i] - ((i * normWoH) + (i * o.spacing))) * percentage) + 'px');
}
}
}
,duration:o.duration,easing:o.easing}
);
}
);
}
}
);
}
;
}
)(jQuery);

CSS代码(slider.css):

.main{width:650px;margin:0 auto 57px;padding-top:53px;}
.container_12 .grid_8{width:620px;}
/* Browser Resets */
.flex-container a,.flexslider a,.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus{outline:none;}
.slides,.flex-control-nav,.flex-direction-nav{margin:0;padding:0;list-style:none;}
/* FlexSlider Necessary Styles*********************************/
.flexslider{margin:0;padding:0;margin-right:26px;}
.flexslider .slides > li{display:none;-webkit-backface-visibility:hidden;}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{max-width:100%;display:block;}
.flex-pauseplay span{text-transform:capitalize;}
/* Clearfix for the .slides element */
.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .slides{display:block;}
* html .slides{height:1%;}
/* No JavaScript Fallback */
/* If you are not using another script,such as Modernizr,make sure you * include js that eliminates this class on page load */
.no-js .slides > li:first-child{display:block;}
/* FlexSlider Default Theme*********************************/
.flexslider{position:relative;-webkit-border-radius:5px;-moz-border-radius:5px;zoom:1;}
.flexslider .slides{zoom:1;}
.flexslider .slides > li{position:relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own,if you wish */
.flex-container{zoom:1;position:relative;}
/* Caption style */
/* IE rgba() hack */
.flex-caption{}
.flex-caption{font:600 36px/36px 'Open Sans',sans-serif;color:#fff;display:block;position:relative;z-index:1;text-align:center;padding:42px 0 24px;text-transform:uppercase;background-color:#92ce0a;}
.flex-caption.c2{background-color:#ffe202;}
.flex-caption.c3{background-color:#0052da;}
/* Direction Nav */
.flex-direction-nav{height:0;}
.flex-direction-nav .flex-disabled{opacity:.3;filter:alpha(opacity=30);cursor:default;}
/* Control Nav */
.flex-control-nav{width:100%;position:absolute;bottom:-30px;text-align:center;}
.flex-control-nav li{margin:0 0 0 5px;display:inline-block;zoom:1;*display:inline;}
.flex-control-nav li:first-child{margin:0;}
.flex-control-nav a{width:13px;height:13px;display:block;background:url(theme/bg_control_nav.png) no-repeat;cursor:pointer;text-indent:-999em;}
.flex-control-nav a.flex-active{background-position:0 -26px;cursor:default;}
.flex-caption h3{font:26px 'Rokkitt',Georgia,"Times New Roman",Times,serif;font-weight:bold;margin:0 0 5px;}
#responsiveFlag{font-size:0;line-height:0;}
@media handheld,only screen and (min-width:320px){.flex-caption{position:static;}
}
@media handheld,only screen and (min-width:640px){.flex-caption{}
}
@media handheld,only screen and (min-width:1024px){.flexslider .slides > li{display:inline-block;overflow:hidden;position:relative;margin-right:-.25em;/*for 5 slides*/
width:33.3%;}
.flexslider .slides img{display:block;max-width:1000px;}
.flex-caption{width:100%;}
#responsiveFlag{display:block;}
}

附件:下载该文件资源,减少时间成本(增值服务)