search

博客列表 >第4期学习班-1.24作业-【JQuery-动画效果】-【补作业-JQuery-日期时间-钟表】-【JQuery-导航1-顶部渐隐渐显导航】-【JQuery-导航2-背景变色】-【JQuery-导航3-下划线跟随】-【JQuery-导航4-下拉菜单】

第4期学习班-1.24作业-【JQuery-动画效果】-【补作业-JQuery-日期时间-钟表】-【JQuery-导航1-顶部渐隐渐显导航】-【JQuery-导航2-背景变色】-【JQuery-导航3-下划线跟随】-【JQuery-导航4-下拉菜单】

八七乱乱
八七乱乱原创
2019年02月01日 20:58:57767浏览

实例1.JQuery-动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery-动画效果</title>
    <script src="../jquery-3.3.1.js" type="javascript"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!--网络调用，简单方便，如果没网就无法使用-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            justify-content: center
        }

        .flex {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            width: 900px;

        }

        .content {
            flex: 24%;
            margin-right: 10px;
            margin-top: 10px;
            height: 200px;
            display: flex;
            flex-flow: column;
            position: relative;

        }

        button {
            width: 100%;
            border: none;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
        }

        .content > div {
            background-color: red;
            width: 100%;
            height: 170px;
            position: absolute;
            top: 30px;
        }

    </style>
</head>
<body>
<div class="flex">
    <div class="content">
        <button class="btn1">点我隐藏</button>
        <div class="box1">可以使用 hide() 方法来隐藏 HTML 元素</div>
    </div>
    <div class="content">
        <button class="btn2">点我显示</button>
        <div class="box2">可以使用 show() 方法来显示 HTML 元素</div>
    </div>
    <div class="content">
        <button class="btn3">事件切换</button>
        <div class="box3">通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。</div>
    </div>
    <div class="content">
        <button class="btn4">淡入动画</button>
        <div class="box4">fadeIn()动作</div>
    </div>
    <div class="content">
        <button class="btn5">淡出动画</button>
        <div class="box5">fadeOut()动作</div>
    </div>
    <div class="content">
        <button class="btn6">淡入淡出切换</button>
        <div class="box6">fadeToggle()事件</div>
    </div>
    <div class="content">
        <button class="btn7">设置透明度</button>
        <div class="box7">格式：<br>$(元素).fadeTo(时长,透明度,callback);<br>
            效果的时长可取以下值："slow"、"fast" 或毫秒。<br>
            淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
        </div>
    </div>
    <div class="content">
        <button class="btn8">上滑动方法</button>
        <div class="box8">slideUp() 方法用于向上滑动元素。</div>
    </div>
    <div class="content">
        <button class="btn9">下滑动方法</button>
        <div class="box9">slideDown() 方法用于向下滑动元素。</div>
    </div>
    <div class="content">
        <button class="btn10">滑动切换方法</button>
        <div class="box10">slideToggle() 方法用于滑动动画切换。</div>
    </div>
    <div class="content">
        <button class="btn11">动画方法</button>
        <div class="box11"> animate() 方法用于创建自定义动画。<br>
            animate({params},speed,callback);<br>
            必需的 params 参数定义形成动画的 CSS 属性。<br>
            可选的 speed 参数规定效果的时长<br>
            可选的 callback 参数是动画完成后所执行的函数名称。
        </div>
    </div>
    <div class="content">
        <button class="btn12">停止动画方法</button>
        <div class="box12"> stop() 方法用于停止动画。</div>
    </div>
    <div class="content">
        <button class="btn13">Callback 方法</button>
        <div class="box13"> Callback 函数在当前动画 100% 完成之后执行。</div>
    </div>
</div>
<script>
    $(function () {
        $('.box2').hide();
        $('.box4').hide();
        $('.box9').hide();
        $('.btn1').click(function () {
            $('.box1').hide();
        });
        $('.btn2').click(function () {
            $('.box2').show();
        });
        $('.btn3').click(function () {
            $('.box3').toggle();
        });
        $('.btn4').click(function () {
            $('.box4').fadeIn();
        });
        $('.btn5').click(function () {
            $('.box5').fadeOut();
        });
        $('.btn6').click(function () {
            $('.box6').fadeToggle();
        });
        $('.btn7').click(function () {
            $('.box7').fadeTo(2000, 0.5);
        });
        $('.btn8').click(function () {
            $('.box8').slideUp();
        });
        $('.btn9').click(function () {
            $('.box9').slideDown();
        });
        $('.btn10').click(function () {
            $('.box10').slideToggle();
        });
        $('.btn11').click(function () {
            $('.box11').animate({opacity: '0.5', width: '100px', height: '100px', left: '95px', top: '65px'});
        });
        $('.box12').slideUp(5000);
        $('.btn12').click(function () {
            $('.box12').stop();
        });
        $('.btn13').click(function () {
            $('.box13').slideUp(1500,function () {
                alert('动画已完成');
            });
        });
    })
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>补作业-JQuery-钟表盘</title>
    <script src="../jquery-3.3.1.js" type="javascript"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!--网络调用，简单方便，如果没网就无法使用-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
            justify-content: center
        }

        .pan {
            background-image: url("http://demo.54moto.com/1-24/images/clock.jpg");
            width: 600px;
            height: 600px;
            position: relative;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;

        }

        .img-hou {
            background-image: url("http://demo.54moto.com/1-24/images/hour.png");
            width: 30px;
            height: 600px;
            position: absolute;

        }

        .img-min {
            background-image: url("http://demo.54moto.com/1-24/images/minute.png");
            width: 30px;
            height: 600px;
            position: absolute;
        }

        .img-sec {
            background-image: url("http://demo.54moto.com/1-24/images/second.png");
            width: 30px;
            height: 600px;
            position: absolute;
        }


    </style>
</head>
<body>
<div class="pan">
    <div class="img-hou"></div>
    <div class="img-min"></div>
    <div class="img-sec"></div>
</div>
<script>
    $(function () {
        function tiem() {
            var mydate = new Date();
            var hou = mydate.getHours();
            var min = mydate.getMinutes();
            var sec = mydate.getSeconds();
            var h = hou * 6 + min / 2;
            var m = min * 6 + sec / 10;
            var s = sec * 6;
            $('.img-hou').css('transform', 'rotate(' + h + 'deg)');
            $('.img-min').css('transform', 'rotate(' + m + 'deg)');
            $('.img-sec').css('transform', 'rotate(' + s + 'deg)');
        }
        setInterval(tiem, 1000);
    })
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

实例3.JQuery-顶部渐隐渐显导航效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery-实例-导航条</title>
    <script src="../jquery-3.3.1.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1030938_w2os3gpgxz.css">

</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .topbox {
        width: 100%;
        background-color: #f5f5f5;
        padding: 15px 0;
        box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.2);
        position: relative;
        top: -60px;

    }

    form {
        position: relative;
        width: 700px;
        padding: 0;
        margin: 0 auto;
    }

    .icon-fangdajing {
        font-size: 25px;
        color: #aaa;
        position: absolute;
        top: 5px;
        left: 5px;
    }

    input {
        width: 100%;
        height: 35px;
        line-height: 35px;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        padding-left: 35px;

    }

    .img, .img2 {
        font-size: 45px;
        color: #ccc;
        position: absolute;
        right: 50px;
        top: 63px;
    }

    /*上，下方向的两个图标重叠在一起*/
    .img2 {
        opacity: 0;
        /*上图标透明度默认为0*/
    }

    .boxshadw {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
        /*内阴影样式*/
    }
</style>
<body>
<div class="topbox">
    <form action="">
        <input type="text" placeholder="#请输入需要查询的关键词。#">
        <i class="iconfont icon-fangdajing "></i>
    </form>
    <i class="img iconfont icon-down-circle-fill"></i>
    <i class="img2 iconfont icon-up-circle-fill"></i>
</div>
<script>
    $('input').hover(function () {
        /*hover()事件，鼠标划过输入框，加上内阴影样式，划出则删除该样式*/
        $(this).addClass('boxshadw');
    }, function () {
        $(this).removeClass('boxshadw');
    });
    $('.topbox').hover(function () {
        //当鼠标划过顶部导航时，
        $('.topbox').stop().animate({top: '0px'});
        //顶部导航回到top原点动画
        // $('.img').removeClass('icon-down-circle-fill');
        //删除下箭头的类
        // $('.img').addClass('icon-up-circle-fill');
        //增加上箭头的类
        $('.img').stop().animate({opacity: '0'}, 1000);
        //下图标透明度动画变0，1秒时间
        $('.img2').stop().animate({opacity: '1'}, 1000);
        //给上图标透明度为1，1秒动画
    }, function () {
        //当鼠标划出时
        $('.topbox').stop().animate({top: '-60px'});
        //导航回到原起点
        $('.img').stop().animate({opacity: '1'}, 1000);
        //下图标透明度动画变1，1秒时间
        $('.img2').stop().animate({opacity: '0'}, 1000);
        //给上图标动画透明度为0，1秒时间
    });
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

学习思路

使用JQuery中的hover()方法，鼠标滑入，滑出就有两种动作可以实现。

图标全部是使用啊里字体，方便好用。

布局定位很简单，图标的定位是使用绝对定位实现。

导航背景做为父元素，使用相对定位，图标子元素以绝对定位，那么图标的定位就以是父元素的位置进行定位的。

表单输入框滑入时有内阴影，使用的是addClass()方法，增加内阴影的样式，鼠标滑出时，删除增加的内阴影样式即可。

导航默认定位为负值，鼠标划过时，使用animate()动画方法，设置定位，以动画的方式呈现，滑出时也是以动画形式返回。

上下箭头的一开始也是使用addClass()方法，滑入删除下箭头样式，增加上箭头样式，滑出反之。

后来想以动画的方式呈现，就将上下箭头做成两个图标，相同的定位，默认上箭头透明度为0。

鼠标滑入时，下箭头透明度动画变0，上箭头透明度动画变1，滑出时动画反之。

 

实例4.JQuery-添加样式导航背景变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery-实例-导航条2</title>
    <script src="../jquery-3.3.1.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1030938_w2os3gpgxz.css">
    <style>
        nav {
            position: relative;
            top: 100px;
            width: 900px;
            height: 35px;
            display: flex;
            margin: 0 auto;
            justify-content: space-around;
        }

        a {
            flex: 1;
            line-height: 35px;
            text-align: center;
            text-decoration: none;
            color: #000;
            background: #f5f5f5;
        }
.red{
    background-color: indianred;
}
    </style>
</head>
<body>
<nav>
    <a href="">栏目</a>
    <a href="">栏目</a>
    <a href="">栏目</a>
    <a href="">栏目</a>
    <a href="">栏目</a>
    <a href="">栏目</a>
    <a href="">栏目</a>
    <a href="">栏目</a>
    <a href="">栏目</a>
    <a href="">栏目</a>
</nav>
<script>
    $(function () {
        $('a').hover(function () {
            $(this).addClass('red')
        }, function () {
            $(this).removeClass('red')
        })
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

实例5.JQuery-导航下线跟随动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery-实例-导航条3</title>
    <script src="../jquery-3.3.1.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1030938_w2os3gpgxz.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        nav {
            position: relative;
            top: 100px;
            width: 1000px;
            height: 35px;
            margin: 0 auto;
        }

        a {
            display: inline-block;
            width: 100px;
            line-height: 35px;
            text-align: center;
            text-decoration: none;
            color: #000;
            background: #f5f5f5;
        }

        .line {
            position: absolute;
            height: 3px;
            width: 100px;
            top: 32px;
            background-color: red;
        }

        .red {
            background-color: indianred;
        }
    </style>
</head>
<body>
<nav>
    <a href="" name="0">主页</a><a href="" name="1">新闻</a><a href="" name="2">国内</a><a href="" name="3">社会</a><a href=""
                                                                                                               name="4">军事</a><a
        href="" name="5">娱乐</a><a href="" name="6">体育</a><a href="" name="7">汽车</a><a href="" name="8">科技</a><a href=""
                                                                                                                name="9">其他</a>
    <div class="line"></div>
</nav>
</body>
<script>
    $(function () {
        $('a').hover(function () {
            $x = parseInt($(this).attr('name') * 100);
            /* parseInt() 函数可解析一个字符串，并返回一个整数。
               将每个a中的namew值取出来，转换成整数，*100，就是对应每个导航所在的X坐标位置。
            */
            $('.line').stop().animate({left: $x + 'px'}, 300)
            //  设置线条的动画，左边位置为刚刚计算的坐标
        }, function () {
            $('.line').stop().animate({left: '0'}, 300)
            //鼠标滑出时，线条的左边位置为0
        })
    })
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例6.下拉菜单导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery-实例-导航条4</title>
    <script src="../jquery-3.3.1.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1030938_82sn09xfzbv.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        nav {
            position: relative;
            top: 100px;
            width: 1000px;
            height: 35px;
            margin: 0 auto;
        }

        ul {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }

        li {
            flex: 1;
            list-style-type: none;
            position: relative;
        }

        dl {
            width: 100px;
            position: absolute;
            display: none;
            border: 1px solid #eee;
            top: 31px;
        }

        dd {
            line-height: 30px;
            text-align: center;
        }

        a {
            display: inline-block;
            width: 100px;
            line-height: 35px;
            text-align: center;
            text-decoration: none;
            color: #000;
        }

        li > a {

            background: #eee;
        }

        dl > dd:nth-child(1) a {
            padding-top: 5px;
        }
        dd>a:hover{
            background: palevioletred;
        }

    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="" name="0">主页</a></li>
        <li><a href="" name="1">新闻</a></li>
        <li><a href="" name="2">国内</a></li>
        <li><a href="" name="3">社会</a></li>
        <li><a href="" name="4">军事</a></li>
        <li><a href="" name="5">娱乐</a></li>
        <li><a href="" name="6">体育</a></li>
        <li><a href="" name="7">汽车</a></li>
        <li><a href="" name="8">科技</a></li>
        <li class="xiala"><a href="" name="9">其他<i class="ico iconfont icon-shang"></i></a>
            <dl>
                <dd><a href="">子菜单</a></dd>
                <dd><a href="">子菜单</a></dd>
                <dd><a href="">子菜单</a></dd>
                <dd><a href="">子菜单</a></dd>
            </dl>
        </li>
    </ul>
</nav>
</body>
<script>
    $(function () {
        $('.xiala').hover(function () {
            /*  鼠标划过时，删除上箭头图标，添加上箭头图标样式，设置下拉菜单的下拉动画，鼠标滑出时，动画反过来*/
            $('.xiala i').removeClass('icon-shang');
            $('.xiala i').addClass('icon-xia');
            $('.xiala dl').slideDown(300);
        }, function () {
            $('.xiala i').removeClass('icon-xia');
            $('.xiala i').addClass('icon-shang');
            $('.xiala dl').slideUp(300);
        })
    })
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


 

上一条：第4期学习班-1.25作业-【仿PHP中文网主页】下一条：NLPIR智能语义：大数据挖掘需要科学的操作才能实现
作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多