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 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
node.js通过url读取文件
Oct 16 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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
微信小程序支付前端源码
2018/08/29 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Django xadmin安装及使用详解
2020/10/26 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
《小猪家的桃花树》教学反思
2014/04/11 职场文书
新闻人物通讯稿
2014/10/09 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
MySQL数据管理操作示例讲解
2022/12/24 MySQL