15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 H5

最简单的,点击图片放大

韩建玺| 发布于 2022-05-26 18:04:32| 512阅读| 0点赞| 0评论
举报

点击图片放大





<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<style>
			.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="js/jquery.min.js">script>
	head>
	<body>
		<div class="over">div>
		
		<div class="logoImg amplifyImg">
			
			<img src="ewm.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 = $('
'
); //图片容器 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(') + '>'); } else { css('top', 0); html(') + ' 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(') + ' width=' + windowWidth + ';>'); } else { css('top', 0); html(') + ' width=' + windowWidth + '; height=' + windowHeight + '>'); } } } tempContainer.click(function() { $(this).remove(); coverLayer(0); }); }); }); } else { return false; } //使用禁用蒙层效果 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>
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

韩建玺
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部