返回jquery动......登陆

jquery动画效果及停止

免҈贵҈姓҈劉҈ 丶 2019-01-02 15:07:16226
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery</title>
    <link rel="stylesheet" href="css/php.css" type="text/css">
    <script src="js/php.js" type="text/javascript
    
    "></script>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;font-size: 22px;}
        div{width: 80%;margin: 0 auto;}
        ul,li{list-style: none;margin: 10px;}
        .con3{width: 100px;height: 100px;border: 1px solid #ccc;}
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#con').css('border','5px solid pink');
            $('.con1').css('box-shadow','5px 5px 10px #888');
            $('.con1').css('border','5px solid #ea5404');

            $('#con > p').css('color','green');
            $('#con p').css('color','orange');
            //匹配.con_li后面的所有兄弟li
            $('.con_li ~ li').css('background','#ccc');

            $('p:contains(www.php.cn)').css('font-weight','blod');
            $('div:empty').css('background','#ea5404');
            $('div:empty').css('color','red');

            $('input[name=jinggege]').css('background','green');
            $('input[name=btn]').css('background','green');
            
            $(':selected').css('background','red');
            $(':checked').parent().css('background','pink');
        })
    </script>
</head>
<body>
    <div>
        php zhongwen wang !
    </div>
    <hr>
    <h1></h1>
    <div></div>
    <h3>jquery动画效果</h3>
    <style>
        h3{margin-bottom: 20px;}
        .jq1,.jq2,.jq3,.jq4{width: 150px;height: 150px;float: left;margin-right: 20px;background: #ea5404;margin-bottom: 20px;}
        #dianji3,#dianji,#dianji2,#dianji4,#dianji5,#dianji6,#dianji7,#dianji8{border: 0px;width: 70px;height: 50px;color: brown;}
        .clear{clear:both;}
    </style>
    <script>
        $(document).ready(function(){
            $('#dianji').click(function(){
                $('.jq1').show(2000,"swing",function(){
                    $('.jq1').css('background','#ccc');
                })
            })
            $('#dianji2').click(function(){
                $('.jq1').hide("slow",function(){
                    $('#dianji2').css({'background':'green'});
                })
            })
            $('#dianji4').click(function(){
                $('.jq3').slideUp("slow",function(){
                    console.log("slide  UP!!!");
                })
            })
            $('#dianji5').click(function(){
                $('.jq3').slideDown(2000,function(){
                    console.log("Slide Down!!");
                })
            })
            $('#dianji3').click(function(){
                $('.jq3').slideToggle("slow",function(){
                    console.log("this is SlideToggle!!");
                })
            })
            $('#dianji6').click(function(){
                $('.jq4').css('position','relative');
                $('.jq4').animate({'left':'+200px','opacity':'0.5','fontSize':'30px'},"slow",function(){
                    console.log("this is animate!");
                })
            })
            $('#dianji7').click(function(){
                $('.jq4').stop();
            })
            $('#dianji8').click(function(){
                $('html,body').animate({scrollTop:0},'slow');
                console.log($('#dianji8').length);
                $(window).scroll(function(){
                    if($(this).scrollTop()<300){
                        $('#dianji8').fadeOut('slow');
                    }
                    else{
                        $('#dianji8').fadeIn('slow');
                    }
                })
            })
        })
    </script>
    <div>show</div>
    <div></div>
    <div>slideup<br>slidedown<br>slidetoggle</div>
    <div>animate</div>
    <br>
    <div></div>
    <input type="button" id='dianji' value="显示">
    <input type="button" id='dianji2' value="隐藏">
    <input type="button" id='dianji4' value="向上滑动">
    <input type="button" id='dianji5' value="向下滑动">
    <input type="button" id='dianji3' value="Toggle">
    <input type="button" id='dianji6' value="Animate">
    <input type="button" id='dianji7' value="Stop">
    <input type="button" id='dianji8' value="ScrollTop">
</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送