jQuery --- 第四期 (jQuery动效)

最新推荐文章于 2024-06-10 21:57:03 发布

weixin_30932215

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cnmoti/p/10788372.html

版权

学习笔记

1.JQuery显示和隐藏动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery显示和隐藏动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            background: green;
            display: none;
        }
    </style>
        <script src="../jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    $("button").eq(0).click(function () {
                        $("div").show(1000);
                    });
                    $("button").eq(1).click(function () {
                        $("div").hide(1000);
                    });
                    $("button").eq(2).click(function () {
                        $("div").toggle(1000);
                    });
                });
        </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
</body>
</html>

2.JQuery对联广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery对联广告</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            display: none;
        }
        .left{
            width: 100px;
            height: 200px;
            float: left;
            position: fixed;
            top: 100px;
            left: 0;
            background: purple;
        }
        .right{
            width: 100px;
            height: 200px;
            float: right;
            position: fixed;
            top: 100px;
            right: 0;
            background: purple;
        }
    </style>
        <script src="../jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    //监听滑轮滚动事件
                    $(window).scroll(function () {
                        //获得滑轮滚动的距离
                        var offset = $("html,body").scrollTop();
                        if(offset >= 200){
                            $("div").show(1000);
                        }else{
                            $("div").hide(1000);
                        }
                    });
                });
        </script>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

3.jQuery展开和收起动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery展开和收起动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 200px;
            background: blue;
            display: none;
        }
    </style>
        <script src="../jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    $("button").eq(0).click(function () {
                        //向下展开
                        $("div").slideDown(1000);
                    });
                    $("button").eq(1).click(function () {
                        //向上收起
                        $("div").slideUp(1000);
                    });
                    $("button").eq(2).click(function () {
                        //展开与收起的切换
                        $("div").slideToggle(1000);
                    });
                });
        </script>
</head>
<body>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<div></div>
</body>
</html>

4.JQuery折叠菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery折叠菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            margin: auto 600px;
            margin-top: 100px;
            border: 1px solid #000;
            list-style: none;
        }
        .nav>li{
            border: 1px solid #000;
        }
        div{
            width: auto;
            height: 100px;
            background: blue;
            display: none;
        }
        .current{
            background: gray;
        }
        .red{
            background: red;
        }
        .orange{
            background: orange;
        }
        .yellow{
            background: yellow;
        }
        .green{
            background: green;
        }
        .purple{
            background: purple;
        }
    </style>
        <script src="../jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    $(".nav>li").click(function () {
                        $(this).children("div").slideDown(1000);
                        $(this).siblings().children("div").slideUp(1000);
                    });
                });
        </script>
</head>
<body>
<ul class="nav">
    <li>红
        <div class="red"></div>
    </li>
    <li>橙
        <div class="orange"></div>
    </li>
    <li>黄
        <div class="yellow"></div>
    </li>
    <li>绿
        <div class="green"></div>
    </li>
    <li>紫
        <div class="purple"></div>
    </li>
</ul>
</body>
</html>

5.jQuery下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery下拉菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            margin: 50px auto;
            width: 300px;
            height: 50px;
            background: red;
        }
        .sub{
            background: orange;
            display: none;
        }
        .sub>li{
            list-style: none;
        }
        .nav>li{
            width: 100px;
            height: 50px;
            list-style: none;
            text-align: center;
            line-height: 50px;
            float: left;
        }
        .current{
            background: gray;
        }
    </style>
        <script src="../jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    /*
                    在jQuery中如果想要执行动画,那么需要在之前调用动画元素的stop方法
                     */
                    $(".nav>li").hover(function () {
                        $(this).addClass("current");
                        $(this).siblings().removeClass("current");
                        $(this).children("ul").stop();
                        $(this).children("ul").slideDown(500);
                    },function () {
                        $(this).removeClass("current");
                        $(this).children("ul").stop();
                        $(this).children("ul").slideUp(500);
                    });
                    $(".sub>li").hover(function () {
                        $(this).addClass("current");
                        $(this).siblings().removeClass("current");
                    },function () {
                        $(this).removeClass("current");
                    });
                });
        </script>
</head>
<body>
<ul class="nav">
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>二级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>三级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>
</body>
</html>

6.jQuery动画的淡入淡出

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery动画的淡入淡出</title>
<style>
    body{background-color: #EBEBEB}
    div{
        width :200px;
        height :200px;
        background-color :red;
        display :none;
    }
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //动画淡入
        $("button").eq(0).click(function(){
            $("div").eq(0).fadeIn(2000,function(){
            });
        });
        //动画淡出
        $("button").eq(1).click(function(){
            $("div").eq(0).fadeOut(2000,function(){
            });
        });
        //淡出入切换
        $("button").eq(2).click(function(){
            $("div").eq(0).fadeToggle(2000,function(){
            })
        });
        //允许渐变为指定的不透明度（0-1）
         $("button").eq(3).click(function(){
            $("div").eq(0).fadeTo(2000,0.5,function(){
            })
        });
    });
</script>
</head>

<body>
    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>
    <button>fadeTo</button>
    <div></div>
</body>
</html>

7.jQuery广告弹窗

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery弹窗广告</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>
    body{background-color: #EBEBEB}
    div{
        width :200px;
        height :200px;
        background-color :red;
        position :fixed;
        right :0;
        bottom :0;
        display:none;
    }
    .span{
        width:40px;
        height:20px;
        position:absolute;
        background-color:green;
        right:0;
        top:0;
    }
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //监听关闭span
       $(".span").click(function(){
           $("div").fadeOut(1000);
       });
       //按照动画队列依次执行
       $("div").stop().slideDown(1000).fadeOut(500).fadeIn(1000);
    });
</script>
</head>

<body>
    <div>
        <span class="span">关闭</span>
    </div>
</body>
</html>

8.JQuery自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery自定义动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
        <script src="../jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    //操作属性
                    $("button").eq(0).click(function () {
                        $("div").stop().animate({
                            width:300,
                            height:300,
                            marginLeft:100
                        },1000,function () {
                        });
                    });
                    //累加属性
                    $("button").eq(1).click(function () {
                        $("div").stop().animate({
                            width:"+=100"
                        },1000,function () {
                        });
                    });
                    //关键字
                    $("button").eq(2).click(function () {
                        $("div").stop().animate({
                            // width:"hide"
                            width:"toggle"
                        },1000,function () {
                        });
                    });
                });
        </script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div></div>
</body>
</html>

9.jQuery的stop方法和delay方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的stop方法和delay方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("button").eq(0).click(function () {

                $("div").animate({// 增加高度动画
                    height:400
                },1000).delay(1000).animate({// 增加宽度动画,延迟一秒
                    width:400
                },1000).delay(1000).animate({// 减少高度动画,延迟一秒
                    height:100
                },1000).delay(1000).animate({// 减少宽度动画,延迟一秒
                    width:100
                },1000);
            });
            $("button").eq(1).click(function () {
                /**
                 * stop()方法:
                 *      第一个参数:是否停止所有动画
                 *      第二个参数:是否立即完成当前动画
                 */
                //立即结束当前动画,继续下一个动画
                // $("div").stop();
                //停止所有动画
                // $("div").stop(true);
                $("div").stop(true,false);
                //停止所有动画,并立即完成当前动画
                // $("div").stop(true,true);
                //立即完成当前动画,并继续下一个动画
                // $("div").stop(false,true);
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<button>停止动画</button>
<div></div>
</body>
</html>

10.JQuery无限循环滚动广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery无限循环滚动广告</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid #000;
            overflow: hidden;
        }
        ul{
            width: 1200px;
            height: 400px;
            background: black;
        }
        ul>li{
            list-style: none;
            float: left;
        }
        .one{
            width: 200px;
            height: 400px;
            background: green;
        }
        .two{
            width: 200px;
            height: 400px;
            background: orange;
        }
        .three{
            width: 200px;
            height: 400px;
            background: red;
        }
        .fore{
            width: 200px;
            height: 400px;
            background: yellow;
        }
    </style>
        <script src="../jquery-1.12.4.js"></script>
        <script>
                $(function () {
                    var offect = 0;
                    var timer;
                    function autoPlay() {
                        timer = setInterval(function () {
                            offect += -10;
                            if(offect <= -800){
                                offect = 0;
                            }
                            $("ul").css("marginLeft",offect);
                        },0.01);
                    }
                    autoPlay();
                    $("li").hover(function () {
                        //停止滚动
                        clearInterval(timer);
                        //为所有未被选中的添加蒙版
                        $(this).siblings().fadeTo(100,0.5);
                        //去除当前的蒙版
                        $(this).fadeTo(100,1);
                    },function () {
                        //恢复滚动
                        autoPlay();
                        //去除所有蒙版
                        $("li").fadeTo(100,1);
                    });
                });
        </script>
</head>
<body>
<div>
    <ul class="ad">
        <li class="one"></li>
        <li class="two"></li>
        <li class="three"></li>
        <li class="fore"></li>
        <li class="one"></li>
        <li class="two"></li>
    </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/cnmoti/p/10788372.html

weixin_30932215

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery --- 第四期 (jQuery动效)

学习笔记1.JQuery显示和隐藏动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery显示和隐藏动画</title> <style> *{ ...
复制链接

扫一扫