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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
理解javascript对象继承
Apr 17 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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 第一节 php简介
2012/04/28 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
js图片上传的封装代码
2017/08/01 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python 正则表达式操作指南
2009/05/04 Python
python开发之函数定义实例分析
2015/11/12 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python 支持向量机分类器的实现
2020/01/15 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
教师岗位职责范本
2013/12/29 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
学校教学工作总结2015
2015/05/19 职场文书
大学运动会加油稿
2015/07/22 职场文书
新闻通讯稿范文
2015/07/22 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers