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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
Vue实现自定义下拉菜单功能
Jul 16 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
javascript刷新父页面方法汇总详解
Oct 10 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 Javascript
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-redis中文文档介绍
2013/02/07 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
自制PHP框架之设计模式
2017/05/07 PHP
jquery 通过name快速取值示例
2014/01/24 Javascript
js闭包的用途详解
2014/11/09 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python2 与 pyhton3的输入语句写法小结
2018/09/10 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
Python Pandas 箱线图的实现
2019/07/23 Python
了解一下python内建模块collections
2020/09/07 Python
python基于win32api实现键盘输入
2020/12/09 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
银行爱岗敬业演讲稿
2014/05/05 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
人民的好儿女观后感
2015/06/18 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang