點擊顯示大圖的JS效果_圖片特效特效

又一個點擊出現大圖的效果，個人感覺效果不是太理想，因為雖然實現了放大圖片，但實際上顯示小圖的時候仍然需要下載大圖，這樣等于沒有優化網頁，適合對放大要求不高的場合。

<title>點擊顯示大圖的JS</title>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:3px solid #eeeeee;width:100px;height:75px;}
#enlarge_images{position:absolute;display:none;z-index:2;}
</style>
<div   class="jtpdrld"   id="demo"><img src="http://p1.mb5u.com/texiao/1/20110225160513354.jpg" border="0" alt=""/></div>
<div   class="tzxtrxr"   id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
	var ts = gg[i];
	ts.onclick = function(event){
		event = event || window.event;
		ei.style.display = "block";
		ei.innerHTML = '<img src="http://p1.mb5u.com/texiao/1/20110225160513355.src + " />';
		ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
		ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
	}
	ts.onmouseout = function(){
		ei.innerHTML = "";
		ei.style.display = "none";
	}
}
</script>

所屬頻道：圖片特效特效/更新時間：2012-11-28

[收藏][報錯][返回列表]

相關圖片特效特效：

點擊顯示大圖的JS效果_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些