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


Posted in Javascript onAugust 21, 2015

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

运行效果图:

---------------------------------效果演示 源码下载---------------------------------

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

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery半透明抽屉式手风琴代码</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.pic{width:1100px;height:430px;margin:70px auto 0;}
.pic ul li{list-style:none;width:100px;height:429px;float:left;}
.pic .l1{background-image:url(img/1.jpg);}
.pic .l2{background-image:url(img/2.jpg);}
.pic .l3{background-image:url(img/3.jpg);}
.pic .l4{background-image:url(img/4.jpg);width:789px;}
.txt{width:100px; height:429px;background:#000;filter:alpha(opacity=50);background:rgba(0,0,0,.5);}
.txt p{color:#fff;font-family:"微软雅黑";float:left;position:relative;}
.txt .p1{font-size:12px;width:12px;margin:25px 25px 0 20px;}
.txt .p2{font-size:14px;width:14px;margin-top:25px;}
</style>

</head>

<body>

<div class="pic">
 <ul>
 <li class="l1">
 <a href="//3water.com" target="_blank">
 <div class="txt">
  <p class="p1">作者 : 走天涯</p>
  <p class="p2">我的个人拉萨之旅||故事之城</p>
 </div>
 </a>
 </li>
 <li class="l2">
 <a href="//3water.com" target="_blank">
 <div class="txt">
  <p class="p1">作者 : 走天涯</p>
  <p class="p2">我的个人拉萨之旅||故事之城</p>
 </div>
 </a>
 </li>
 <li class="l3"> 
 <a href="//3water.com" target="_blank">
 <div class="txt">
  <p class="p1">作者 : 走天涯</p>
  <p class="p2">我的个人拉萨之旅||故事之城</p>
 </div>
 </a>
 </li>
 <li class="l4">   
 <a href="//3water.com" target="_blank">
 <div class="txt">
  <p class="p1">作者 : 走天涯</p>
  <p class="p2">我的个人拉萨之旅||故事之城</p>
 </div>
 </a>
 </li>
 </ul>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(".pic ul li").hover(function(){
 $(this).stop(true).animate({width:"789px"},500).siblings().stop(true).animate({width:"100px"},500);
});
</script>
</body>
</html>

以上就是为大家分享的jQuery半透明抽屉式手风琴代码,希望大家可以喜欢。

Javascript 相关文章推荐
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
Javascript获取某个月的天数
May 30 Javascript
vue的for循环使用方法
Feb 12 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
js实现温度计时间样式代码分享
Aug 21 #Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 #Javascript
JS打字效果的动态菜单代码分享
Aug 21 #Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 #Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 #Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 #Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 #Javascript
You might like
SMARTY学习手记
2007/01/04 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
js实现简单的秒表
2020/01/16 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
Python实现类继承实例
2014/07/04 Python
python输入多行字符串的方法总结
2019/07/02 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
python实现KNN近邻算法
2020/12/30 Python
python实现代码审查自动回复消息
2021/02/01 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
甜品店创业计划书
2014/08/14 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python