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

jquery抽屉式图片展示效果特效代码

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

以下是 jquery抽屉式图片展示效果特效代码 的示例演示效果:

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

部分效果截图:

jquery抽屉式图片展示效果特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jquery抽屉式图片展示效果</title>
<link type="text/css" rel="stylesheet" href="css/zzsc.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if lt IE 9]>
  <script type="text/javascript" src="images/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/index_slide.js"></script>
<script type="text/javascript">
    $().ready(function() {
      $('.kwicks').kwicks({
        max:400,//控制.extension区块的宽度
        spacing:10//控制图片之间的距离
      });
    });
</script>
</head>
<body>
<div class="box">
	<!--代码开始-->
	<ul class="kwicks">
		<li>
			<a href="#" target="_blank"><img src="images/01.gif"></a>
			<div class="extension" style="background-image:url(images/star_1.gif);">
				<dl>
					<dt><a href="#" target="_blank">Everything's Getting Older</a></dt>
					<dd><a href="#" target="_blank">Aidan Moffat</a></dd>
					<dd>2011</dd>
				</dl>
				<div class="meta">
					<span><a href="#" target="_blank">Shoegazer</a> 评价</span>
					<span>1星</span>
				</div>
			</div>
		</li>
		<li>
			<a href="#" target="_blank"><img src="images/02.jpg"></a>
			<div class="extension" style="background-image:url(images/star_5.gif);">
				<dl>
					<dt><a href="#" target="_blank">Minsk</a></dt>
					<dd><a href="#" target="_blank">Concerto for Constantine</a></dd>
					<dd>2008</dd>
				</dl>
				<div class="meta">
					<span><a href="#" target="_blank">Shoegazer</a> 评价</span>
					<span>5星</span>
				</div>
			</div>
		</li>
		<li>
			<a href="#" target="_blank"><img src="images/03.jpg"></a>
			<div class="extension" style="background-image:url(images/star_2.gif);">
				<dl>
					<dt><a href="#" target="_blank">A+E</a></dt>
					<dd><a href="#" target="_blank">Graham Coxon</a></dd>
					<dd>2012</dd>
				</dl>
				<div class="meta">
					<span><a href="#" target="_blank">Shoegazer</a> 评价</span>
					<span>2星</span>
				</div>
			</div>
		</li>
		<li>
			<a href="#" target="_blank"><img src="images/04.jpg"></a>
			<div class="extension" style="background-image:url(images/star_4.gif);">
				<dl>
					<dt><a href="#" target="_blank">Lullaby</a></dt>
					<dd><a href="#" target="_blank">James Walsh</a></dd>
					<dd>2012</dd>
				</dl>
				<div class="meta">
					<span><a href="#" target="_blank">Shoegazer</a> 评价</span>
					<span>4星</span>
				</div>
			</div>
		</li>
		<li>
			<a href="#" target="_blank"><img src="images/05.jpg"></a>
			<div class="extension" style="background-image:url(images/star_3.gif);">
				<dl>
					<dt><a href="#" target="_blank">Wreckorder</a></dt>
					<dd><a href="#" target="_blank">Fran Healy</a></dd>
					<dd>2010</dd>
				</dl>
				<div class="meta">
					<span><a href="#" target="_blank">Shoegazer</a> 评价</span>
					<span>3星</span>
				</div>
			</div>
		</li>
	</ul>
	<!--代码结束-->
</div>
</body>
</html>

JS代码(index_slide.js):

// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
	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 = 1.70158;
	return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
	if (s == undefined) s = 1.70158;
	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;
}
}
);
	(function($){
	$.fn.kwicks=function(n){
	var p={
	isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500}
;
	var o=$.extend(p,n);
	var q=(o.isVertical?'height':'width');
	var r=(o.isVertical?'top':'left');
	return this.each(function(){
	container=$(this);
	var k=container.children('li');
	var l=k.eq(0).css(q).replace(/px/,'');
	if(!o.max){
	o.max=(l*k.size())-(o.min*(k.size()-1))}
else{
	o.min=((l*k.size())-o.max)/(k.size()-1)}
if(o.isVertical){
	container.css({
	width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'}
)}
else{
	container.css({
	width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')}
)}
var m=[];
	for(i=0;
	i<k.size();
	i++){
	m[i]=[];
	for(j=1;
	j<k.size()-1;
	j++){
	if(i==j){
	m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}
else{
	m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}
}
}
k.each(function(i){
	var h=$(this);
	if(i===0){
	h.css(r,'0px')}
else if(i==k.size()-1){
	h.css(o.isVertical?'bottom':'right','0px')}
else{
	if(o.sticky){
	h.css(r,m[o.defaultKwick][i])}
else{
	h.css(r,(i*l)+(i*o.spacing))}
}
if(o.sticky){
	if(o.defaultKwick==i){
	h.css(q,o.max+'px');
	h.addClass('active')}
else{
	h.css(q,o.min+'px')}
}
h.css({
	margin:0,position:'absolute'}
);
	h.bind(o.event,function(){
	var c=[];
	var d=[];
	k.stop().removeClass('active');
	for(j=0;
	j<k.size();
	j++){
	c[j]=k.eq(j).css(q).replace(/px/,'');
	d[j]=k.eq(j).css(r).replace(/px/,'')}
var e={
}
;
	e[q]=o.max;
	var f=o.max-c[i];
	var g=c[i]/f;
	h.addClass('active').animate(e,{
	step:function(a){
	var b=f!=0?a/f-g:1;
	k.each(function(j){
	if(j!=i){
	k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}
if(j>0&&j<k.size()-1){
	k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}
}
)}
,duration:o.duration,easing:o.easing}
)}
)}
);
	if(!o.sticky){
	container.bind("mouseleave",function(){
	var c=[];
	var d=[];
	k.removeClass('active').stop();
	for(i=0;
	i<k.size();
	i++){
	c[i]=k.eq(i).css(q).replace(/px/,'');
	d[i]=k.eq(i).css(r).replace(/px/,'')}
var e={
}
;
	e[q]=l;
	var f=l-c[0];
	k.eq(0).animate(e,{
	step:function(a){
	var b=f!=0?(a-c[0])/f:1;
	for(i=1;
	i<k.size();
	i++){
	k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');
	if(i<k.size()-1){
	k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}
}
}
,duration:o.duration,easing:o.easing}
)}
)}
}
)}
}
)(jQuery);

CSS代码(index.css):

.container{text-align:left;position:relative;}
.kwicks{list-style:none;width:660px;color:rgb(0,0,0);padding-left:0px;position:relative;}
.kwicks li{padding:0px;width:120px;height:120px;overflow:hidden;margin-right:9px;float:left;background-color:rgb(196,220,246);}
.kwicks li.last{margin-right:0px;}
.kwicks li a{}
.kwicks li img{border:5px solid rgb(198,198,198);width:110px;height:110px;float:left;}
.kwicks li .extension{background:url("star_5.gif") no-repeat right top #3c3c3c;height:120px;}
.kwicks li dl{padding:5px 0px 0px 10px;width:230px;height:93px;overflow:hidden;margin-left:0px;}
.kwicks li dd{color:rgb(204,204,204);}
.kwicks li dt a{color:rgb(204,204,204);}
.kwicks li dt a{font-size:14px;font-weight:bold;}
.kwicks li .meta{text-align:right;color:rgb(204,204,204);padding-right:10px;}
.kwicks li .meta a{color:rgb(204,204,204);}

CSS代码(zzsc.css):

@charset "gb2312";body,ul,li,p,dl,dt,dd,a,img{padding:0px;margin:0px}
body{font:normal 12px/24px '΢���ź�';color:#ccc;background:#444}
ul,li{list-style:none}
img{border:none}
a:link,a:visited,a:hover{color:#ccc}
.box{width:660px;margin:30px auto;}
/****/
.kwicks{width:660px;position:relative}
.kwicks li{width:120px;height:120px;overflow:hidden;margin-right:9px;float:left}
.kwicks li.last{margin-right:0px}
.kwicks li img{width:110px;height:110px;border:5px solid #c6c6c6;float:left}
.kwicks li .extension{height:120px;background:url(star_5.gif) no-repeat right top #3c3c3c;overflow:hidden}
.kwicks li dl{padding:5px 0px 0px 10px;width:230px;height:80px;overflow:hidden;margin-left:0px}
.kwicks li dd{color:#ccc}
.kwicks li dt a{color:#ccc}
.kwicks li dt a{font-size:14px;font-weight:bold}
.kwicks li .meta{text-align:right;color:#ccc;padding:5px 10px}
.kwicks li .meta a{color:#ccc}
.kwicks li .meta span{padding-left:5px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
71.60 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
71.60 KB
立即下载
路茜育洁
了解
打赏作者 鼓励作者
Html JS 图片特效1
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章