<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> img{ margin-left: 200px; opacity: 0.3; alpha(opacity = 30); } </style> <script> window.onload = function () { var oimg = document.getElementById(‘img1‘); var timer = null; oimg.onmouseover = function () { touming(this,100,10) } oimg.onmouseout = function () { touming(this,30,-10); } function touming(obj,target,speed) { clearInterval(timer); timer = setInterval(function () { var icur = Math.round(css(obj,‘opacity‘)*100); if(icur == target) { clearInterval(timer); } else { obj.style.opacity = (icur + speed)/100; obj.style.filter = ‘alpha(opacity= ‘( + icur + speed ) + ‘)‘; } },30); } function css(obj,attr) { if(obj.currentStyle) return obj.currentStyle[attr]; else return getComputedStyle(obj,false)[attr]; } } </script> </head> <body> <img id="img1" src="img/1.jpg" alt="图片"> </body> </html>
原文：http://www.cnblogs.com/mayufo/p/4324782.html