Javascript教程:JS如何实现鼠标放到图片上变大的方法
大家看看以下的代码,尝试的实践一下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 鼠标放到图片上慢慢变大,移开后图片又慢慢变小</title>
</head>
<body>
<img id=MainImg onmouseover=max() onmouseout=min()
src=file:///d|/我的文档/桌面/背景图片.jpg width="970" height="107"
onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);"
style="cursor:pointer;"/>
<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>
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |