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 相关文章推荐
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
js中eval详解
Mar 30 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 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
Dedecms常用函数解析
2008/02/01 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
json简单介绍
2008/06/10 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Python3读取zip文件信息的方法
2015/05/22 Python
Python打包可执行文件的方法详解
2016/09/19 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python 列表反转显示的四种方法
2020/11/16 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
创新比赛获奖感言
2014/02/13 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL