jquery实现移动端点击图片查看大图特效

本文的需求很简单：点击图片查看大图，再点大图隐藏。多用于移动端，因为移动端屏幕小，可能需要查看大图。

具体实现代码

！DOCTYPE html html元字符集=' utf-8 '/head runat=' server ' title jquery点击图片查看大图按开头/标题样式类型=' text/CSS ' .示例{ height:100pxcursor:pointer指针指针；}/style脚本src=' http :http://代码。jquery。com/jquery-最新。js '/script脚本类型=' text/JavaScript '/alert($)；//(函数（窗口，未定义){//var MyJQuery=function(){//window .MyjQuery=窗口.$=jQuery窗户$=MyJQuery//}；//})(窗口);//alert($)；$ .fn。imgzoomin=function(){ bgstr=' div id=' ImgZoomInBG ' style=' background : # 00000；filter:Alpha(不透明度=70);opacity:0.7位置：固定；左侧left:0top:0z指数：10000;宽度：100%;高度：100%;display : one ' iframe src=' http : about : blank '框架边框=' 5px '滚动=' yes ' style=' width :100%；'身高：100%；/iframe/div '；//alert($(this).attr(' src ')；img str=' img id=' imgzoomimage ' src=' http : ' $(this).attr(' src ')' ' onclick=$(\ ' # imgzoomimage \ ').hide()；$(\'#ImgZoomInBG\ ').hide()；style=' cursor : pointerdisplay : none位置：绝对；' z-index :10001'/';if($(' # imgzoomingbg ').长度1){ $(“body”).追加(BG str)；} if($(' # imgzoomimage ').长度1){ $(“body”).追加(img字符串)；} else { $(' # imgzoomimage ').attr('src '，$(this).attr(' src ')；}//alert($(窗口)。scrolleft())；//alert($(窗口)。滚动顶部())；$(' # imgzoomimage ').css('左'，$(窗口).scrolleft()($(窗口)。width()-$(' # imgzoomimage ').width())/2)；$(' # imgzoomimage ').css('top '，$(窗口)。scrollTop() ($(窗口)。height()-$(' # imgzoomimage ').高度())/2);$(' # imgzoomingbg ').show()；$(' # imgzoomimage ').show()；};$(文档)。ready(function () {$('#imgTest ')).bind('click ')，function () {$(this).ImgZoomIn()；});});/脚本/头dydiv！-第一种写法-img class=' exampleImg ' src=' http : images/03。jpg ' id=' imgTest '/！-第二种写法- img类=' exampleImg ' src=' http : images/P1 _ nav 2。png ' OnClick=' $(this).ImgZoomIn()；//div/body/html

jquery实现移动端点击图片查看大图特效需要用到的技巧需要点击图片中1、2、3、4四张小图分别查看大图，而下面左右按钮切换时是需要同时切换四张小图。

因为移动端无法添加热点，最终一个解决方法是使用四个a标签定位到左上角，右上角，左下角，右下角四个区域。

dldd style=' display : block ' img src=' http : images/four-duche。jpg ' OnClick=' $(this).' ImgZoomIn()；'a href=' JavaScript : ' src=' http : images/11。jpg ' class=' topleft ' OnClick=' $(this). 'ImgZoomIn()；/a a href=' JAVAScript :src=' http : images/12。jpg ' class='右上角' OnClick=' $(this).' ImgZoomIn()；'/a a href=' JAVAScript :'src=' http : images/13。jpg ' class='左下角' OnClick=' $(this). 'ImgZoomIn()；/a a href=' JAVAScript :src=' http : images/14。jpg ' class='右下角' OnClick=' $(this).' ImgZoomIn()；'/a /dd./dlcss。托普夫特。右上方。左下角。右下角{宽度：50%;高度：50%;位置：绝对；}.topleft {/*底色：红色；*/top :0；left:0}。右上角{/*底色：绿色；*/top :0；右：0}。左下角{/*背景-颜色：蓝色；*/底部：0；left:0}。右下角{/*背景色：黄色；*/底部：0；右：0}以上就是移动端点击图片查看大图的实现过程，希望对大家的学习有所帮助。