jquery案例8——王者手风琴
2023-09-14 09:13:44 时间
一、案例效果
二、案例完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者手风琴</title>
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#content {
padding: 40px;
}
ul {
width: 700px;
overflow: hidden;
background-color: aqua;
padding: 10px;
}
ul li {
list-style: none;
float: left;
/* border: 1px solid red; */
margin-right: 10px;
}
ul li:last-child {
margin-right: 0;
}
ul li.active {
width: 224px;
}
ul li.active .small {
display: none;
}
ul li.active .big {
display: block;
}
ul li a {
display: block;
position: relative;
width: 69px;
height: 69px;
}
.small {
position: absolute;
left: 0;
top: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
.big {
width: 224px;
display: none;
}
</style>
</head>
<body>
<div id="content">
<ul id="sfq">
<li class="active">
<a href="#">
<img src="./img/sfq/small1.webp" class="small" />
<img src="./img/sfq/big1.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small2.webp" class="small" />
<img src="./img/sfq/big2.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small3.webp" class="small" />
<img src="./img/sfq/big4.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small4.webp" class="small" />
<img src="./img/sfq/big4.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small5.webp" class="small" />
<img src="./img/sfq/big5.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small6.webp" class="small" />
<img src="./img/sfq/big6.png" class="big" />
</a>
</li>
<li>
<a href="#">
<img src="./img/sfq/small7.webp" class="small" />
<img src="./img/sfq/big7.png" class="big" />
</a>
</li>
</ul>
</div>
<script>
// 鼠标经过li执行操作
// 1.当前的li宽度变成224px,小图片淡出,大图片淡入
// 2. 其余兄弟li宽度要变成69px, 小图片淡入, 大图片淡出
$(function() {
$('#sfq li').mouseover(function() {
$(this).stop().animate({
width: 224
}).find('.small').stop().fadeOut(100).siblings('.big').stop().fadeIn(100);
$(this).siblings().stop().animate({
width: 69
}).find('.small').stop().fadeIn(100).siblings('.big').stop().fadeOut(100);
});
});
</script>
</body>
</html>
相关文章
- JQuery 笔记(二)
- jquery.tmpl 基础用法
- jQuery——工具及属性(案例)
- JQuery 的Bind()事件详解编程语言
- jQuery表单插件jquery.form.js详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- JQuery初体验(建议学习jquery)
- jQuery使用手册(一)
- JQuery选择器xpath语法应用
- jquery的$(document).ready()和onload的加载顺序
- Jquery从头学起第四讲jquery入门教程
- Jquery判断IE6等浏览器的代码
- jQuery学习笔记获取jQuery对象
- jquery选择器引擎sizzle浅析
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- 可兼容IE的获取及设置cookie的jquery.cookie函数方法
- UpdatePanel和jQuery不兼容局部刷新jquery失效
- jQuery中delegate和on的用法与区别详细解析
- jquery判断元素的子元素是否存在的示例代码
- jquery制作搜狐快站页面效果示例分享
- jquery动态改变form属性提交表单
- JQuery设置获取下拉菜单某个选项的值(比较全)
- jQuery源码分析之jQuery.fn.each与jQuery.each用法