鼠标移动到按钮,按钮有动态边框

waitforlove · 发表于 2018-10-12 15:02:05

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
<head>
        <title>jq动画按钮</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/js库/jquery-2.1.0.js"></script>
        <script type="text/javascript">
                var qq=0;
                $(function(){
                        $("#div2").css("transform","scale(0)");
                        $("#btn1").hover(dhuaup,dhuadn);
                });
                function dhuaup(){
                        $("#div2").css("transform","scale("+qq+")");
                        if(qq<1.2){
                                qq+=0.1;
                                requestAnimationFrame(dhuaup);
                        };
                };
                function dhuadn(){
                        $("#div2").css("transform","scale("+qq+")");
                        if(qq>0){
                                qq-=0.1;
                                requestAnimationFrame(dhuadn);
                        };
                };
        </script>
        <style type="text/css">
                #div2{
                        width:61px;
                        height:31px;
                        border: 1px solid white;
                        position:absolute;
                        margin: 8px 8px;
                }
                #btn1{
                        width: 60px;
                        height:30px;
                        position:absolute;
                        margin: 10px 10px;

                }
                body{
                        background-color: black;
                }
                div{
                        width: 80px;
                        height:50px;
                        margin:20px 45%;
                        /*border: 1px solid red;*/
                }

        </style>
</head>
<body>
        <div id="div1"><p id="div2" ></p><input type="button" value="按钮" id="btn1"></div>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 鼠标移动到按钮,按钮有动态边框

马上注册，结交更多好友，享用更多功能^_^