为了账号安全,请及时绑定邮箱和手机立即绑定

想要的效果是鼠标移入移出是图片放大缩小,这种方法为什么不行啊

想要的效果是鼠标移入移出是图片放大缩小,这种方法为什么不行啊

Echo_Chien 2016-08-09 11:13:10
<!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>
查看完整描述

2 回答

?
qq_非诚勿扰_3

TA贡献37条经验 获得超16个赞

<!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>

不知道这样行不行

查看完整回答
1 反对 回复 2016-08-09
  • Echo_Chien
    Echo_Chien
    主要是使用onmouseover和onmouoseout以及定时器
  • 2 回答
  • 0 关注
  • 1587 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信