图片弹出层技巧

来源：互联网发布：如何复制淘宝店铺宝贝编辑：程序博客网时间：2024/05/16 05:06

网页图片的放大和缩小是网页制作过程中经常遇到的必须掌握的技巧。下面介绍两种网上比较好的弹出层效果。

第一种（http://www.uuzuo.com/demo/r/）：

效果还是很不错的，单击图片，在浏览器中心能够放大图片，然后背景颜色变暗。但这个效果最好需要设置其中一个参数，由absolute改成relative，这样浏览器没有最大化的时候也能够让放大的图片处在正中心。下面上代码：

<!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=gb2312" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>弹出层浏览图片</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#page{width:960px;margin:20px auto;}</style></head><body><div id="page"><p><img src="1.jpg" mce_src="1.jpg" rel="1.jpg" id="so1" onclick='showimg.show(this.id)' height="200" width="200" /></p><p><img src="2.jpg" mce_src="2.jpg" rel="2.jpg" id="so2" onclick='showimg.show(this.id)' height="200" width="200" /></p><p><img src="3.jpg" mce_src="3.jpg" rel="3.jpg" id="so3" onclick='showimg.show(this.id)' height="200" width="200" /></p></div><mce:script type="text/javascript"></mce:script></body></html>

这个代码，思路还是很简单的，无非生成新的层，然后设置其显示属性。但我在用个过程中遇到了一个问题，就是刚开始打开图片的时候，第一次点击图片，左右出现的空白会多出很多，在我要嵌入的MFC中尤其显得明显，这个问题纠结了很久也没有解决。于是我只好去寻找别的效果。呵呵，运气不错，下面这个，应该说是我最中意的了。

第二种（不好意思，忘了收藏了）：

这个是采用了链接的效果展示的，使用起来非常方便。这个也是要修改其中一个参数，改成relative，下面这个程序已经改好了：

<!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" xml:lang="zh"><head><title>小图弹大图</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { background:#f1f1f1; margin:0 }#workDemo { width:100%; }#workDemo a { width: 150px; height:150px; margin:5px; padding:0; border:gray 5px solid; float:left; overflow:hidden; text-decoration:none; display:block; position:relative }#workDemo a span { display:none; }#workDemo a img { border:none; }#workDemo a:hover { border-color:red; }#workDemo a:hover span { position:relative; background:red; color:white; width:100%; padding-top:3px; text-align:center; right:0; bottom:0; display:block; font-size:11px; filter: Alpha(Opacity=60);Opacity:0.6; }</style></head><body><div id="workDemo"><a href="#" mce_href="#"><img src="50.jpg" mce_src="50.jpg" height=150 width=150/><span>把浏览器窗口放小后点击</span></a><a href="#" mce_href="#"><img src="50.jpg" mce_src="50.jpg" height=150 width=150/><span>把浏览器窗口放小后点击</span></a></div><mce:script type="text/javascript"></mce:script></body></html>

以上就是我所看到的比较好的图片放大弹出层效果了。以后遇到了继续补充。