🎹题目要求
编辑
❓什么是手风琴特效?
就比如本题的特效是鼠标划过就会出现蓝色背景,然后商品img变大
还有一种比较常见的就是下拉和收回
如图下⏬
还有其他别的样式就不一一介绍了
🎹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>
🎹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; }
🎹js代码
// 鼠标经过li时触发函数// _____(2)______(function(){// $(this).___(3)_____('on').__(4)_____().____(5)____('on');// });$(".box li").mouseover(function(){ $(this).stop().addClass("on").siblings().stop().removeClass("on"); });
🎹题目分析
本题的考核是实现手风琴的效果,本题的方法是通过操作类来实现的。
jQuery siblings() 方法⏬
通过操作类 .on 来实现样式的出现和消失
jQuery addClass() 方法⏬
jQuery removeClass() 方法⏬
因为在动画队列里面,动画都是按照顺序执行的,默认只有当前一个动画执行完毕,才会执行后面的动画,本题存在两个动画效果,所以要用stop()的方法来停止动画效果
jQuery stop() 方法⏬
stop()方法适用于所有的jQuery效果,包括元素的淡入淡出,以及自定义动画等等
🎹实现效果
编辑