html实现点击图片放大功能

  <html><head><meta charset="UTF-8"/><title>影城全国分布图</title><meta name="viewport" content="width=device-width,height=device-height;initial-scale=1,maximum-scale=1"><style>*{margin:0;padding: 0;}.over {position: fixed; left:0; top:0; width:100%; z-index:100;}.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}</style><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script></head><body><div class="over"></div><!--背景层--><div class="logoImg amplifyImg"><!--注意：此处的amlifyImg不可少--><img src="map.jpg"/><!-- 此处是引入图片的路径 --></div><script>$(document).ready(function () {var imgsObj = $('.amplifyImg img');//需要放大的图像//                 if(imgsObj){$.each(imgsObj,function(){$(this).click(function(){var currImg = $(this);coverLayer(1);var tempContainer = $('<div class=tempContainer></div>');//图片容器with(tempContainer){//width方法等同于$(this)appendTo("body");var windowWidth=$(window).width();var windowHeight=$(window).height();//获取图片原始宽度、高度var orignImg = new Image();orignImg.src =currImg.attr("src") ;var currImgWidth= orignImg.width;var currImgHeight = orignImg.height;if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图if(currImgHeight<windowHeight){var topHeight=(windowHeight-currImgHeight)/2;if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/topHeight=topHeight-35;css('top',topHeight);}else{css('top',0);}html('<img border=0 src=' + currImg.attr('src') + '>');}else{css('top',0);html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');}}else{var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;if(currImgChangeHeight<windowHeight){var topHeight=(windowHeight-currImgChangeHeight)/2;if(topHeight>35){topHeight=topHeight-35;css('top',topHeight);}else{css('top',0);}html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');}else{css('top',0);html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');}}}tempContainer.click(function(){$(this).remove();coverLayer(0);});});});}//使用禁用蒙层效果function coverLayer(tag){with($('.over')){if(tag==1){css('height',$(document).height());css('display','block');css('opacity',1);css("background-color","#FFFFFF");css("background-color","rgba(0,0,0,0.7)" );  //蒙层透明度}else{css('display','none');}}}</script></body></html>

希望对大家有帮助

html实现点击图片放大功能相关推荐

超简单jq完成点击图片放大功能
后台小伙伴给的需求,本想找找类似的插件使用一下算了,想了想这个功能好像也不是很难实现,况且安装插件要先查找很多,然后筛选自己合适的,下载,导入,太麻烦了,不如自己手写. 基本需求是引入 jquery. ...
点击图片放大缩小功能
1.点击图片放大缩小的思路图片部分: <table><div><img style="width:62px;height:83px;display:block ...
百度移动优化：关于移动端点击图片放大有多少人注意？
百度移动搜索落地页体验白皮书4.0于2018年08月15日发布有多少人注意到白皮书最下面的这短短的60字? 好多网站都存在点击图片不可放大,有多少站长注意这个细节问题? 关于加这个功能确实挺麻烦,不懂 ...
jQuery插件Magnify放大镜实现javascript图片放大功能
jQuery插件Magnify放大镜实现javascript图片放大功能博客所有文章均属原创作品,如有转载,请注明作者:biuuu,来源:http://www.biuuu.com/?p=459 有时 ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
h5 - PhotoSwipe图片放大功能集成和使用
说明: PhotoSwipe图片放大功能的简单demo. 重要代码: 1.html中引入js和css文件,和一段固定的代码 <!-- PhotoSwipe styles --& ...
winform窗体上图片放大功能
今天遇到点击图片,所点部位实现放大的功能,网上也有很多资料,记录下自己写的. 窗体上放置两个pictureBox控件,第一个添加image,属性SizeMode设置为StretchImage.可以开始 ...
vue项目一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
点击图片放大至原始图片大小
有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w = parseInt($(window) ...
jquery点击图片放大效果
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里. 接下来看一下效果图 HTML结构 <img class="enlargeImg" width= ...

html实现点击图片放大功能

html实现点击图片放大功能相关推荐

最新文章

热门文章