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

最新推荐文章于 2024-04-16 15:12:02 发布
最新推荐文章于 2024-04-16 15:12:02 发布
阅读量1.2k 收藏 2
点赞数
文章标签： javascript jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51644702/article/details/124348593
版权

主要运用：淡入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>

资深咸鱼~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现动画效果的简单实例
12-09
一、需求原因目前jQuery已经是一个比较成熟的框架了，而且基于他的插件也有上百种，本例我手动用jQuery实现一个动画效果的例子。 二、具体实现 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html><head><meta http-equiv=”Content-Type”content=”text/html; charset=UTF-8″><title>jQuery实现动画效果</title><script languag
JQuery——动画效果
TianXuab的博客
08-10 1733
通过使用这些方法，你可以为网页添加流畅的过渡和动态效果，提升用户体验。然而，随着现代 Web 开发的发展，CSS 动画和过渡以及原生 JavaScript 也提供了更多强大的动画效果选项。jQuery 提供了多种动画效果，可以让你在网页中添加平滑的过渡和动态效果。方法可以创建自定义的动画效果，可以定义多个属性和持续时间。方法可以在显示和隐藏之间切换元素的淡入淡出效果。方法可以在显示和隐藏之间切换元素的滑动效果。方法可以实现元素的向上和向下滑动效果。方法可以实现元素的渐隐和渐现效果。
四种简单的有手就能学会的jQuery动画效果
ovocc的博客
03-18 1757
jQuery封装了JavaScript常用的的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。 我们这里就简单介绍一下滑动滑出，隐藏显示，淡出淡入，自定义动画这四种简单的动画方式 参数[spped]:指的的速度,可加可不加，通常有两种：[easing]:用来指定切换效果，默认swing[fn]:回调函数，在动画完成执行的函数，每个元素执行一次一、显示隐藏1.show()2.hiden()1.toggle()综合案例二、淡出淡入1.fadeIn()2.fadeOut()3.fadeTogg.
基于JQuery的动画案例-手风琴、动态移动展示效果
qq_42095103的博客
11-14 1067
手风琴效果实际上是一个ul标签下面包含了7个小li标签，然后每一个小li标签下面有两张图片，一个为表面的小图片和被隐藏之后的大图片，然后小图片是以绝对定位显示在小li中，而小li标签是以相对定位排列在ul标签当中；当鼠标进入小li标签时，要让li标签大小变为大图片的大小，同时小图片淡出，大图片淡入，还要注意的是：当前li标签变化时，要还原其他小li标签为小图片的状态。
JQuery动画+事例
泠泠似水
02-27 768
1.动画基础隐藏和显示jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果$elem.hide()提供参数：.hide( options )当提供hide方法一个参数时，.hide
jQuery实现王者荣耀手风琴效果
01-19
效果 思路分析: 1.鼠标经过某个小li 有两步操作： 2.当前小li 宽度变为 224px， ...手风琴案例</title> <style type=text/css> * { margin: 0; padding: 0; } img { display: block; } ul { li
jQuery竖排动画手风琴折叠菜单栏代码.zip
07-11
总的来说，"jQuery竖排动画手风琴折叠菜单栏代码"是一个综合运用了jQuery事件处理、动画效果和CSS样式的实例。它展示了如何利用这些技术创建一个互动性强、视觉效果良好的网页组件，提升了用户体验。对于学习和实践...
jQuery UI手风琴-取消更改
04-07
在网页开发中，jQuery UI 是一个非常流行的库，它提供了许多可交互的用户界面组件，如滑块、日期选择器和我们今天要讨论的主题——手风琴（Accordion）。手风琴控件允许用户以折叠/展开的方式查看内容，极大地节省了...
jQuery的漂亮手风琴动画特效.zip
07-11
<link rel="stylesheet" type="text/css" href="css/default.css?3.1.64"> <... <link rel="stylesheet" type... 这是一款设计时尚漂亮，颜色搭配非常好的CSS3手风琴动画特效，带动画效果的手风琴切换代码。
jQuery小项目之王者荣耀手风琴，有图片素材
艺艺艺艺儿ya的博客
07-14 2792
王者荣耀手风琴效果代码示例图片素材 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>王者荣耀手风琴效果</title> <style> *{ margin: 0; padding: 0; } .box{
10个jQuery动画实例
Just Code
03-30 493
&lt;!-- close: meta paragraph --&gt; jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API . ...
❋JQuery的快速入门2 jq动画与案例
m0_62836433的博客
10-07 140
自定义动画+5个案例
jQuery-动画效果（轮播图案例）
weixin_69036336的博客
10-29 1533
jQuery-动画效果（轮播图案例）
jQuery中几种常见的动画效果
欢迎来到长风沛雨的博客
10-06 1970
（用于对jQuery的笔记学习与复习）
JQuery(四)---【使用JQuery实现动画效果】
最新发布
zheshiyangyang的博客
04-16 1291
JQuery允许我们将方法链接起来，使用链接可以方便我们对某些方法的复用例如：“假设我们有一个id为p1的段落，我们想要它执行slideDown方法和slideUp方法可以看到，我们写了两条语句，让这个元素执行这个两个功能但是如果一个元素需要执行非常多的功能，假设有100个，我们就要写100条语句，这对于“程序员”来说很不方便！为此，我们可以使用链接来简化书写！
王者荣耀手风琴效果
weixin_45147894的博客
10-21 1004
王者荣耀中有个手风琴效果：如下图： 每一部分都是又一个长图和一个方的小图构成。 利用定位效果就能完成小图放在大图上面即可。 每一个效果都是一样的： 效果分析： ...
jQuery动画
weixin_52629158的博客
05-17 828
三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000):三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
你真的拿捏 jQuery 四大动画效果了吗？【入门篇超详细 零基础适用】
weixin_52212950的博客
04-16 3806
在艰难的原生 JS 路上我们是否做过各种各样的动画效果呢，例如轮播图的动画函数，下拉菜单，但是其实之前的显示与隐藏等小操作都属于动画效果，在 jQuery 领域我们可以将这些显示隐藏放慢100倍 1000倍来让你看清楚其动画效果，这些就用到了显示与隐藏的隐藏参数，下面大家看一下 jQuery 为我们写好了哪些动画函数呢？ 在开始前先给各位来一个温馨注意事项："动画函数只要触发就一定会执行，这句话在第四板块会提及到，大家多注意 " jQuery 已封装好的动画函数分类： 显示隐藏效果 ...
jQuery实现王者荣耀手风琴案例（知识块讲解+案例）
世界和我们都不该止步于此
03-11 5049
jQuery效果动画显示和隐藏效果滑动效果事件的切换动画队列的停止淡入淡出效果自定义动画手风琴案例实践HTML我们搭建好框架CSS样式jQuery来实现动画效果的交互（重点）
jquery王者荣耀手风琴
04-29
jQuery手风琴是一种常见的网页交互效果，可以通过点击或鼠标悬停触发，实现展开或收起内容的效果。以下是一个简单的jQuery手风琴实现示例： HTML代码： ``` <div class="accordion"> <div class="item"> <div class="title">英雄联盟</div> <div class="content"> <p>英雄联盟是一款多人在线战术竞技游戏，由Riot Games开发。</p> </div> </div> <div class="item"> <div class="title">王者荣耀</div> <div class="content"> <p>王者荣耀是一款流行的多人在线战术竞技游戏，由腾讯游戏开发。</p> </div> </div> </div> ``` CSS代码： ``` .accordion { width: 300px; } .item { border: 1px solid #ccc; } .item .title { background-color: #f5f5f5; padding: 10px; font-weight: bold; cursor: pointer; } .item .content { display: none; padding: 10px; } ``` jQuery代码： ``` $(document).ready(function(){ $('.item .title').click(function(){ $('.item .content').slideUp(); $(this).siblings('.content').slideDown(); }); }); ``` 在上述代码中，首先定义了一个包含两个带有标题和内容的项目的手风琴容器，然后使用CSS设置了标题和内容的样式。最后，在jQuery代码中，使用click事件来触发手风琴效果，当点击某个标题时，先将所有内容收起，然后展开当前点击的项目的内容。运行代码后，即可看到实现了手风琴效果的王者荣耀和英雄联盟项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值