前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）

案例：王者荣耀手风琴

分析：

鼠标经过某个小li 有两步操作：
1.当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入
2.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

<!doctype html>
<html>
<head><meta charset="utf-8"><title>手风琴案例</title><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>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">// 鼠标经过某个小li 有两步操作：$(function () {$(".king li").mouseenter(function () {// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入$(this).stop().animate({width:224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出$(this).siblings("li").stop().animate({width:69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();// 注意给动画效果加上stop()方法 防止动画排队！！！})})</script>
<div class="king"><ul><li class="current"><a href="#"><img src="data:images/m1.jpg" alt="" class="small"><img src="data:images/m.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/l1.jpg" alt="" class="small"><img src="data:images/l.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/c1.jpg" alt="" class="small"><img src="data:images/c.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/w1.jpg" alt="" class="small"><img src="data:images/w.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/z1.jpg" alt="" class="small"><img src="data:images/z.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/h1.jpg" alt="" class="small"><img src="data:images/h.png" alt="" class="big"></a></li><li><a href="#"><img src="data:images/t1.jpg" alt="" class="small"><img src="data:images/t.png" alt="" class="big"></a></li></ul>
</div>
</body>
</html>

前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）相关推荐

jQuery自定义动画王者荣耀手风琴效果
分析: ①鼠标经过某个小li 有两步操作: ②当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 ③其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 <!doctyp ...
jQuery-动画效果（王者荣耀手风琴案例）
王者荣耀手风琴案例,如下图所示: 该效果为王者荣耀官网上面的效果,下面我们将实现这个效果. 结构分析: 静态页面实际上是ul标签下面包含了7个小li标签,然后每一个小li标签下面有两张图片,一个为表面 ...
jQuery动画效果（王者荣耀手风琴案例）
自定义动画: 自定义动画非常强大,通过参数的传递可以模拟以上所有动画,方法为:animate() (1)语法: animate(params,[speed],[easing],[fn]) (2)参数: ...
jQuery实现王者荣耀手风琴案例（知识块讲解+案例）
前言: 这个案例是几年前的了,现在的王者官网是没有这个手风琴模块的,我了解到这个案例,是受到了黑马程序员知名教师--pink老师的启发,我相信大家也都不陌生,同样也是我非常尊敬的一位老师,我就不做过多 ...
Web前端学习笔记——HTML5与CSS3之购物车宣传案例
<购物车宣传>案例综合运用h5c3知识且进行一定扩展能使用jquery完成网页常见交互行为实际工作开发当中能应对活动宣传页全屏切换效果通过鼠标的滚轮切换全屏页面使用fullp ...
Web前端学习笔记——HTML5与CSS3之QQ TIM案例
<QQ TIM>案例 Stellar插件描述视差滚动(Parallax Scrolling)指网页滚动过程中, 多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术主 ...
【前端学习笔记】JQuery事件细节、JQ进阶常用方法
事件细节----------------------- ev直接使用,不需要兼容操作ev.pageX(Y) 鼠标的坐标(相对于文档) : ev.clientX(相对于窗口)ev.which(能监控鼠标 ...
前端学习笔记之创建节点与添加节点案例
发布留言案例实现一.案例分析二.实现过程三.完整代码一.案例分析核心思路:点击按钮之后,就动态创建 li,添加到 ul 里面: 创建 li 的同时,把文本域里面的值通过 li.innerHT ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...

前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）

前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）相关推荐

最新文章

热门文章