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 相关文章推荐
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 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
php 正则表达式小结
2009/08/31 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python数据类型详解(一)字符串
2016/05/08 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python处理csv中的空值方法
2018/06/22 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
序列化Python对象的方法
2020/08/01 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
四风问题班子对照检查材料
2014/09/27 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
QT与javascript交互数据的实现
2021/05/26 Javascript
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
Nginx配置根据url参数重定向
2022/04/11 Servers