鼠标放到图片上慢慢变大,移开后图片又慢慢变小

来源:互联网 发布:手机自动网络时间不准 编辑:程序博客网 时间:2024/04/29 12:34

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 鼠标放到图片上慢慢变大,移开后图片又慢慢变小</title>
</head>
<body>
<img id=MainImg onmouseover=max() onmouseout=min() src="http://hiphotos.baidu.com/xdhhh/pic/item/23e4123ffb1983de55e7234b.jpg" width="1000" height="600"></a>
<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=260
MainImg.style.pixelHeight=160
}
onload=init
</script>
</body>
</html>

原创粉丝点击