以下是 JS实现图片加载模糊到清晰特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为JS实现图片加载模糊到清晰,属于站长常用代码" />
<title>JS实现图片加载模糊到清晰</title>
</head>
<body style="text-align:center">
<img src="images/playboy-s.jpg" name="myImage" width="960" height="1285" id="myImage" alt="" />
<script language="JavaScript" type="text/javascript">
var img = new Image();
img.src = "images/playboy-b.jpg";
img.onload = function() {
document.getElementById('myImage').src = this.src;
}
</script>
</body>
</html>