这个效果的思路比较直,其实就是生成一个新的幕布盖住原来的界面,图片在幕布上面
第一,要有一个全屏的dom结构用来装放大的图片,同时覆盖在原来的界面上,这步最好是js生成。
第二,图片是同一张图片,所以路径一致,插入全屏的dom结构里。
第三,点击放大的图片就整体消失,回到原来的界面。
css:
.tempContainer {position:fixed; left:0;top: 0;width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
html:
<div class="item-chooseMse amplifyImg logoImg"><img class="min" src="img/bg.jpg" alt="" onclick="imgBtn(this)"></div>
js:
function imgBtn(imgsObj){
var tempContainer = $('<div class=tempContainer></div>');//图片容器
// var windowWidth=$(window).width();
var windowHeight=$(window).height();
tempContainer.html('<img border=0 src=' + $(imgsObj).attr('src') + ' height='+windowHeight+'>');
tempContainer.appendTo("body");
tempContainer.click(function(){
$(this).remove();
});
}