jQuery实现手风琴特效


Posted in jQuery onJanuary 11, 2021

本文实例为大家分享了jQuery实现手风琴的具体代码,供大家参考,具体内容如下

运用jQuery效果(功能如下):

jQuery实现手风琴特效

代码(链式编程):

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery-3.4.1.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

img {
display: block;
}

ul {
list-style: none;
}

.king {
width: 852px;
margin: 100px auto;
background: url(../images/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}

.king ul {
overflow: hidden;
}

.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}

.king li.current {
width: 224px;
}

.king li.current .big {
display: block;
}

.king li.current .small {
display: none;
}

.big {
width: 224px;
display: none;
}

.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>

<body>
<div class="king">
<ul>
<li class="current">
<a href="#" >
<img src="../images/m1.jpg" alt="" class="small">
<img src="../images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/l1.jpg" alt="" class="small">
<img src="../images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/c1.jpg" alt="" class="small">
<img src="../images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/w1.jpg" alt="" class="small">
<img src="../images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/z1.jpg" alt="" class="small">
<img src="../images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/h1.jpg" alt="" class="small">
<img src="../images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/t1.jpg" alt="" class="small">
<img src="../images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>

</body>
<script>
$(function() {
//1.鼠标经过小li有两步操作:当前小li的宽度变为225px,同时里面的小图片淡出,大图片淡入
//2.其余兄弟元素小li宽度变为69px,小图片淡入,大图片淡出
$(".king li").mouseenter(function() {
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</script>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
使用jquery实现轮播图效果
Jan 02 #jQuery
jQuery实现全选按钮
Jan 01 #jQuery
jquery自定义组件实例详解
Dec 31 #jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 #jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 #jQuery
jQuery实现简单轮播图效果
Dec 27 #jQuery
You might like
如何利用php+mysql保存和输出文件
2006/10/09 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
php中的观察者模式
2010/03/24 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
Redis构建分布式锁
2017/03/28 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
Firefox outerHTML实现代码
2009/06/04 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python3爬虫全国地址信息
2019/01/05 Python
安装docker-compose的两种最简方法
2019/07/30 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
《与象共舞》教学反思
2014/02/24 职场文书
优秀应届生求职信
2014/06/16 职场文书
给学校的建议书400字
2015/09/14 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL