以前就想过用JS写图片倒影,但都没有什么好的方法,主要是浏览器兼容方面。 今天写了一个,不过只能算是一个想法,用倒是可以,不过代价太大,发出来大家看看,积思广益。看看有没有人能够有更好的想法! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>shadow</title> <mce:style type="text/css"><!-- *{ padding:0;margin:0; } body{ text-align:center; padding-bottom:40px; background:#fff; } .shadow{ margin:100px auto 0px; } .shadowBox{ margin:2px auto 0px; } .shadow img{ margin:0px auto; display:block; } .shadowBox div{ width:100%; overflow:hidden; position:relative; height:1px; } .shadowBox div img{ position:absolute; left:0px; } --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- *{ padding:0;margin:0; } body{ text-align:center; padding-bottom:40px; background:#fff; } .shadow{ margin:100px auto 0px; } .shadowBox{ margin:2px auto 0px; } .shadow img{ margin:0px auto; display:block; } .shadowBox div{ width:100%; overflow:hidden; position:relative; height:1px; } .shadowBox div img{ position:absolute; left:0px; } --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">*{ padding:0;margin:0; } body{ text-align:center; padding-bottom:40px; background:#fff; } .shadow{ margin:100px auto 0px; } .shadowBox{ margin:2px auto 0px; } .shadow img{ margin:0px auto; display:block; } .shadowBox div{ width:100%; overflow:hidden; position:relative; height:1px; } .shadowBox div img{ position:absolute; left:0px; }</style> <mce:script type="text/javascript"><!-- var createShadow = function(img, cName, shadowH, startAlpha){ this.imgBox = img.parentNode; this.cName = cName; this.shadowH = shadowH; this.startAlpha = (startAlpha > 100)? 100 :(startAlpha <= 20)? 20 : startAlpha; this.imgSrc = img.src; this.imgWidth = img.offsetWidth; this.imgHeight = img.offsetHeight; this.init(); } createShadow.prototype = { init: function(){ var _shadowBox = document.createElement('div'); _shadowBox.className = this.cName; _shadowBox.style.width = this.imgWidth +'px'; _shadowBox.style.height = this.imgHeight +'px'; _shadowBox.innerHTML = this.createImgList(); this.imgBox.appendChild(_shadowBox); }, createImgList: function(){ var _html = []; var _opacity; var _step = this.startAlpha / this.shadowH; for(var i = 0; i < this.shadowH; i++){ _opacity = Math.floor(this.startAlpha - i * _step); _opacity = (_opacity < 0)? 0 : _opacity; _opacity = (document.all)? 'filter:alpha(opacity='+ _opacity +')' : 'opacity:'+ (_opacity / 100); _html.push('<div><img src="'+ this.imgSrc +'" mce_src="'+ this.imgSrc +'" width="'+ this.imgWidth +'px" style="top:'+ (-this.imgHeight + i) +'px; '+ _opacity +'" /></div>'); } return _html.join(''); } } // --></mce:script> </head> <body> <div class="shadow"> <img src="http://drmcmm.baidu.com/media/id=nHnLrj0sns&gp=402&time=nHcvPH04nWD3nf.jpg" mce_src="http://drmcmm.baidu.com/media/id=nHnLrj0sns&gp=402&time=nHcvPH04nWD3nf.jpg" alt="" onload = "new createShadow(this, 'shadowBox', 30, 50)"/> </div> <div class="shadow"> <img src="http://img.funshion.com/attachment/new_images/2010/01-27/17239948_1264582518_666.jpg" mce_src="http://img.funshion.com/attachment/new_images/2010/01-27/17239948_1264582518_666.jpg" alt="" style="width:500px" onload = "new createShadow(this, 'shadowBox', 50, 60)"/> </div> <div class="shadow"> <img src="http://drmcmm.baidu.com/media/id=nHnLrj0sns&gp=402&time=nHcvPH04nWD3nf.jpg" mce_src="http://drmcmm.baidu.com/media/id=nHnLrj0sns&gp=402&time=nHcvPH04nWD3nf.jpg" alt="" width='200px' onload = "new createShadow(this, 'shadowBox', 20, 50)"/> </div> <div class="shadow"> <img src="http://img.funshion.com/attachment/new_images/2010/01-27/17239948_1264582518_666.jpg" mce_src="http://img.funshion.com/attachment/new_images/2010/01-27/17239948_1264582518_666.jpg" alt="" style="width:800px" onload = "new createShadow(this, 'shadowBox', 50, 60)"/> </div> </body> </html>