代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>王者荣耀手风琴效果</title><style>*{margin: 0;padding: 0;}.box{width: 769px;height: 115px;margin:200px auto;background: url("./images2/header.png") no-repeat;padding: 20px;}.img{display: block;}ul{list-style: none;}.box ul{overflow: hidden;}.box li{width: 69px;height: 69px;margin-right: 10px;float: left;position: relative;}.box .current{width: 224px;}.box .current .big{display: block;}.box .current .small{display: none;}.big{display: none;width: 224px;}.small{display: block;position: absolute;width: 69px;height: 69px;left: 0;top: 0;border-radius: 5px;}</style><script src="jquery-3.4.1.js"></script><script>$(function () {$("li").mouseenter(function () {//当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入$(this).stop().animate({width:224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();//其余兄弟小li宽度变为69px,小图片淡入，大图片淡出$(this).siblings("li").stop().animate({width:69}).find(".big").stop().fadeOut().siblings(".small").stop().fadeIn();});});</script>
</head>
<body><div class="box"><ul><li class="current"><a href="#"><img src="./images2/01.jpg" alt="" class="small"><img src="./images2/1.png" alt="" class="big"></a></li><li><a href="#"><img src="./images2/02.jpg" alt="" class="small"><img src="./images2/2.png" alt="" class="big"></a></li><li><a href="#"><img src="./images2/03.jpg" alt="" class="small"><img src="./images2/3.png" alt="" class="big"></a></li><li><a href="#"><img src="./images2/04.jpg" alt="" class="small"><img src="./images2/4.png" alt="" class="big"></a></li><li><a href="#"><img src="./images2/05.jpg" alt="" class="small"><img src="./images2/5.png" alt="" class="big"></a></li><li><a href="#"><img src="./images2/06.jpg" alt="" class="small"><img src="./images2/6.png" alt="" class="big"></a></li><li><a href="#"><img src="./images2/07.jpg" alt="" class="small"><img src="./images2/7.png" alt="" class="big"></a></li></ul></div>
</body>
</html>

图片素材

jQuery小项目之王者荣耀手风琴，有图片素材相关推荐

jQuery动画效果（王者荣耀手风琴案例）
自定义动画: 自定义动画非常强大,通过参数的传递可以模拟以上所有动画,方法为:animate() (1)语法: animate(params,[speed],[easing],[fn]) (2)参数: ...
jQuery快速入门（淘宝切换服饰、王者荣耀手风琴效果）
一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...
jQuery基本使用_选择器_淘宝服饰切换案例_样式操作_效果_王者荣耀手风琴
文章目录一.基本使用 1.jquery入口函数 2.$符 3.DOM对象和jQuery对象的转换二.jquery选择器 1.基础选择器 2.隐式迭代 3.筛选选择器 4.筛选方法 5.排他思想淘 ...
jQuery自定义动画王者荣耀手风琴效果
分析: ①鼠标经过某个小li 有两步操作: ②当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 ③其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 <!doctyp ...
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
自定义动画 animate || 案例：王者荣耀手风琴效果分析
自定义动画 animate <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
jQuery-动画效果（王者荣耀手风琴案例）
王者荣耀手风琴案例,如下图所示: 该效果为王者荣耀官网上面的效果,下面我们将实现这个效果. 结构分析: 静态页面实际上是ul标签下面包含了7个小li标签,然后每一个小li标签下面有两张图片,一个为表面 ...
前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）
案例:王者荣耀手风琴分析: 鼠标经过某个小li 有两步操作: 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 ...
【云云怪】第5个项目：爬取王者荣耀全皮肤图片
[项目预览] [创作背景] 自上一个项目(项目4)功败垂成之后,我花了挺多时间调试,找了一个信任我的小伙伴,帮我测试,我到底能不能通过小程序偷到他电脑里的东西.直到学到了爬虫,我对偷东西小程序的热情一 ...

jQuery小项目之王者荣耀手风琴，有图片素材

王者荣耀手风琴效果

代码示例

图片素材

jQuery小项目之王者荣耀手风琴，有图片素材相关推荐

最新文章

热门文章