使用 CSS + JavaScript 製作圖片倒影效果

使用 CSS + JavaScript 製作圖片倒影效果 (二)

使用 CSS + JavaScript 語法

<style>
#aa{position:relative;width:100px;height:160px}
</style>
<script language="javascript">
function aab(){
aaa=""
ja=""
for(i=101,a=60;i<160;i++,a--){
ja+="<div style='overflow:hidden;width:100px;height:1px;position:absolute;top:"+i+"px;left:"+(i-100)+"px;filter:alpha(opacity="+a+");opacity:"+(a/100)+"'><img src='smile.png' style='margin:-"+(100-(i-100))+"px 0px 0px 0px'></div>"
}
aa.innerHTML+=ja
}
</script>
</HEAD>
<BODY onload="aab()">
<div id="aa">
<img src="smile.png" width"100" height="100">
</div>

顯示效果

本報導內容或資料，因限人力、時間，非教學會員，不接受任何使用上的教學與指導，敬請見諒。
如果你喜歡這篇辛苦蒐集整理出來的報導資料，歡迎原文轉載及註明出處，歡迎網友檢舉盜用者，謝謝你的合作。

請按瀏覽器的檢視原始碼查看