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

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>

复制代码

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

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