<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('![](</span> + currImg.attr(<span class="hljs-string">)
) + '>');
} 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条评论