鼠标移动到按钮,按钮有动态边框
<!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>
页:
[1]