一、需求点击图片查看大图，再点大图隐藏。多用于移动端，因为移动端屏幕小，可能需要查看大图。
二、代码<!DOCTYPE html><html><metacharset="utf-8"/><headrunat="server"><title>JQuery点击图片查看大图by starof</title><styletype="text/CSS">.exampleImg{height:100px;cursor:pointer;}</style><scriptsrc="http://code.jquery.com/jquery-latest.js"></script><scripttype="text/javascript">//alert($);//(function (window, undefined) {//var MyJQuery = function () {//window.MyjQuery = window.$ = jQuery; window.$ = MyJQuery;//};//})(window);//alert($);$.fn.ImgZoomIn=function() {
bgstr='<div id="ImgZoomInBG" style=" background:#000000; filter:Alpha(Opacity=70); opacity:0.7; position:fixed; left:0; top:0; z-index:10000; width:100%; height:100%; display:none;"><iframe src="about:blank" frameborder="5px" scrolling="yes" style="width:100%; height:100%;"></iframe></div>';//alert($(this).attr('src'));imgstr='<img id="ImgZoomInImage" src="'+$(this).attr('src')+'" onclick=$(\'#ImgZoomInImage\').hide();$(\'#ImgZoomInBG\').hide(); style="cursor:pointer; display:none; position:absolute; z-index:10001;" />';if($('#ImgZoomInBG').length<1) {
$('body').append(bgstr);
}if($('#ImgZoomInImage').length<1) {
$('body').append(imgstr);
}else{
$('#ImgZoomInImage').attr('src', $(this).attr('src'));
}//alert($(window).scrollLeft());//alert( $(window).scrollTop());$('#ImgZoomInImage').css('left', $(window).scrollLeft()+($(window).width()-$('#ImgZoomInImage').width())/2);
$('#ImgZoomInImage').css('top', $(window).scrollTop()+($(window).height()-$('#ImgZoomInImage').height())/2);
$('#ImgZoomInBG').show();
$('#ImgZoomInImage').show();
};
$(document).ready(function() {
$("#imgTest").bind("click",function() {
$(this).ImgZoomIn();
});
});</script></head><body><div><!--第一种写法--><imgclass="exampleImg"src="images/03.jpg"id="imgTest"/><!--第二种写法--><imgclass="exampleImg"src="images/p1_nav2.png"onClick="$(this).ImgZoomIn();"/></div></body></html>
三、技巧需要点击图片中1、2、3、4四张小图分别查看大图，而下面左右按钮切换时是需要同时切换4张小图。
因为移动端无法添加热点，最终一个解决方法是使用四个a标签定位到左上角，右上角，左下角，右下角四个区域。
<dl><ddstyle="display:block;"><imgsrc="images/four-duche.jpg"onClick="$(this).ImgZoomIn();"><ahref="Javascript:;"src="images/11.jpg"class="topleft"onClick="$(this).ImgZoomIn();"></a><ahref="javascript:;"src="images/12.jpg"class="toPRight"onClick="$(this).ImgZoomIn();"></a><ahref="javascript:;"src="images/13.jpg"class="bottomleft"onClick="$(this).ImgZoomIn();"></a><ahref="javascript:;"src="images/14.jpg"class="bottomright"onClick="$(this).ImgZoomIn();"></a></dd>...</dl>
css
.topleft,.topright,.bottomleft,.bottomright{width:50%;height:50%;position:absolute;
}.topleft{/*background-color:red;*/top:0;left:0;
}.topright{/*background-color:green;*/top:0;right:0;
}.bottomleft{/*background-color:blue;*/bottom:0;left:0;
}.bottomright{/*background-color:yellow;*/bottom:0;right:0;
}
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4924822.html有问题欢迎与我讨论，共同进步。