jquery实现移动端点击图片查看大图特效


Posted in Javascript onSeptember 11, 2020

本文的需求很简单:点击图片查看大图,再点大图隐藏。多用于移动端,因为移动端屏幕小,可能需要查看大图。

具体实现代码

<!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>

jquery实现移动端点击图片查看大图特效

jquery实现移动端点击图片查看大图特效需要用到的技巧
需要点击图片中1、2、3、4四张小图分别查看大图,而下面左右按钮切换时是需要同时切换4张小图。

jquery实现移动端点击图片查看大图特效

因为移动端无法添加热点,最终一个解决方法是使用四个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;
}

以上就是移动端点击图片查看大图的实现过程,希望对大家的学习有所帮助。

Javascript 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
jquery解析json格式数据的方法(对象、字符串)
Nov 24 #Javascript
Bootstrap每天必学之按钮(一)
Nov 24 #Javascript
JavaScript DOM 学习总结(五)
Nov 24 #Javascript
jQuery解析json数据实例分析
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 #Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 #Javascript
jQuery解析Json实例详解
Nov 24 #Javascript
You might like
PHP 函数执行效率的小比较
2010/10/17 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
python实现线程池的方法
2015/06/30 Python
python脚本内运行linux命令的方法
2015/07/02 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
十岁生日家长答谢词
2014/01/17 职场文书
大学新生军训方案
2014/05/03 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
退休教师追悼词
2015/06/23 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers