❋JQuery的快速入门2 jq动画与案例

于 2023-10-07 01:18:32 发布
阅读量161 收藏
点赞数
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62836433/article/details/133274462
版权

目录

 

jq自定义动画【animate，stop】

 案例1：大小图标

案例2：动态增加删除数据

案例3：动态留言与删除

案例4：动态进度条

案例5：点击三个相同的图片进行消除

jq自定义动画【animate，stop】

animate({样式}，时间)；

样式还是css的样式，样式名变为驼峰命名法【将 - 后的第一个字母变为大写】

样式不分开写则一起进行变化，若分开则一步一步进行

stop([clearQueue],[gotoEnd])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 20px;
            border: 1px solid blue;
            background-color: brown;
            /* border-radius: 10px; */
            /* text-align: center; */
        }
    </style>
</head>
<body>
    <script>
        $(function(){
            $('#btn1').click(function(){
                $('div').animate({
                    width: 1000,
                    height:600,
                    borderWidth:10,
                    fontSize:100,
                    borderRadius:100,
                    
                },2000);
            });
            $('#btn2').click(function(){
                $('div').animate({
                    width:100,
                    height:20,
                    borderWidth:2,
                    borderRadius:1,
                    fontSize:20,
                },2000);
            })
            $('#btn4').click(function(){
                $('div').animate({width:500},1000)
                    .animate({height:500},1000)
                    .animate({borderWidth:5},1000)
                    .animate({fontSize:100},1000);
            })
            $('#btn3').click(function(){
                // $('div').stop();
                $('div').stop(true,false); // 立即清空队列，立即完成当前动画
            })
        })
    </script>
    <button id="btn1">run</button>
    <button id="btn2">back</button>
    <button id="btn3">stop</button>
    <button id="btn4">Run</button>
    <hr>
    <div>
        Hello!
    </div>
</body>
</html>

 案例1：大小图标

e28a384b59564c0a8cfa9263dc08830e.png

当鼠标经过时图标变大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <style>
        div{
            width: max-content;
            margin: 0 auto;
        }
        .li1{
            list-style: none;
            margin: 5px 10px;
            float: left;
        }
        .big{
            width: 200px;
            display: none;
        }
    </style>
</head>
<body>
    <script>
        $(function(){
            // 当鼠标经过时，小图标变为大图标，当鼠标离开时，大图标变为小图标
            $('.li1 .small').mousemove(function(){
                $(this).parent().children().toggle();
            })
            $('.li1 .big').mouseleave(function(){
                $(this).parent().children().toggle();
            })
        })
    </script>
    <div>
        <li class="li1">
            <img class="small" src="02_09.png" alt="">
            <img class="big" src="02_09.png" alt="">
        </li>
        <li class="li1">
            <img class="small" src="05_05.png" alt="">
            <img class="big" src="05_05.png" alt="">
        </li>
        <li class="li1">
            <img class="small" src="09_07.png" alt="">
            <img class="big" src="09_07.png" alt="">
        </li>
        <li class="li1">
            <img class="small" src="06_04.png" alt="">
            <img class="big" src="06_04.png" alt="">
        </li>
        <div style="clear: both;"></div>
    </div>
</body>
</html>

案例2：动态增加删除数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <style>
        table{
            border: 1px solid green;
            border-collapse: collapse;
        }
        td{
            border: 1px solid green;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        tr>td:nth-child(1){
            width: 100px;
        }
        tr>td:nth-child(2){
            width: 200px;
        }
        tr>td:nth-child(3){
            width: 50px;
        }
    </style>
</head>
<body>
    <script>
        $(function(){
            $('input[type=button]').click(function(){
                var cls=$('input[type=text]').val();
                var opt=$('select').val()
                var trs='<tr>'+
                            '<td>'+cls+'</td>'+
                            '<td>'+opt+'</td>'+
                            '<td><button>del</button></td>'+
                        '</tr>'
                $('table').append(trs); // 将tr追加到 table 的末尾
                $('input[type=text]').val('');
            });
            $('table').on('click','button',function(){
                var trs=$(this).parent().parent();
                trs.remove();
                console.log('yes')
            })
        })
    </script>
    课程名称：<input type="text"> 
    所属学院 <select name="" id="">
                <option value="计算机工程学院">计算机工程学院</option>
                <option value="软件学院">软件学院</option>
                <option value="大数据与云计算学院">大数据与云计算学院</option>
                <option value="轨道交通学院">轨道交通学院</option>
            </select>
    <input type="button" value="添加数据">
    <hr>
    <table>
        <tr style="font-weight: bold;">
            <td>课程名称</td>
            <td>所属学院</td>
            <td>已完成</td>
        </tr>
        <tr>
            <td>javascript</td>
            <td>计算机工程学院</td>
            <td><button>del</button></td>
        </tr>
        <tr>
            <td>Python Web</td>
            <td>计算机工程学院</td>
            <td><button>del</button></td>
        </tr>
        <tr>
            <td>地铁运行原理</td>
            <td>轨道交通学院</td>
            <td><button>del</button></td>
        </tr>
        <!-- jq添加区域 -->
    </table>
</body>
</html>

没有做到当输入数据为空时的校验 

案例3：动态留言与删除

4da6ebd668c944f19cfb03ae78f96ca7.png

当鼠标经过删除时，删除变蓝【与js那里的思路相同】 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <style>
        textarea{
            width: 200px;
            height: 50px;
            resize: none;
        }
        li{
            width: 100%;

        }
        li>span{
            /* border: 1px solid ; */
            font-size: 8px;
            text-align: right;
            display: block;
            float: right;
        }
        li>i{
            font-size: 8px;
            color: grey;
            text-decoration: underline;
            display: block;
            /* border: 1px solid ; */
            float: right;
        }
        
    </style>
</head>
<body>
    <script>
        $(function(){
            $('button').click(function(){

                var time=new Date();
                year=time.getFullYear();
                month=time.getMonth()+1;
                day=time.getDate();
                hour=time.getHours();
                minute=time.getMinutes();
                var tm=year+'-'+month+'-'+day+' '+hour+':'+minute;

                console.log(tm);
                var txt=$('textarea').val();
                var li=$('<li></li>');
                li.prepend(txt+'<i>删除</i><span>'+tm+'</span>');
                $('ul').prepend(li);

                $('textarea').val('');
            });
            $('ul').on('mouseover','i',function(){
                $(this).css('color','blue');
            })
            $('ul').on('mouseout','i',function(){
                $(this).css('color','grey');
            })
            $('ul').on('click','i',function(){
                $(this).parent().remove();
            })
        })
    </script>
    <textarea placeholder="请输入"></textarea>
    <button>发布</button>
    <ul>
        <!-- jq生成区域 -->
    </ul>
</body>
</html>

案例4：动态进度条

bb1ab143577c40deaf1e056da0b6c2c0.png

向div中放入一个span，通过不断放大width达到进度条 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <style>
        #jdt{
            color:rgb(73, 246, 205);
            border: 1px solid blueviolet;
            border-radius: 10px;
            width: 100%;
            height: 22px;
            text-align: left;
        }
        span{
            display: block;
            width: 0px;
            height: 100%;
            /* background-color: blueviolet; */
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <script>
        i=0;
        $(function(){
            $('button').click(function(){
                $(this).attr('disabled','disabled');
                // 添加间隔器，当达到100%时退出
                var tms=setInterval(function(){
                    px=++i +'%';

                    if(i > 100){
                        clearInterval(tms);
                        alert('下载完成');
                        return;
                    }

                    // console.log(px);
                    // 改变span的宽度以达到加载的效果
                    var span=$('#jdt>span')
                    span.css('width',px);
                    span.html(px);
                    // 对进度条的进度颜色进行区分
                    if(i < 25){
                        span.css('background-color','rgb(135, 205, 232)');
                    }else if(i < 50){
                        span.css('background-color','rgb(55, 176, 223)');
                    }else if(i < 75){
                        span.css('background-color','rgb(77, 113, 232)');
                    }else{
                        span.css('background-color','rgb(103, 66, 237)');
                    }
                    
                    
                },50);
                
            })
        })
    </script>
    <button>点击下载</button>
    <hr>
    <div id="jdt">
        <span></span>
    </div>
</body>
</html>

案例5：点击三个相同的图片进行消除

902c47d6a42f4412b984e218330354d6.png9747a597528b4d65982f309dfdf90194.png

获取点击到图片的src，为点击到的图片设置一个样式用作标记，若无该标记则加入数组，有则不加入，数组每满三个进行消除，随后清空数组与样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            border: 1px solid;
        }
        img{
            border: 1px solid white;
        }
    </style>
</head>

<body>
    <script>
        // 获取点击到的src，若相同，则
        $(function (){
            var cks = [];  // 存储被点击图片的 src 属性

            $("div").on('click','img',function (){
                var src = $(this).attr("src");
                var col=$(this).css('color');
                console.log(col);
                
                // 设置 条件 ，若没有该样式，添加该样式，并加入数组，否则不加入数组
                if(col != 'rgb(150, 251, 255)'){
                    $(this).css('color','rgb(150, 251, 255)');
                    $(this).css('border','1px solid red');
                    cks.push($(this));
                }
                // 将图片的 src 属性添加到 数组 中
                console.log(cks);
                if(cks.length >= 3){
                    // 当满足三个时，获取它们的路径
                    src1=cks[0].attr('src');
                    src2=cks[1].attr('src');
                    src3=cks[2].attr('src');
                    // 若路径相同，则对其进行隐藏
                    if(src1 == src2 && src2 == src3){
                        cks[0].slideUp();
                        cks[1].slideUp();
                        cks[2].slideUp();
                    }
                    // 无论是否隐藏，去除所有样式，并清空数组为下次的选择做准备
                    $('img').css('color','');//清除颜色
                    $('img').css('border','');//清除边框
                    cks=[];
                }
                console.log(cks.length);
            });
           
        })
    </script>
    <div>
        <img src="02_09.png" alt="">
        <img src="05_05.png" alt="">
        <img src="06_04.png" alt="">
        <img src="09_07.png" alt="">
        <img src="02_09.png" alt=""><br>
        <img src="05_05.png" alt="">
        <img src="06_04.png" alt="">
        <img src="09_07.png" alt="">
        <img src="02_09.png" alt="">
        <img src="05_05.png" alt=""><br>
        <img src="06_04.png" alt="">
        <img src="09_07.png" alt="">
    </div>
</body>

</html>

 

 

柒拾霜染
关注
jQuery动画案例——手风琴、选项卡（点餐）、图片轮播
我的博客
10-10 920
1、 手风琴1 效果描述：每次点击一张图片，放置图片的父容器的宽从小逐渐变大。图片从垂直居中位置逐渐被拉开且前一张图片逐渐消失，被点击父容器内的图片逐渐出现。 效果图： 思路 由于每次点击一张图片，放置图片的父容器的宽从小逐渐变大。图片从垂直居中位置逐渐被拉开，故只需要使用自定义动画改变图片的高、放置图片父容器div的宽、图片的位置、图片的透明度即可。 最开始时先给每一个div父容器设置d...
jQuery的一些动画案例
兜兜的博客
07-30 2033
本文主要写了几个关于jQuery的案例，有手机银行卡的tab切换，手风琴菜单栏制作，手风琴图片展示，淡入淡出图片展示，塔罗钟表以及九宫格抽奖块的制作。
JQuery动画+事例
泠泠似水
02-27 812
1.动画基础隐藏和显示jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果$elem.hide()提供参数：.hide( options )当提供hide方法一个参数时，.hide
Jquery-动画实例
weixin_30517001的博客
03-06 131
scrollLeft 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Page Title</title> 6 <style> 7...
基于JQuery的动画案例-手风琴、动态移动展示效果
qq_42095103的博客
11-14 1115
手风琴效果实际上是一个ul标签下面包含了7个小li标签，然后每一个小li标签下面有两张图片，一个为表面的小图片和被隐藏之后的大图片，然后小图片是以绝对定位显示在小li中，而小li标签是以相对定位排列在ul标签当中；当鼠标进入小li标签时，要让li标签大小变为大图片的大小，同时小图片淡出，大图片淡入，还要注意的是：当前li标签变化时，要还原其他小li标签为小图片的状态。
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
jQuery-动画效果（轮播图案例）
weixin_69036336的博客
10-29 1557
jQuery-动画效果（轮播图案例）
JQuery 入门 - 附案例代码
热门推荐
wuyxinu的博客
12-23 6万+
为什么要学jquery 使用javascript开发过程中，有许多的缺点： 查找元素的方法单一，麻烦。 遍历数组很麻烦，通常要嵌套一大堆的for循环。 有兼容性问题。 想要实现简单的动画效果，也很麻烦 代码冗余。 体验jquery的使用 /* * 1. 查找元素的方法多种多样，非常灵活 * 2. 拥有隐式迭代特性，因此不再需要手写for循环了。 * 3. 完全没有兼容性问题。 * 4. 实现动...
简单易用的jQuery页面切换动画效果
06-10
为什么说是新老结合呢，首先，页面是基于jQuery实现的插件 其次，展现的动画效果依赖于CSS3动画，so，新老结合实现的动画效果 使用方法： 1、将head中的CSS引入到你的网页中 2、将body中的代码部分拷贝到...
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z
12-14
jQuery Mobile快速入门245页完整版.pdf + 所有源码.7z 24H内删除，作者写书非常不容易，如觉得好，请购买纸质书籍，易读易懂！藏书不如读书，读书请买好书，这是好书。 第1章　jquery mobile简介 　1.1　通用访问 ...
JQuery动画与特效实例分析
12-09
本文实例分析了JQuery动画与特效的用法。分享给大家供大家参考。具体分析如下： 显示与隐藏 show(spped,[callback])与hide(spped,[callback]) speed可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms。也可以直接填毫秒数，callback函数为回调函数，动作完成后调用此函数 $("img").show(3000,function(){ $(this).css("border","solid 1px #ccc”); }); toggle()函数，无参格式，在显示和隐藏之间切换 toggle(true o
jquery实例超炫animate动画效果
01-05
jquery实例超炫animate动画效果 demo是原版，效果还是相当炫丽 后面自制了两个
jquery动画导航栏制作实例集，三个漂亮动感菜单.rar
07-09
jQuery制作的动画导航栏，里面包含了三个菜单，每一款都有特点： 范例一特点：用背景图实现(带圆角，注意图的做法，两张或整合成)，主要用于导航栏项目文字长短不一的情况(不定宽!) 范例二特点：用背景图或背景色来实现，导航栏项目为四字。去掉LI中宽度的设置，可用于任何长度的文字。 范例三特点：用下划线实现，导航栏文字字数为四字，去掉或重新设置A标记中的宽度，可用于任何长度的文字。 引入了以下jQuery资源： jquery-1.1.3.1.min.js jquery.easing.min.js jquery.lavalamp.js jquery.lavalamp.min.js
jquery经典实例60例-动画实例
06-01
jquery经典实例60例-动画实例 jquery经典实例60例-动画实例 jquery经典实例60例-动画实例
jquery动画案例分析
weixin_45147894的博客
10-22 229
做成下面的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="jquery.m.
jQuery动画＋案例
cola
11-08 866
语法： hide()隐藏 show()隐藏 $(selector).animate(styles,speed,easing,callback) 案例： //掉落￥ <style> *{ margin: 0; padding:0; } html,body{ width: 100%; height: 100%; }
jQuery实现动画效果的例子
gaolinwu的专栏
02-08 1237
jQuery实现动画效果的例子 一、需求原因 目前jQuery已经是一个比较成熟的框架了，而且基于他的插件也有上百种，本例我手动用jQuery实现一个动画效果的例子。 二、具体实现 jQuery实现动画效果      #test {          position:relative;          width:100px;          heig
jquery animate动画实例，在线预览
快乐每一天
03-08 2121
[size=xx-large][url]http://each.sinaapp.com/born/[/url][/size] [code="html"] 点击商城或者自助投胎可进入！ [/code] [code="js"] jQuery(function($) { init(); }); var init = function() { ...
JQuery 自定义动画案例
李金华的博客
08-05 561
自定义动画     语法： animate(params,[speed],[easing],[fn]);   $('#ani').click(function(){         $('#re').animate(                 {left:"1000", top:"-100",opacity:'0'},
jQuery快速入门与基础实例解析
"jQuery快速入门实例，包括jQuery的基本使用、选择器、链式操作、自定义函数等核心概念。" 在JavaScript的世界里，jQuery是一个非常流行的库，它简化了许多DOM操作和事件处理。本教程旨在帮助初学者快速入门jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值