基于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 callBack 返回前一页的js方法
Nov 30 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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 常用类整理
2009/12/23 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
php post换行的方法
2020/02/03 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
详解Node.js开发中的express-session
2017/05/19 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
js中this对象用法分析
2018/01/05 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
建筑系毕业生自我鉴定
2014/01/24 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python