jQuery-动画效果（王者荣耀手风琴案例）

王者荣耀手风琴案例，如下图所示：

该效果为王者荣耀官网上面的效果，下面我们将实现这个效果。

结构分析：

静态页面实际上是ul标签下面包含了7个小li标签，然后每一个小li标签下面有两张图片，一个为表面的小图片和被隐藏之后的大图片，然后小图片是以绝对定位显示在小li中，而小li标签是以相对定位排列在ul标签当中；当鼠标进入小li标签时，要让li标签大小变为大图片的大小，同时小图片淡出，大图片淡入，还要注意的是：要运用排它思想(jquery中siblings()得到兄弟li标签，然后设置兄弟li标签的大图片淡出，小图片淡入)，还原其他小li标签的状态。

需要的自定义动画以及元素的淡入淡出。

自定义动画：animate(params,[speed],[easing],[fn])

1.params:一组包含作为动画属性和终值的样式属性和及其值的集合

2.speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

3.easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供\"linear\" 和 “swing”.

4.fn:在动画完成时执行的函数，每个元素执行一次。

淡入:fadeIn([speed],[easing],[fn])

1.speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

2.easing:(Optional) 用来指定切换效果，默认是\"swing\"，可用参数\"linear\"

3.fn:在动画完成时执行的函数，每个元素执行一次。

淡出:fadeOut([speed],[easing],[fn])

1.speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

2.easing:(Optional) 用来指定切换效果，默认是\"swing\"，可用参数\"linear\"

3.fn:在动画完成时执行的函数，每个元素执行一次。

一，先写HTML页面

由图分析,需要的元素有:ul,li,img;

一个ul标签里面有7个li,每一个li标签包含两个img标签;

<body><div id="conent"><ul><li class="current"><img src="img/c.png" class="big" /><img src="img/c1.jpg" class="small" /></li><li><img src="img/h.png" class="big" /><img src="img/h1.jpg" class="small" /></li><li><img src="img/l.png" class="big" /><img src="img/l1.jpg" class="small" /></li><li><img src="img/m.png" class="big" /><img src="img/m1.jpg" class="small" /></li><li><img src="img/t.png" class="big" /><img src="img/t1.jpg" class="small" /></li><li><img src="img/w.png" class="big" /><img src="img/w1.jpg" class="small" /></li><li><img src="img/z.png" class="big" /><img src="img/z1.jpg" class="small" /></li></ul></div></body>

当程序运行起来时，我们首先看到的是下面这张图片：

二，再写CSS样式，来完成想要的页面，再经过修改它的样式，以达到最终的效果。

<style type="text/css">* {margin: 0px;padding: 0px;}#conent {width: 900px;height: 69px;background: url(img/bg.png);margin: 10px auto;}#conent ul li {width: 69px;height: 70px;/*    border: 1px red solid;*/overflow: hidden;float: left;border-radius: 5px;margin-left: 10px;}.small {width: 69px;height: 69px;}.big {display: none;}.current .big {display: block;}current .small {display: none;}#conent ul .current {width: 224px;}</style>

三，最后写jQuery，来实现动画效果图。

<script src="js/jquery.min.js"></script><script type="text/javascript">$(function() {//普通方法$("#conent ul li").mouseover(function() {$(this).animate({width: 224,}).siblings().animate({width: 69,})$(this).find(".big").stop().fadeIn();$(this).find(".small").stop().fadeOut();$(this).siblings().find(".big").stop().fadeOut();$(this).siblings().find(".small").stop().show();})//优化方法$("#conent ul  li").mouseover(function() {$(this).animate({width: 224,}).find(".big").stop().fadeIn().siblings().stop().fadeOut()$(this).siblings().animate({width: 69,}).find(".big").stop().fadeOut().siblings().stop().fadeIn()})})</script>

这张是当我点击别的图片时小照片隐藏的滑动效果。

鼠标滑动哪种照片哪张的小照片就会隐藏起来。

jQuery-动画效果（王者荣耀手风琴案例）相关推荐

前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）
案例:王者荣耀手风琴分析: 鼠标经过某个小li 有两步操作: 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 ...
jQuery动画效果（王者荣耀手风琴案例）
自定义动画: 自定义动画非常强大,通过参数的传递可以模拟以上所有动画,方法为:animate() (1)语法: animate(params,[speed],[easing],[fn]) (2)参数: ...
jQuery实现王者荣耀手风琴案例（知识块讲解+案例）
前言: 这个案例是几年前的了,现在的王者官网是没有这个手风琴模块的,我了解到这个案例,是受到了黑马程序员知名教师--pink老师的启发,我相信大家也都不陌生,同样也是我非常尊敬的一位老师,我就不做过多 ...
jQuery基本使用_选择器_淘宝服饰切换案例_样式操作_效果_王者荣耀手风琴
文章目录一.基本使用 1.jquery入口函数 2.$符 3.DOM对象和jQuery对象的转换二.jquery选择器 1.基础选择器 2.隐式迭代 3.筛选选择器 4.筛选方法 5.排他思想淘 ...
jQuery快速入门（淘宝切换服饰、王者荣耀手风琴效果）
一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
自定义动画 animate || 案例：王者荣耀手风琴效果分析
自定义动画 animate <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
jQuery自定义动画王者荣耀手风琴效果
分析: ①鼠标经过某个小li 有两步操作: ②当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 ③其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 <!doctyp ...
jQuery小项目之王者荣耀手风琴，有图片素材
王者荣耀手风琴效果代码示例图片素材代码示例 <!DOCTYPE html> <html lang="en"> <head><meta ...

jQuery-动画效果（王者荣耀手风琴案例）

jQuery-动画效果（王者荣耀手风琴案例）相关推荐

最新文章

热门文章