jquery动画，导航条功能1月24日 - 作业

Home > List of blog posts > jquery动画，导航条功能1月24日

Blogger Information

Blog 22

fans 0

comment 0

visits 13164

Special Recommendation

More>

Related recommendations

动画效果实例

<!DOCTYPE html>
<html>
<head>
   <title>练习</title>
   <link rel="icon" type="image/x-icon" href="images/2.png"> 
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <style type="text/css">
     *{margin:0;padding: 0; }
      .content{margin:20px;font-size:20px;color: #fff;float: left; }
      .content p{height: 160px;width: 200px;background: red;text-align: center;line-height: 160px;position: relative;}
      .content button{height: 40px;width: 200px;border:none;}
      #box{width: 95px;height: 40px;border:none;}
      #text{text-shadow: 3px 3px 3px #ff6500;color: #fff;font-size: 25px;}
   </style>
</head>
<body> 
<div class="content">
   <button class="btu1">点我隐藏</button>
   <p class="box1">~ 我是hide ~</p>
</div>
<div class="content">
   <button class="btu2">点我显示</button>
   <p class="box2">~ 我是show ~</p>
</div>
<div class="content">
   <button class="btu3">事件切换</button>
   <p class="box3">~ 我是toggle ~</p>
</div>
<div class="content">
   <button class="btu4">淡入元素</button>
   <p class="box4">~ 我是fadeIn ~</p>
</div>
<div class="content">
   <button class="btu5">淡出元素</button>
   <p class="box5">~ 我是fadeOut ~</p>
</div>
<div class="content">
   <button class="btu6">淡出到指定值</button>
   <p class="box6">~ 我是fadeOut ~</p>
</div>
<div class="content">
   <button class="btu7">下滑效果</button>
   <p class="box7">~ 我是slideDown~</p>
</div>
<div class="content">
   <button class="btu8">上滑效果</button>
   <p class="box8">~ 我是slideUp ~</p>
</div>
<div class="content">
   <button class="btu9">动画效果</button>
   <p class="box9">~ 我是animate ~</p>
</div>
<div class="content ">
   <button class="btu10" id="box">动画效果</button>  <button class="btu11" id="box">停止动画</button>
   <p class="box10">~ 我是animate ~</p>
</div>
<div class="content">
   <button class="btu12">callback</button>
   <p class="box12">~ 我是callback ~</p>
</div>
<div class="content">
        <button class="btu13">callback</button>
        <p class="box13">~ 更改函数 ~</p>
     </div>
<script>
    $(function(){
        //jquery显示/隐藏
        // hide(speed,cllback)隐藏显示元素
        $('.btu1').click(function(){
            $('.box1').hide(1000)
        })
        $('.box2').hide()
        $('.btu2').click(function(){
            $('.box2').show(1000)
        })
        // toggle（speed，caback）事件切换 显示被隐藏元素，并隐藏已显示元素
        $('.btu3').click(function(){
            $('.box3').toggle()
        })
        //淡入淡出效果
        //jquery是通过控制不透明的变化来空值匹配到的元素的淡入淡出的效果
        //fadeIn（speed，callback）用于淡入已隐藏的元素；
        $('.box4').hide()
        $('.btu4').click(function(){
            $('.box4').fadeIn(3000)
        })
        //fadeOut用于淡出可见元素
        $('.btu5').click(function(){
            $('.box5').fadeOut(3000)
        })
        //fadeTo(speed, opacity callback)把所有匹配到元素的不透明度以渐进方式调整到指定不透明度；
        //opacity;fadeTo()方法中必须参数，控制淡入淡出的效果的不透明度（值介于0与1之间）
        $('.btu6').click(function(){
            $('.box6').fadeTo(3000,0.1)
        })
        //滑动效果
        // slideDown（speed，callback）通过高度的变化，向下增大的动态效果 下滑效果；
        $('.box7').hide()
        $('.btu7').click(function(){
            $('.box7').slideDown(2000)
        })
        $('.btu8').click(function(){
            $('.box8').slideUp(2000)
        })
        //动画效果
        //animate（speed，callback）方法用于创建自定义动画
        // 语法：$(selector).anmiate({params},speed,callback);
        $('.btu9').click(function(){
            $('.box9').animate({fontSize:30},500)
        })
        $('.btu10').click(function(){
            $('.box10').animate({
                left:'400px',
                opacity:'0.3',
                width:'200px',
                height:'200px',
                leftHeight:'200px'
            },5000)
        })
        // 停止动画



        // stop（）方法用于停止动画或效果，在他们完成之前，该方法适用于所有jquery效果函数，包括滑动/淡入淡出和自定义动画
        $('.btu11').click(function(){
            $('.box10').stop()
        })
    })
</script>
</body>
</html>

运行实例 »

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

总结：

hide(speed,cllback)隐藏显示元素

$('.btu1').click(function(){
            $('.box1').hide(1000)
        })
        $('.box2').hide()
        $('.btu2').click(function(){
            $('.box2').show(1000)
        })

toggle（speed，caback）事件切换显示被隐藏元素，并隐藏已显示元素

$('.btu3').click(function(){
            $('.box3').toggle()
        })

fadeIn（speed，callback）用于淡入已隐藏的元素；

$('.box4').hide()
        $('.btu4').click(function(){
            $('.box4').fadeIn(3000)
        })

fadeOut用于淡出可见元素

$('.btu5').click(function(){
            $('.box5').fadeOut(3000)
        })

fadeTo(speed, opacity callback)把所有匹配到元素的不透明度以渐进方式调整到指定不透明度
```
$('.btu6').click(function(){
            $('.box6').fadeTo(3000,0.1)
        })
```
slideDown（speed，callback）通过高度的变化，向下增大的动态效果下滑效

$('.box7').hide()
        $('.btu7').click(function(){
            $('.box7').slideDown(2000)
        })
        $('.btu8').click(function(){
            $('.box8').slideUp(2000)
        })

7.animate（speed，callback）方法用于创建自定义动画

$('.btu9').click(function(){
            $('.box9').animate({fontSize:30},500)
        })
        $('.btu10').click(function(){
            $('.box10').animate({
                left:'400px',
                opacity:'0.3',
                width:'200px',
                height:'200px',
                leftHeight:'200px'
            },5000)
        })

导航条实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css">
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100%;
        height: 70px;
        background: #f5f5f5;
        box-shadow: 1px 1px 10px #ccc;
        line-height: 70px;
        position: relative;
        top: -65px;
    }
    form{
        width: 800px;
        margin:0 auto;
        line-height: 70px;
        position: relative;
    }
    input{
        width: 800px;
        height: 35px;
        border: 0;
        border-radius: 4px;
        padding-left: 15px;
    }
    form i{
        position: absolute;
        right: 10px;
        top: 0px;
    }
    .layui-icon{
        font-size: 23px;
    }
    span{
        position: absolute;
        width: 48px;
        height: 48px;
        display: block;
        background: url(show.jpg) -64px 168px;
        right:0;   
    }
    .menu{
        width: 1000px;
        height: 40px;
        line-height: 40px;
        margin: 20px auto;
        background: #f5f5f5;
    }
    .menu li{
        float: left;
        text-align: center;
        width: 10%;
        font-weight: bold;
    }
    .one li:hover a{
        color: #fff;
    }
    .two{
        position: relative;
    }
    .ba{
        position: absolute;
        width: 100px;
        height: 3px;
        background: #ff6500;
        top: 37px;
    }
    .three{
        position: relative;
    }
    .three li{
        position: relative;
    }
    .three li ul{
        position: relative;
        width: 100px;
        box-shadow: 0 2px 5px #f5f5f5;
        display: none;
        top: -1px;
    }
    .three li ul li{
        width: 100px;
        line-height: 40px;
    }
    .three li ul li:hover{
        background: #f5f5f5;
    }
    .layui-icon{
        font-size: 13px;
        margin-left: 7px;
    }
    </style>
</head>
<body>
    <div class="box">
                <form>
                    <input type="text" placeholder="# 请输入关键词 #">
                    <i class="layui-icon"></i>
                </form>
                <span></span>
    </div>
    <ul class="menu one"> 
            <li name="0"><a href="">要闻</a></li>
            <li name="1"><a href="">国际</a></li>
            <li name="2"><a href="">国内</a></li>
            <li name="3"><a href="">社会</a></li>
            <li name="4"><a href="">军事</a></li>
            <li name="5"><a href="">娱乐</a></li>
            <li name="6"><a href="">体育</a></li>
            <li name="7"><a href="">汽车</a></li>
            <li name="8"><a href="">科技</a></li>
            <li name="9"><a href="">其他</a></li>
        </ul>
        <ul class="menu two"> 
                <li name="0"><a href="">要闻</a></li>
                <li name="1"><a href="">国际</a></li>
                <li name="2"><a href="">国内</a></li>
                <li name="3"><a href="">社会</a></li>
                <li name="4"><a href="">军事</a></li>
                <li name="5"><a href="">娱乐</a></li>
                <li name="6"><a href="">体育</a></li>
                <li name="7"><a href="">汽车</a></li>
                <li name="8"><a href="">科技</a></li>
                <li name="9"><a href="">其他</a></li>
                <div class="ba"></div>
            </ul>
            <ul class="menu three"> 
                    <li name="0"><a href="">要闻</a></li>
                    <li name="1"><a href="">国际</a></li>
                    <li name="2"><a href="">国内</a></li>
                    <li name="3"><a href="">社会</a></li>
                    <li name="4"><a href="">军事</a></li>
                    <li name="5"><a href="">娱乐</a></li>
                    <li name="6"><a href="">体育</a></li>
                    <li name="7"><a href="">汽车</a></li>
                    <li name="8"><a href="">科技</a></li>
                    <li><a href="">其他</a><i class="layui-icon layui-icon-up"></i>
                        <ul>
                            <li><a href="">傻的吗？</a></li>
                            <li><a href="">傻的吗？</a></li>
                            <li><a href="">傻的吗？</a></li>
                        </ul>
                    </li>
            </ul>
    <script>
        $(function(){
            // focus获得焦点
            $('input').focus(function(){
                $(this).css('box-shadow','0 0 5px #ff6500 inset')
            })
            // blur失去焦点
            $('input').blur(function(){
                $(this).css('box-shadow','')
            })
            $('.box').hover(
            function(){
                //向上滑动，只要用到animate方法也要用stop，stop就是只要鼠标移出，立即停止当前的动画效果
                $(this).stop().animate({'top':'2px'},500)
            },
            function(){
                // 向下滑动
                $(this).stop().animate({'top':'-65px'},500)
            })

            // 第一个导航
            $('.one>li').hover(function(){
                $(this).css('background','#ff6500')
            },function(){
                $(this).css('background','#f5f5f5')
            })

            // 第二个导航
            $('.two>li').hover(function(){
                $x=parseInt($(this).attr('name'))*100
                $('.ba').stop().animate({left:$x+'px'},300)
            },function(){
                $('.ba').stop().animate({left:'0'},300)
            })

            // 第三个导航
            $('.three ul').hide()
            $('.three>li').hover(function(){
                $(this).find('i').attr('class',"layui-icon layui-icon-down")
                $(this).find('ul').slideDown(300)
            },function(){
                $(this).find('i').attr('class',"layui-icon layui-icon-up")
                $(this).find('ul').slideUp()
            })
        })
    </script>
</body>
</html>

运行实例 »

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

总结：

导航条1：隐藏，下滑

$('input').focus(function(){
                $(this).css('box-shadow','0 0 5px #ff6500 inset')
            })
            // blur失去焦点
            $('input').blur(function(){
                $(this).css('box-shadow','')
            })
            $('.box').hover(
            function(){
                //向上滑动，只要用到animate方法也要用stop，stop就是只要鼠标移出，立即停止当前的动画效果
                $(this).stop().animate({'top':'2px'},500)
            },
            function(){
                // 向下滑动
                $(this).stop().animate({'top':'-65px'},500)
            })

导航条2：鼠标移到元素上改变背景颜色

$('.one>li').hover(function(){
                $(this).css('background','#ff6500')
            },function(){
                $(this).css('background','#f5f5f5')
            })

导航条3：鼠标移到元素上移动span

$('.two>li').hover(function(){
                $x=parseInt($(this).attr('name'))*100
                $('.ba').stop().animate({left:$x+'px'},300)
            },function(){
                $('.ba').stop().animate({left:'0'},300)
            })

导航条4：

$('.three ul').hide()
            $('.three>li').hover(function(){
                $(this).find('i').attr('class',"layui-icon layui-icon-down")
                $(this).find('ul').slideDown(300)
            },function(){
                $(this).find('i').attr('class',"layui-icon layui-icon-up")
                $(this).find('ul').slideUp()
            })

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

关于DOM

2019-01-21 09:01:57