实用资源带标题的酷炫手风琴焦点图特效代码

带标题的酷炫手风琴焦点图特效代码

模仿旧版瑞丽网的焦点图特效,鼠标划过后出现手风琴的效果,显示完整图片和二级标题,很使用的一款焦点图代码,引入css和js文件即可使用:

111.jpg

焦点图CSS部分
.organ{width:1180px;height:450px;margin:0px auto;margin-bottom:20px;position:relative;}
.organ ul li{width:106px;height:450px;border-left:1px solid #000;position:relative;overflow:hidden;float:left;}
.organ ul li .imgTop img{opacity:0.4;}
.organ ul li .imgTop img.tm{opacity:1;}
.organ ul li .imgCon{width:538px;height:405px;}
.organ ul li .imgCen{width:538px;height:50px;background:rgba(0,0,0,0.5);color:#fff;font-size:20px;line-height:50px;position:absolute;left:0px;bottom:45px;text-indent:20px;display:none;}
.organ ul li .imgBot{width:538px;height:45px;background:#222;}
.organ ul li .imgBot p.bt_1{width:80px;line-height:45px;font-size:16px;color:#fff;text-indent:20px;float:left;}
.organ ul li .imgBot p.bt_2{width:458px;height:45px;line-height:45px;float:left;display:none;}
.organ ul li .imgBot p.bt_2 span{font-size:14px;color:#fff;padding-right:30px;background:url(../images/part2_icon.png)no-repeat left center;padding-left:10px;}
.organ ul li.first{width:538px;}
.organ ul li.fast{position:absolute;right:0px;bottom:0px;}
head部分引入Jquery
<script type="text/javascript" src="js/jquery.min.js"></script>
body部分代码
<div class="organ" style="margin-top: 50px">
<ul>
<li class="first">
<div class="imgTop">
<img src="images/ruili_img1.jpg" width="538" height="405" alt="" class="tm"></div>
<div class="imgCen">给你15分钟做“对”的时尚人</div>
<div class="imgBot">
<a href="#">
<p class="bt_1">标题1</p>
<p class="bt_2">
<span>封面明星故事</span>
<span>2015春夏趋势</span>
<span>我爱海淘</span></p>
</a>
</div>
</li>
<li>
<div class="imgTop">
<img src="images/ruili_img2.jpg" width="538" height="405" alt=""></div>
<div class="imgCen">蒂芙尼为你吟唱一曲自然颂</div>
<div class="imgBot">
<a href="#">
<p class="bt_1">标题2</p>
<p class="bt_2">
<span>封面明星故事</span>
<span>2015春夏趋势</span>
<span>我爱海淘</span></p>
</a>
</div>
</li>
<li>
<div class="imgTop">
<img src="images/ruili_img3.jpg" width="538" height="405" alt=""></div>
<div class="imgCen">瑞丽·妆 线上精品轻杂志</div>
<div class="imgBot">
<a href="#">
<p class="bt_1">标题3</p>
<p class="bt_2">
<span>封面明星故事</span>
<span>2015春夏趋势</span>
<span>我爱海淘</span></p>
</a>
</div>
</li>
<li>
<div class="imgTop">
<img src="images/ruili_img4.jpg" width="538" height="405" alt=""></div>
<div class="imgCen">《ar》刘海造型 女孩只需这样即刻焕然一新</div>
<div class="imgBot">
<a href="#">
<p class="bt_1">标题4</p>
<p class="bt_2">
<span>封面明星故事</span>
<span>2015春夏趋势</span>
<span>我爱海淘</span></p>
</a>
</div>
</li>
<li>
<div class="imgTop">
<img src="images/ruili_img5.jpg" width="538" height="405" alt=""></div>
<div class="imgCen">电影×大明星 见证传奇从戛纳诞生</div>
<div class="imgBot">
<a href="#">
<p class="bt_1">标题5</p>
<p class="bt_2">
<span>封面明星故事</span>
<span>2015春夏趋势</span>
<span>我爱海淘</span></p>
</a>
</div>
</li>
<li>
<div class="imgTop">
<img src="images/ruili_img6.jpg" width="538" height="405" alt=""></div>
<div class="imgCen">重返20岁试用周</div>
<div class="imgBot">
<a href="#">
<p class="bt_1">标题6</p>
<p class="bt_2">
<span>封面明星故事</span>
<span>2015春夏趋势</span>
<span>我爱海淘</span></p>
</a>
</div>
</li>
<li class="fast">
<div class="imgTop">
<img src="images/ruili_img7.jpg" width="538" height="405" alt=""></div>
<div class="imgCen">玩美女孩盖天天 阳光女神进阶攻略</div>
<div class="imgBot">
<a href="#">
<p class="bt_1">标题7</p>
<p class="bt_2">
<span>封面明星故事</span>
<span>2015春夏趋势</span>
<span>我爱海淘</span></p>
</a>
</div>
</li>
</ul>
</div>
<script src="js/organ.js" type="text/javascript"></script>

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/101.html