<!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=utf-8" /> <title>无标题文档</title> </head> <body> <div id="a1" style="500px; height:500px; opacity:0;-moz-opacity:0.5;filter:alpha(opacity=50)" onclick="hua()"><img src="21a4462309f79052eea1b3080af3d7ca7bcbd54e.jpg"/></div> </body> </html> <script type="text/jscript"> window.onscroll = function() { var d = document.getElementById("a1"); if(window.scrollY >= 100) { hua(); } else{xs()} } function hua() { var zuo = document.getElementById("a1"); kd = zuo.style.opacity; kd =parseFloat(kd)+0.01; if(parseFloat(kd)>=1) { return; } else { zuo.style.opacity = kd; window.setTimeout("hua()",20) } } function xs() { var zuo = document.getElementById("a1"); kd = zuo.style.opacity; kd =parseFloat(kd)-0.01; if(parseFloat(kd)<=0) { return; } else { zuo.style.opacity = kd; window.setTimeout("xs()",20) } } </script> 这是运用滚动监听实现的图片渐显渐隐的效果，滚轮滚动到下方图片显示，滚动回去图片隐藏，运用了函数