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使用手册之三 CSS操作
Mar 24 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
Vue和React有哪些区别
Sep 12 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实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php实现的RSS生成类实例
2015/04/23 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
使用python绘制二维图形示例
2019/11/22 Python
Python字典dict常用方法函数实例
2020/11/09 Python
Python远程linux执行命令实现
2020/11/11 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
外贸业务员岗位职责
2015/02/13 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
深入详解JS函数的柯里化
2021/06/09 Javascript
Python中文纠错的简单实现
2021/07/07 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技