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语句可以不以;结尾的烦恼
Mar 08 Javascript
javascript 添加和移除函数的通用方法
Oct 20 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 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中经典方法实现判断多维数组是否为空
2011/10/23 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
onpropertypchange
2006/07/01 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
js实现抽奖功能
2020/11/24 Javascript
python实现对csv文件的列的内容读取
2018/07/04 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
Python如何读取文件中图片格式
2020/01/13 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
二年级数学教学反思
2014/01/21 职场文书
上班上网检讨书
2014/01/29 职场文书
淘宝活动策划方案
2014/02/06 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
企业计划生育责任书
2015/05/09 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android