javascript--纯JS在JQUERY中实现动画效果（实现后的效果整理）--PHP中文网问答
最编程
2024-05-23 22:23:20
...
如题，自己试着用纯JS写了下面代码，实现鼠标一上去p宽和高的值增大的动画效果。但是一直报错，特意来向各位大神请教，和希望给点思路，如何才能更好的实现。。。。。（现在效果实现了，但是还是有些问题，就是不能随意的移开鼠标开始缩回，鼠标放回开始放大，求大神，给个思路和建议，还有就是感觉我这样写特别笨，有没更简洁的方式。。。。。）
<!DOCTYPE html>
<html>
<head>
<title>纯JS实现animate</title>
<meta charset = "utf-8">
<style>
#change {width:100px;height:100px;background-color: red;margin:100px auto;}
</style>
</head>
<body>
<p id = "change"></p>
</style>
<script type="text/javascript">
function animateself (int){
var p = document.getElementById("change");
p.addEventListener("mouseover",function(){
var timer = setInterval(function(){
var wid = window.getComputedStyle(p,null).getPropertyValue("width");
var heig = window.getComputedStyle(p,null).getPropertyValue("height");
//alert(wid);
heig = heig.replace("px","");
heig = parseInt(heig);
wid = wid.replace("px","");
wid = parseInt(wid);
p.style.width = (wid+1)+"px";
p.style.height = (heig+1)+"px";
//p.style.width = "200px"
//alert(wid);
if(wid>=int&&heig>=int){
clearInterval(timer);
}
},1)
})
p.addEventListener("mouseout",function(){
var timer = setInterval(function(){
var wid = window.getComputedStyle(p,null).getPropertyValue("width");
var heig = window.getComputedStyle(p,null).getPropertyValue("height");
//alert(wid);
heig = heig.replace("px","");
heig = parseInt(heig);
wid = wid.replace("px","");
wid = parseInt(wid);
p.style.width = (wid-1)+"px";
p.style.height = (heig-1)+"px";
//p.style.width = "200px"
//alert(wid);
if(wid<=100&&heig<=100){
clearInterval(timer);
}
},1)
})
}
animateself(500);
</script>
</body>
</html>