基于JavaScript实现移动端点击图片查看大图点击大图隐藏


Posted in Javascript onNovember 04, 2015

一、需求

点击图片查看大图,再点大图隐藏。多用于移动端,因为移动端屏幕小,可能需要查看大图。

二、代码

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head runat="server">
<title>JQuery点击图片查看大图by starof</title>
<style type="text/css">
.exampleImg { height:100px; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="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>
<!--第一种写法-->
<img class="exampleImg" src="images/03.jpg" id="imgTest"/>
<!--第二种写法-->
<img class="exampleImg" src="images/p1_nav2.png" onClick="$(this).ImgZoomIn();"/>
</div>
</body>
</html>

三、技巧

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

<dl>
 <dd style="display:block;">
  <img src="images/four-duche.jpg" onClick="$(this).ImgZoomIn();">
  <a href="javascript:;" src="images/11.jpg" class="topleft" onClick="$(this).ImgZoomIn();"></a>
  <a href="javascript:;" src="images/12.jpg" class="topright" onClick="$(this).ImgZoomIn();"></a>
  <a href="javascript:;" src="images/13.jpg" class="bottomleft" onClick="$(this).ImgZoomIn();"></a>
  <a href="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 和 jQuery mobile

原理:用户滑动屏幕,屏幕滚动结束(用jQuery 提供的 window scrollstop 事件合适 ) 检测出现在viewport中的图片。

替换图片的 真正 src 属性即可。

技巧:滚动结束之后不要立即检测加载,设置一秒延时,也许用户会立即开始下一次滚屏,基于现在的网络环境,1秒的延时可以说明用户真正想查看这些内容。用微信的朋友可以仔细体验一下这一点。

由于有时钟的控制,当用户频繁快速翻动屏幕,不会发大量请求。

主要代码:

var refreshTimer = null,
 mebook = mebook || {};
/*
*滚动结束 屏幕静止一秒后检测哪些图片出现在viewport中
*和PC端不同 由于无线速度限制 和手机运算能力的差异 1秒钟的延迟对手机端的用户来说可以忍受
*/
$(window).on('scrollstop', function () {
 if (refreshTimer) {
 clearTimeout(refreshTimer);
 refreshTimer = null;
 }
 refreshTimer = setTimeout(refreshAll, 1e3);
});
$.belowthefold = function (element) {
  var fold = $(window).height() + $(window).scrollTop();
  return fold <= $(element).offset().top;
};
$.abovethetop = function (element) {
  var top = $(window).scrollTop();
  return top >= $(element).offset().top + $(element).height();
};
/*
*判断元素是否出现在viewport中 依赖于上两个扩展方法 
*/
$.inViewport = function (element) {
  return !$.belowthefold(element) && !$.abovethetop(element)
};
mebook.getInViewportList = function () {
  var list = $('#bookList li'),
    ret = [];
  list.each(function (i) {
    var li = list.eq(i);
    if ($.inViewport(li)) {
      mebook.loadImg(li);
    }
  });
};
mebook.loadImg = function (li) {
  if (li.find('img[_src]').length) {
    var img = li.find('img[_src]'),
      src = img.attr('_src');
    img.attr('src', src).load(function () {
      img.removeAttr('_src');
    });
  }
};
Javascript 相关文章推荐
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
原生JS实现层叠轮播图
May 17 Javascript
详解AngularJS 模块化
Jun 14 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
js数组去重的5种算法实现
Nov 04 #Javascript
解决js图片加载时出现404的问题
Nov 30 #Javascript
jquery实现的点击翻书效果代码
Nov 04 #Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 #Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 #Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 #Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 #Javascript
You might like
php调用C代码的实现方法
2014/03/11 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python中subprocess的简单使用示例
2015/07/28 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python中存取文件的4种不同操作
2018/07/02 Python
使用pandas读取文件的实现
2019/07/31 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
结婚周年感言
2014/02/24 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
信访工作经验交流材料
2014/05/23 职场文书
科技活动总结范文
2015/05/11 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang