jQuery简单动画实例1--王者荣耀手风琴

主要运用：淡入fadIn()、attr(）方法改变图片、动画animate()、hover()

实例中的图片可以用其他图片代替，改变图片需要注意改变盒子宽高

效果图:

源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js动画案例1--王者荣耀手风琴</title><style>.box {width: 1000px;height: 110px;background: url(./素材1/images/bg.png) no-repeat;line-height: 100px;margin-top: 10px;position: relative;}ul {position: absolute;display: flex;margin-top: 5px;padding-left: 5px;}ul li {width: 100px;height: 100px;list-style: none;line-height: 20px;padding-right: 5px;}</style>
</head>
<script src="./js/jquery-3.6.0.js"></script><body><div class="box"><ul><li class="l1"><img src="./素材1/images/m1.jpg" alt="#"></li><li class="l2"><img src="./素材1/images/l1.jpg" alt="#" width="100" height="100"></li><li class="l3"><img src="./素材1/images/c1.jpg" alt="#"></li><li class="l4"><img src="./素材1/images/w1.jpg" alt="#"></li><li class="l5"><img src="./素材1/images/z1.jpg" alt="#"></li><li class="l6"><img src="./素材1/images/h1.jpg" alt="#"></li><li class="l7"><img src="./素材1/images/t1.jpg" alt="#" width="100" height="100"></li></ul></div><script>$(".l1").hover(function () {$(".l1>img").fadeIn(30, 0.3, function () {$(".l1>img").attr({'src': './素材1/images/m.png',height: "100",})$(".l1>img").css('vertical-align', 'middle')})$('.l1').stop().animate({"width": 330}, 1000, "linear")},function () {$('.l1').stop().animate({"width": 100}, 1000, "linear", function () {$(".l1>img").fadeIn(30, 0.3, function () {$(".l1>img").attr({'src': './素材1/images/m1.jpg'})})})})$(".l2").hover(function () {$(".l2>img").fadeIn(30, 0.3, function () {$(".l2>img").attr({'src': './素材1/images/l.png',height: "100",width: "300"})$(".l2>img").css('vertical-align', 'middle')})$('.l2').stop().animate({"width": 300}, 1000, "linear")},function () {$('.l2').stop().animate({"width": 100}, 1000, "linear", function () {$(".l2>img").fadeIn(30, 0.3, function () {$(".l2>img").attr({'src': './素材1/images/l1.jpg',width: "100"})})})})$(".l3").hover(function () {$(".l3>img").fadeIn(30, 0.3, function () {$(".l3>img").attr({'src': './素材1/images/c.png',height: "100",})$(".l3>img").css('vertical-align', 'middle')})$('.l3').stop().animate({"width": 330}, 1000, "linear")},function () {$('.l3').stop().animate({"width": 100}, 1000, "linear", function () {$(".l3>img").fadeIn(30, 0.3, function () {$(".l3>img").attr({'src': './素材1/images/c1.jpg'})})})})$(".l4").hover(function () {$(".l4>img").fadeIn(30, 0.3, function () {$(".l4>img").attr({'src': './素材1/images/w.png',height: "100",})$(".l4>img").css('vertical-align', 'middle')})$('.l4').stop().animate({"width": 330}, 1000, "linear")},function () {$('.l4').stop().animate({"width": 100}, 1000, "linear", function () {$(".l4>img").fadeIn(30, 0.3, function () {$(".l4>img").attr({'src': './素材1/images/w1.jpg'})})})})$(".l5").hover(function () {$(".l5>img").fadeIn(30, 0.3, function () {$(".l5>img").attr({'src': './素材1/images/z.png',height: "100",})$(".l5>img").css('vertical-align', 'middle')})$('.l5').stop().animate({"width": 330}, 1000, "linear")},function () {$('.l5').stop().animate({"width": 100}, 1000, "linear", function () {$(".l5>img").fadeIn(30, 0.3, function () {$(".l5>img").attr({'src': './素材1/images/z1.jpg'})})})})$(".l6").hover(function () {$(".l6>img").fadeIn(30, 0.3, function () {$(".l6>img").attr({'src': './素材1/images/h.png',height: "100",})$(".l6>img").css('vertical-align', 'middle')})$('.l6').stop().animate({"width": 330}, 1000, "linear")},function () {$('.l6').stop().animate({"width": 100}, 1000, "linear", function () {$(".l6>img").fadeIn(30, 0.3, function () {$(".l6>img").attr({'src': './素材1/images/h1.jpg'})})})})$(".l7").hover(function () {$(".l7>img").fadeIn(30, 0.3, function () {$(".l7>img").attr({'src': './素材1/images/t.png',height: "100",width: "300"})$(".l7>img").css('vertical-align', 'middle')})$('.l7').stop().animate({"width": 300}, 1000, "linear")},function () {$('.l7').stop().animate({"width": 100}, 1000, "linear", function () {$(".l7>img").fadeIn(30, 0.3, function () {$(".l7>img").attr({'src': './素材1/images/t1.jpg',width: "100"})})})})</script>
</body></html>

jQuery简单动画实例1--王者荣耀手风琴相关推荐

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

jQuery简单动画实例1--王者荣耀手风琴

jQuery简单动画实例1--王者荣耀手风琴相关推荐

最新文章

热门文章