JQ实现王者荣耀手风琴效果

准备

htm+lcss布局和样式分析

HTMl是一个容器装着无序列表，li内装着俩图片，一个是小头像图片，另外一个是详情大图片

<div class="box"><ul><li class="current"><a href="#"><img src="upload/c1.jpg" class="small"><img src="upload/c.png" class="big"></a></li><li><a href="#"><img src="upload/m1.jpg" class="small"><img src="upload/m.png" class="big"></a></li><li><a href="#"><img src="upload/z1.jpg" class="small"><img src="upload/z.png" class="big"></a></li><li><a href="#"><img src="upload/w1.jpg" class="small"><img src="upload/w.png" class="big"></a></li><li><a href="#"><img src="upload/t1.jpg" class="small"><img src="upload/t.png" class="big"></a></li><li><a href="#"><img src="upload/h1.jpg" class="small"><img src="upload/h.png" class="big"></a></li><li><a href="#"><img src="upload/l1.jpg" class="small"><img src="upload/l.png" class="big"></a></li></ul></div>

CSS

 * {padding: 0;margin: 0;list-style: none;}.box {margin: 100px auto;width: 50%;background: url(upload/bg.png) no-repeat;padding: 10px;}.box ul {overflow: hidden;}.box li {float: left;position: relative;width: 69px;height: 69px;margin-right: 10px;}.box .big {display: none;/* position: absolute; */width: 224px;top: 0;}.box .small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;}/* 这里权重20 覆盖了上面.box li （权重11）的width属性值 */.box .current {width: 224px;}.current .big {display: block;}.current .small {display: none;}

样式布局大概就是先定义好box的宽度，高度后面由图片撑开，再加上背景图片（不过一开始因为没给高度看不到）

然后再给li添加浮动来一行显示，再给上小头像图片的高度和宽度，同时给ul清除浮动，不然box高度塌陷，无法正常显示背景图片

就像这样：
不过因为大图片和小图片同时出现，就会出现换行的情况
，这里可以将大图片.big类设置display：none
这里给的是li相对定位，大图片没给绝对定位，小图片给绝对定位

最终布局差不多就这样了
然后可以设置第一个li内的大图片显示，小图片隐藏

JS

 $(".box li").mouseover(function () {$(this).stop().animate({width: 224}).find(".small").stop().fadeOut().next(".big").stop().fadeIn()$(this).siblings().stop().animate({width: 69}).find(".small").stop().fadeIn().next(".big").stop().fadeOut()})

jq就是通过每个li的鼠标移入事件来改变li的宽度（变长为大图片的宽度），再给小图片淡出效果，加上大图片的淡入效果
再把li其他兄弟的宽度缩小为原来的宽度（小图片宽度）给小图片淡入效果，加上大图片的淡出效果
最后在动画前面都加上stop方法效果来解决动画队列问题。

JQ实现王者荣耀手风琴效果相关推荐

自定义动画 animate || 案例：王者荣耀手风琴效果分析
自定义动画 animate <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
jQuery快速入门（淘宝切换服饰、王者荣耀手风琴效果）
一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
jQuery自定义动画王者荣耀手风琴效果
分析: ①鼠标经过某个小li 有两步操作: ②当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 ③其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 <!doctyp ...
王者荣耀手风琴效果实现
0x00 网页地址 http://pvp.qq.com/strategy/ 0x01 代码 HTML <div class="demo"><p c ...
jQuery小项目之王者荣耀手风琴，有图片素材
王者荣耀手风琴效果代码示例图片素材代码示例 <!DOCTYPE html> <html lang="en"> <head><meta ...
jQuery-动画效果（王者荣耀手风琴案例）
王者荣耀手风琴案例,如下图所示: 该效果为王者荣耀官网上面的效果,下面我们将实现这个效果. 结构分析: 静态页面实际上是ul标签下面包含了7个小li标签,然后每一个小li标签下面有两张图片,一个为表面 ...
jQuery基本使用_选择器_淘宝服饰切换案例_样式操作_效果_王者荣耀手风琴
文章目录一.基本使用 1.jquery入口函数 2.$符 3.DOM对象和jQuery对象的转换二.jquery选择器 1.基础选择器 2.隐式迭代 3.筛选选择器 4.筛选方法 5.排他思想淘 ...
前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）
案例:王者荣耀手风琴分析: 鼠标经过某个小li 有两步操作: 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 ...

JQ实现王者荣耀手风琴效果

准备

htm+lcss布局和样式分析

CSS

JS

JQ实现王者荣耀手风琴效果相关推荐

最新文章

热门文章