想要的效果是鼠标移入移出是图片放大缩小，这种方法为什么不行啊
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#wed{ width:270px; height:480px;border:1px solid rgba(153,153,153,1);background-image:url(123.JPG)}
</style>
</head>
<body>
<div id="wed" onMouseOver="bigg()" onMouseOut="smal()">
</div>
<script>
var wed=document.getElementById("wed");
// wed.style.backgroundImage="123.JPG";
//alert(wed.style.width)
function bigg(){
do(wed.style.width=wed.offsetWidth+5+"px")
while(wed.offsetWidth>540)
do(wed.style.height=wed.offsetHeight+20+"px")
while(wed.offsetHeight>960)
setTimeout(bigg,10)
}
/**/function smal(){
do(wed.style.width=wed.offsetWidth-5+"px")
while(wed.offsetWidth<270)
do(wed.style.height=wed.offsetHeight-20+"px")
while(wed.offsetHeight<480)
setTimeout(smal,10)
}
</script>
</body>
</html>
Echo_Chien2回答
-
qq_非诚勿扰_3
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#wed{ width:270px; height:480px; border:1px solid rgba(153,153,153,1); background-image:url(123.JPG) -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}#wed:hover{ width:540px; height:960px;}</style></head><body><div id="wed"></div></body></html>不知道这样行不行
随时随地看视频慕课网APP
相关分类
JavaScript