jQuery写的抽屉式图片展示效果
使用方法：
1.引用样式文件css/lrtk.css
2.引用jquery的库文件js/jquery.js
3.引用效果的具体js代码文件js/index_slide.js和下面的script代码复制至html文件中。
4.将class为kwicks的DIV的内容复制到您的html文件
<!DOCTYPE html>
<html>
<head>
<title>{title}_源码搜藏</title>
<link type="text/css" rel="stylesheet" href="css/lrtk.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>
<body>
<div class="box">
<!--代码开始-->
<ul class="kwicks">
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/01.gif"></a>
<div class="extension" style="background-image:url(images/star_1.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">Everything's Getting Older</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">Aidan Moffat</a></dd>
<dd>2011</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>1星</span>
</div>
</div>
</li>
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/02.jpg"></a>
<div class="extension" style="background-image:url(images/star_5.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">Minsk</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">Concerto for Constantine</a></dd>
<dd>2008</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>5星</span>
</div>
</div>
</li>
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/03.jpg"></a>
<div class="extension" style="background-image:url(images/star_2.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">A+E</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">Graham Coxon</a></dd>
<dd>2012</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>2星</span>
</div>
</div>
</li>
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/04.jpg"></a>
<div class="extension" style="background-image:url(images/star_4.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">Lullaby</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">James Walsh</a></dd>
<dd>2012</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>4星</span>
</div>
</div>
</li>
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/05.jpg"></a>
<div class="extension" style="background-image:url(images/star_3.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">Wreckorder</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">Fran Healy</a></dd>
<dd>2010</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>3星</span>
</div>
</div>
</li>
</ul>
<!--代码结束-->
</div>
<div style="font:normal 12px/2em '微软雅黑';text-align:center;margin:50px 0;">
<p>来源：<a href="http://www.codesocang.com/ " target="_blank">乐鼠无牙</a> 代码整理：<a href="http://www.codesocang.com/" target="_blank">源码搜藏</a> 感谢：<a href="http://www.iseedy.com/" target="_blank">爱看电影网</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
焦点图下载排行
-
2017-03-24
-
2019-06-28
-
2014-03-13
-
2018-07-11
-
2015-02-05
-
2017-03-24
-
2013-08-27
-
2017-03-24
最新文章
-
JQuery手风琴式相册图片特效是一款只需点击图片缩略图即可展开当前的图片
2022-03-15
-
-
Jquery带进度条提示焦点图是一款带进度条提示的图片淡出淡进切换效果代码
2022-03-15
-
2019-06-28
-
2018-07-11
-
2018-05-14
-
2017-03-24
-
2017-03-24
热门源码
