css实现鼠标放到图片上慢慢变大
学习啦在线学习网 学习前端的同学你们知道怎么实现鼠标放到图片上慢慢变大的效果吗?不知道的话跟着学习啦小编一起来学习实现鼠标放到图片上慢慢变大的效果吧。
实现鼠标放到图片上慢慢变大的效果的方法
<html>
学习啦在线学习网 <head>
学习啦在线学习网 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
学习啦在线学习网 <title>网页特效观止|www.jscode.cn| --- 鼠标放到图片上慢慢变大，移开后图片又慢慢变小</title>
</head>
<body>
学习啦在线学习网 <img id=MainImg onmouseover=max() onmouseout=min() src=http://www.jscode.cn/JsCode/images/flag.gif width="85" height="55">
<script>
var i=0
//变大
学习啦在线学习网 function max(){
学习啦在线学习网 MImg=MainImg.style.pixelWidth+=i++
学习啦在线学习网 MainImg.style.pixelHeight=MImg*aaa
学习啦在线学习网 if(i<20)setTimeout('max()',100)
}
//变小
function min(){
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)
}
function init(){
学习啦在线学习网 aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=85
学习啦在线学习网 MainImg.style.pixelHeight=55
}
学习啦在线学习网 onload=init
</script></body>
</html>
学习啦在线学习网 css实现鼠标放到图片上慢慢变大相关文章：
css实现鼠标放到图片上慢慢变大
下一篇：win7鼠标光标乱跳怎么办
