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+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery操作css样式
May 15 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
基于PHP编程注意事项的小结
2013/04/27 PHP
thinkphp缓存技术详解
2014/12/09 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
JavaScript学习笔记之基础语法
2015/01/22 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python实现连续图文识别
2018/12/18 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
EJB3.1都有哪些改进
2012/11/17 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
应届护士求职信范文
2014/01/26 职场文书
岗位职责怎么写
2014/03/14 职场文书
自动一体化专业求职信
2014/03/15 职场文书
环保倡议书100字
2014/05/15 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
java设计模式--建造者模式详解
2021/07/21 Java/Android
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技