jQuery设置手风琴特效

简介: 使用jQuery实现手风琴效果

 🎹题目要求

image.gif编辑

❓什么是手风琴特效?

就比如本题的特效是鼠标划过就会出现蓝色背景,然后商品img变大

还有一种比较常见的就是下拉和收回

如图下⏬

image.gif

还有其他别的样式就不一一介绍了

🎹html代码

<!doctype html><html><head><metacharset="utf-8"><title>第四题--手风琴</title><linkhref="css/style.css"type="text/css"rel="stylesheet"></head><body><sectionclass="main_box"><divclass="box"><ul><liclass="on"><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/1.png"alt="img"></a></li><li><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/2.png"alt="img"></a></li><li><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/3.png"alt="img"></a></li><li><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/4.png"alt="img"></a></li><li><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/5.png"alt="img"></a></li></ul></div></section><!--引入jquery库--><!-- <script src="______(1)______"></script> --><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/script.js"></script></body></html>

image.gif

🎹css代码

@charset"utf-8";
/* CSS Document */body{
margin: 0;
padding: 0;
}
ul{
margin: 0;
padding: 0; 
list-style: none;
}
a{
text-decoration: none;
}
h3,p{
margin: 0;
font-weight: normal;
}
.main_box{
width: 100%;
position: relative;
}
.box{
width: 1232px;
margin: 10pxauto;
padding: 15px;
}
.boxul{
height:300px;
}
.boxulli{
width: 202px;
height: 300px;
box-shadow: 3px2px30pxrgba(0,0,0,.1);
float: left;
text-align: center;
position: relative;
transition: all.6sease-out;
}
.boxullih3{
padding-top: 30px;
color: #333;
font-size: 18px;
}
.boxullip{
margin-top: 7px;
color: #666;
font-size: 14px;
}
.boxulliimg{
width: 150px;
height: 150px;
position: absolute;
right: 26px;
bottom: 40px;
transition: all.6sease-out;
}
.boxul.on{
width: 402px;
height: 300px;
background-color: #3288e6;
text-align: left;
}
.boxul.onh3{
padding-left: 20px;
color: #FFF;
}
.boxul.onp{
margin-left: 20px;
color: #FFF;
}
.boxul.onimg{
width: 270px;
height: 270px;
position: absolute;
right: 0px;
bottom: 0px;
}

image.gif

🎹js代码

// 鼠标经过li时触发函数// _____(2)______(function(){//  $(this).___(3)_____('on').__(4)_____().____(5)____('on');// });$(".box li").mouseover(function(){
$(this).stop().addClass("on").siblings().stop().removeClass("on");
});

image.gif

🎹题目分析

本题的考核是实现手风琴的效果,本题的方法是通过操作类来实现的。

jQuery siblings() 方法

image.gif

通过操作类 .on 来实现样式的出现和消失

jQuery addClass() 方法

image.gif

jQuery removeClass() 方法

image.gif

因为在动画队列里面,动画都是按照顺序执行的,默认只有当前一个动画执行完毕,才会执行后面的动画,本题存在两个动画效果,所以要用stop()的方法来停止动画效果

jQuery stop() 方法

image.gif

stop()方法适用于所有的jQuery效果,包括元素的淡入淡出,以及自定义动画等等

🎹实现效果

image.gif编辑

目录
相关文章
|
7天前
|
JavaScript
jQuery实现的手风琴四季场景变换特效源码
jQuery实现的手风琴四季场景变换特效源码是一段基于jQuery实现的手风琴四季场景变换效果代码,拥有春夏秋冬四季转场特效,鼠标可放大每个季节的图像,欢迎对此段代码感兴趣的朋友前来下载使用。
13 1
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
16 1
|
2月前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
58 2
|
2月前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
53 14
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
26 5
|
6月前
|
JavaScript
jQuery中如何来获取和设置属性?
jQuery中如何来获取和设置属性?
|
6月前
|
存储 缓存 JavaScript
jQuery中获取和设置属性
jQuery中获取和设置属性
55 0
|
6月前
|
JavaScript
jquery给轮播图的第一张设置class样式
jquery给轮播图的第一张设置class样式
|
6月前
|
JavaScript 索引
jquery操作select(取值,设置选中)
jquery操作select(取值,设置选中)
166 0
|
6月前
|
JavaScript
jQuery中如何来获取和设置属性?
jQuery中如何来获取和设置属性?
46 0