基于JavaScript实现移动端点击图片查看大图点击大图隐藏
一、需求
点击图片查看大图，再点大图隐藏。多用于移动端，因为移动端屏幕小，可能需要查看大图。
二、代码
<!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实现视频轮播在pc端与移动端均可
最近客户要求用Javascript实现视频轮播: 有兴趣的同学可以参开一下 下面写了一个程序实现视频轮播,pc端与移动端均可以实现, 但移动端,存在有一点bug; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <met
-
移动端点击态处理的三种实现方式
前言 在开发移动端页面的时候,为了提高用户体验,通常会给被触控的元素加上一个效果来对用户的操作进行反馈.这种反馈主要有三种实现方式,有需要的朋友们下面来一起看看吧. 一.伪类:active :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等.在多按键的鼠标系统中,:active只适用于主按键,目前的大部分情况都是左键即主键. 该伪类下定义的CSS样式只在按下鼠
-
jquery移动端TAB触屏切换实现效果
我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-163css"> <ul id
-
JS判断移动端访问设备并加载对应CSS样式
JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) 复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-
-
js如何判断用户是在PC端和还是移动端访问
最近一直在忙我们团队的项目"咖啡之翼",在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而且许多国内开发者也开始投身于Android移动终端的大浪潮中.如果很多互联网大浪潮你错过了.那么这个Android浪潮你绝对不能错过.目前我们为"咖啡之翼"已经开发了移动终端以及安卓客户端,大家使用Android或者IOS操作系统的手机,直接访问域名www.sygxy.cn即可观看移动终端效果.同时Android客户
-
jquery实现移动端点击图片查看大图特效
本文的需求很简单:点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 具体实现代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css&quo
-
javascript实现移动端上的触屏拖拽功能
本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi
-
移动端点击图片放大特效PhotoSwipe.js插件实现
PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ photoswipe之移动端图片放大查看,滑动切换下一张,图片保存到本地. <style> .pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px} .pnav a{padding:4px} .pnav a.cur{background:#00
-
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">
-
Android 实现WebView点击图片查看大图列表及图片保存功能
在日常开发过程中,有时候会遇到需要在app中嵌入网页,此时使用WebView实现效果,但在默认情况下是无法点击图片查看大图的,更无法保存图片.本文将就这一系列问题的实现进行说明. 图示: 项目的知识点: 加载网页后如何捕捉网页中的图片点击事件: 获取点击的图片资源后进行图片显示,获取整个页面所有的图片: 支持查看上下一张的图片以及对图片缩放显示: 对图片进行保存: 其他:图片缓存的处理(不用每次都重新加载已查看过的图片) 项目代码结构: 前期准备(添加权限.依赖和混淆设置): 添加权限: <us
-
基于JavaScript实现鼠标箭头移动图片跟着移动
我们经常在一些网站上看到,鼠标在网页上移动,有一张图片跟着鼠标移动.大家知道这种效果是怎么做出来的吗?你可能感到比较复杂,其实他是用js编一段小程序来实现的,且代码简单,比较好理解.下面我就来分享下实现代码. 关键代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js鼠标移到</title>
-
基于JavaScript代码实现随机漂浮图片广告
在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂浮效果就会失效,下面分享一个符合标准的漂浮代码,使需要的朋友免去大量改造代码的繁琐. 代码一: 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:/
-
基于javascript代码实现通过点击图片显示原图片
废话不多说了,直接给大家贴js实现点击图片显示原图片的代码,具体代码如下所示: function DrawImage(ImgD){ var image = new Image(); image.src=ImgD.src; var width = $(ImgD).attr("width"); var height = $(ImgD).attr("height"); if(width >100 && height>80){ ImgD.widt
-
基于JavaScript实现图片点击弹出窗口而不是保存
一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件. 实现的思路是通过编写hook图片的onclick事件的函数,在函数中对body追加div元素,再将传入的图片对象放入元素中,同时再监听div的onclilck事件,当捕捉到点击,再关闭(其实是隐藏)弹出的div. 通过在函数初始化的时候收集页面所有的img元素,再为每个img元素增加onclick="picHook(this)"
-
手机端点击图片放大特效PhotoSwipe.js插件实现
PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ 但有一点不太好的是图片放大后再单击不能关闭浏览,要点击关闭按钮或者滑动才能关闭,找了好久配置项都没说到这点上的,只能自己动手改了. 打开photoswipe.js,大概在3179行有个关于tap的函数定义 在开头先定义一个变量 var tap_num = 0; 然后在onTapStart的定义里加入 //根据需求自己添加的S //判断
-
基于JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第一层opacity,给图层设置透明度 2.第二层clip,clip属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏 3.第三层选取框absolute(与第二层重叠的),包括八个触点的效果 html代码: <div id="box"> <img src=&quo