基于JavaScript实现移动端点击图片查看大图点击大图隐藏
一、需求
点击图片查看大图,再点大图隐藏。多用于移动端,因为移动端屏幕小,可能需要查看大图。
二、代码
<!DOCTYPEhtml> <html> <metacharset="utf-8"/> <headrunat="server"> <title>JQuery点击图片查看大图bystarof</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){ //varMyJQuery=function(){ //window.MyjQuery=window.$=jQuery;window.$=MyJQuery; //}; //})(window); //alert($); $.fn.ImgZoomIn=function(){ bgstr='<divid="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;"><iframesrc="about:blank"frameborder="5px"scrolling="yes"style="width:100%;height:100%;"></iframe></div>'; //alert($(this).attr('src')); imgstr='<imgid="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>
三、技巧
因为移动端无法添加热点,最终一个解决方法是使用四个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; }
PS:手机网站移动端图片实现延迟加载
由于国内的电信网络性价比的限制,和手机处理能力的差异,在设计一个无线应用的时候,
为用户节省流量是一个非常重要的考虑因素。可以说每一个字节都应该为客户端节省。
节约流量可以从以下几个方面关注:
一、使用缓存比如利用浏览器本地存储前面已经讨论过
二、延迟加载代码(触底检测,通过接口获取数据)
三、资源的延迟加载,图片出现在可视区域再加载,(不考虑自动播放的情况下)音频视频按用户点击加载。
今天简单说一下图片延迟加载的实现方式。
例子基于jQuery和jQuerymobile
原理:用户滑动屏幕,屏幕滚动结束(用jQuery提供的windowscrollstop事件合适)检测出现在viewport中的图片。
替换图片的真正src属性即可。
技巧:滚动结束之后不要立即检测加载,设置一秒延时,也许用户会立即开始下一次滚屏,基于现在的网络环境,1秒的延时可以说明用户真正想查看这些内容。用微信的朋友可以仔细体验一下这一点。
由于有时钟的控制,当用户频繁快速翻动屏幕,不会发大量请求。
主要代码:
varrefreshTimer=null, mebook=mebook||{}; /* *滚动结束屏幕静止一秒后检测哪些图片出现在viewport中 *和PC端不同由于无线速度限制和手机运算能力的差异1秒钟的延迟对手机端的用户来说可以忍受 */ $(window).on('scrollstop',function(){ if(refreshTimer){ clearTimeout(refreshTimer); refreshTimer=null; } refreshTimer=setTimeout(refreshAll,1e3); }); $.belowthefold=function(element){ varfold=$(window).height()+$(window).scrollTop(); returnfold<=$(element).offset().top; }; $.abovethetop=function(element){ vartop=$(window).scrollTop(); returntop>=$(element).offset().top+$(element).height(); }; /* *判断元素是否出现在viewport中依赖于上两个扩展方法 */ $.inViewport=function(element){ return!$.belowthefold(element)&&!$.abovethetop(element) }; mebook.getInViewportList=function(){ varlist=$('#bookListli'), ret=[]; list.each(function(i){ varli=list.eq(i); if($.inViewport(li)){ mebook.loadImg(li); } }); }; mebook.loadImg=function(li){ if(li.find('img[_src]').length){ varimg=li.find('img[_src]'), src=img.attr('_src'); img.attr('src',src).load(function(){ img.removeAttr('_src'); }); } };