jQuery实现垂直半透明手风琴特效代码分享

今天我们来分享一款基于jQuery的横向手风琴图片轮播焦点图特效源码。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很广泛，大家可以试试这款jQuery焦点图。

运行效果图：

-效果演示源码下载-

为大家分享的jQuery半透明抽屉式手风琴代码如下

hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery半透明抽屉式手风琴代码/title style type=' text/CSS ' * { margin :0；划水：0;列表样式-:型无；}a，img { border:0文本装饰：无；}车身{font:12px/180% Arial，Helvetica，无衬线'新宋体；}.pic { width:1100px高度：430 px余量：70px自动0;}.pic ul Li {列表式：无；宽度宽度：100像素高度：429 pxfloat:left}。pic。L1 {背景图像：网址(img/1。jpg)；}.pic。L2 {背景图像：网址(img/2。jpg)；}.pic。L3 {背景图像： URL(img/3。jpg)；}.pic。l4 {背景图像： URL(img/4。jpg)；宽度宽度：789px}。txt { width:100px高度：429 px背景技术： # 000;filter:alpha(不透明度=50);背景：rgba(0，0，0，5);}.txt p { color: # fff字体系列： '微软雅黑；float:left位置：相对；}.txt。P1；宽度：12 px余量：25px 25px 0 20px}。txt。p2 { font-size :14 px宽度：14 px页边距-顶部：25 px}/style/head dydiv=' pic ' ul Li=' a href='/www .JB 51。net ' target=' _ blank ' div class=' txt ' p class=' P1 '作者：走天涯/p p class='p2 '我的个人拉萨之旅||故事之城/p/div/a/Li Li/JB 51。net ' target=' _ blank ' div class=' txt ' p class=' P1 '作者：走天涯/p p class='p2 '我的个人拉萨之旅||故事之城/p/div/a/Li Li class=' L3 ' a href='/www .JB 51。net ' target=' _ blank ' div class=' txt ' p class=' P1 '作者：走天涯/p p class='p2 '我的个人拉萨之旅||故事之城/p/div/a/Li Li class=' l4 ' a href='/www .JB 51。net ' target=' _ blank ' div class=' txt ' p class=' P1 '作者： 走天涯/p p class='p2 '我的个人拉萨之旅||故事之城/p/div/a/Li/ul/div脚本类型=' text/JavaScript ' src=' http : js/jquery。js '/script脚本类型=' text/JavaScript ' $(').pic ul Li ').悬停(function(){ $(this)).停止（真)。动画({width:'789px'}，500).兄弟姐妹()。停止（真)。动画({width:'100px'}，500)；});/脚本/正文/html以上就是为大家分享的jQuery半透明抽屉式手风琴代码，希望大家可以喜欢。