1. 程式人生 > >實現頁面上點選小圖片,彈出大圖片的效果

實現頁面上點選小圖片,彈出大圖片的效果

<html><body>
 <a href="javascript:PassBet('images/products_1.jpg');"><img

src="images/products_shouji_1.jpg" border="0"></a>
</body>
</html>

<!--* 圖片層 開始 *-->
<script>
function PassBet(i)
{ 
 oclose();
 var p=100;
 var f = document.createElement('DIV');
 f.style.textAlign = "center";
 f.style.position = "absolute";
 f.style.filter = "alpha(opacity="+p+")";
 f.style.opacity = (p / 100);
 f.style.MozOpacity = (p / 100);
 f.style.KhtmlOpacity = (p / 100);
 f.style.width  = 800;
 f.style.height = 600;
 f.style.margin = "0px";
 f.style.backgroundColor = '#ffffff';
 f.style.border="3px solid #cccccc";
 f.style.padding="3px";
 f.style.top=200;
 f.style.left=200;
 f.setAttribute('id','fdiv');
 document.body.appendChild(f);
 document.getElementById('fdiv').innerHTML = "<a

href=\"javascript:oclose();\"><img src="+i+" border=\"0\"></a>";
 
}
function oclose()
{
 if(document.getElementById('fdiv'))
 {
  document.body.removeChild(document.getElementById

('fdiv'));
 }

}
</script>
原文連結:http://blog.163.com/xyz_1112/blog/static/38694402200782784227513/