css實現(xiàn)鼠標放到圖片上慢慢變大
學習前端的同學你們知道怎么實現(xiàn)鼠標放到圖片上慢慢變大的效果嗎?不知道的話跟著學習啦小編一起來學習實現(xiàn)鼠標放到圖片上慢慢變大的效果吧。
實現(xiàn)鼠標放到圖片上慢慢變大的效果的方法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>網(wǎng)頁特效觀止|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實現(xiàn)鼠標放到圖片上慢慢變大相關文章：
css實現(xiàn)鼠標放到圖片上慢慢變大
