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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
JS的数组迭代方法
Feb 05 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
网络传输协议(http协议)
Nov 18 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
JS实现炫酷轮播图
Nov 15 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
7个超级实用的PHP代码片段
2011/07/11 PHP
php 字符串替换的方法
2012/01/10 PHP
两种php实现图片上传的方法
2016/01/22 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
python统计文本文件内单词数量的方法
2015/05/30 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python实现FM算法解析
2019/06/18 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python命令行参数用法实例分析
2019/06/25 Python
Django  ORM 练习题及答案
2019/07/19 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
python中count函数简单的实例讲解
2020/02/06 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
信用卡逾期证明示例
2014/09/13 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
实现GO语言对数组切片去重
2022/04/20 Golang