基于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 相关文章推荐
js中indexof的用法详细解析
Dec 24 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
JS实现瀑布流布局
Oct 21 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
详解React的回调渲染模式
Sep 10 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
python代码实现ID3决策树算法
2017/12/20 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Numpy中的mask的使用
2018/07/21 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
白酒市场营销方案
2014/02/25 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
见习报告的格式
2014/11/04 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
go语言-在mac下brew升级golang
2021/04/25 Golang
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
MyBatis 动态SQL全面详解
2021/10/05 MySQL
Apache自带的ab压力测试工具的实现
2022/07/23 Servers