html+js实现图片的点击放大切换

a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

ul {
padding: 0;
}

li {
float: left;
list-style: none;
}

h4 {
margin: 10px 20px 20px 20px;
line-height: 30px;
color: #666666;
border-bottom: 1px solid #cccccc;
}

.imagegallery{
margin-top: 20px;
border: 1px solid #e1e1e1;
background-color: #f1f1f1;
display: block;
height: 168px;
width: 560px;
border-radius: 0 4px 4px 0;
}

.imagegallery li {
background-color: #fff;
margin: 0px 0px 0px 20px;
cursor: pointer;
border-radius: 4px;
border: 1px solid #d7d7d7;
}

.imagegallery li a {
position: relative;
display: block;
width: 80px;
height: 80px;
margin: 3px;
overflow: hidden;
border-radius: 4px;
}

.imgw {
width: 80px;
position: absolute;
left: 0;
top: 50%;
}

.imgh {
height: 80px;
position: absolute;
left: 50%;
top: 0;
}

.imge {
height: 80px;
width: 80px;
position: absolute;
left: 0;
top: 0;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
/*.modal-content {
margin: auto;
display: block;
/*width: 30%;
max-width: 100%;*/
}*/

/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
/*.modal-content,*/ #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}

@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}

/* 100% Image Width on Smaller Screens
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}*/

.but{width:40px;height:80px;position:absolute;top:266px;}
#but1{left:62px;background:url(images/photo/prev.png);}
#but2{right:62px;background:url(images/photo/next.png);}
</style>
</head>
<body>
<ul class="imagegallery">
<h4>图片标题</h4>
<li><a href="#"><img src="images/1.jpg" alt="图片" title="标题" class="001 " value="0"/></a></li>
<li><a href="#"><img src="images/1-small.jpg" alt="图片" title="标题" class="001 " value="1"/></a></li>
<li><a href="#"><img src="images/2-small.jpg" alt="图片" title="标题" class="001 " value="2"/></a></li>
<li><a href="#"><img src="images/2.png" alt="图片" title="标题" class="001 " value="3"/></a></li>
<li><a href="#"><img src="images/timge.png" alt="图片" title="标题" class="001 " value="4"/></a></li>
</ul>
<ul class="imagegallery">
<h4>图片标题</h4>
<li><a href="#"><img src="images/1.jpg" alt="图片" title="标题" class="002" value="0"/></a></li>
<li><a href="#"><img src="images/8.jpg" alt="图片" title="标题" class="002" value="1"/></a></li>
<li><a href="#"><img src="images/3.jpg" alt="图片" title="标题" class="002" value="2"/></a></li>
<li><a href="#"><img src="images/2.png" alt="图片" title="标题" class="002" value="3"/></a></li>
<li><a href="#"><img src="images/timge.png" alt="图片" title="标题" class="002" value="4"/></a></li>
</ul>
<ul class="imagegallery">
<h4>图片标题</h4>
<li><a href="#"><img src="images/1.jpg" alt="图片" title="标题"/></a></li>
<li><a href="#"><img src="images/1-small.jpg" alt="图片" title="标题"/></a></li>
<li><a href="#"><img src="images/2-small.jpg" alt="图片" title="标题"/></a></li>
<li><a href="#"><img src="images/2.png" alt="图片" title="标题"/></a></li>
<li><a href="#"><img src="images/timge.png" alt="图片" title="标题"/></a></li>
</ul>

//图片的缩略图
var $img = $(".imagegallery li img");
$($img).each(function () {
var imgWidth = $(this).width();
var imgHeigth = $(this).height();
if (imgWidth > imgHeigth) {
$(this).css({
marginLeft:'-'+parseInt((imgWidth/2)*(80/imgHeigth))+'px'
}).addClass("imgh");
}else if (imgWidth == imgHeigth||imgHeigth<=80||imgWidth<=80) {
$(this).addClass("imge")
}else if (imgWidth < imgHeigth) {
$(this).css(
"marginTop",'-'+parseInt((imgHeigth/2)*(80/imgWidth))+'px'
).addClass("imgw");
}
});

$("body").on('click','img',function(){
modal.style.display = "block";
var s = $(this).attr("src");
var _this = $(this);
f_show(s);
f_move(_this);
});
$("body").on('click','.but',function(){
modal.style.display = "block";
});

});
$("#myModal").click(function(){
modal.style.display = "none";
});
function f_show(s){
$("<img/>").attr("src", s).load(function(){
var windowW = $(window).width();//获取当前窗口宽度
var windowH = $(window).height();//获取当前窗口高度
var realWidth = this.width;//获取图片真实宽度
var realHeight = this.height;//获取图片真实高度
var imgWidth, imgHeight;
var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
//alert(realHeight>windowH*scale)
if(realHeight>windowH*scale) {//判断图片高度
imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
// alert(imgWidth>windowW*scale)
if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
imgWidth = windowW*scale;//再对宽度进行缩放
}
} else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
} else {//如果图片真实高度和宽度都符合要求，高宽不变
imgWidth = realWidth;
imgHeight = realHeight;
}

var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
//alert(w)
var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
$("#img01").attr("width",imgWidth)
var innerdiv = $("#innerdiv")
$(innerdiv).css({"top":h, "left":w});
$("#img01").attr("src",s)
});
var outterdiv = $("#myModal");
/*$(outerdiv).click(function(){//再次点击淡出消失弹出层
modal.style.display = "none";
});*/
}
function f_move(_this){
var cclass = _this.attr("class");
//alert(cclass)
var _class = cclass.split(" ")
var _value = _this.attr("value");
imgs = document.getElementsByClassName(_class[0]);//图片元素
var tab = _value;
var max = imgs.length-1;

//绑定左右键键盘，切换图片
$(window).keydown(function(e){
switch ((e||event).keyCode) {
case 37:
if(tab > 0){
tab -- ;
var _src = imgs[tab].src;
f_show(_src)
}else{
tab = max;
var _src = imgs[tab].src;
f_show(_src)
}
break;
case 39:
if(tab < max){
tab ++ ;
var _src = imgs[tab].src;
f_show(_src)
}else{
tab = 0;
var _src = imgs[tab].src;
f_show(_src)
}
break;
case 27://esc退出模态框
modal.style.display = "none";
break;
}
});
//按钮切换图片
$("#but1").click(function(){
if(tab > 0){
tab -- ;
var _src = imgs[tab].src;
f_show(_src)
}else{
tab = max;
var _src = imgs[tab].src;
f_show(_src)
}

});
$("#but2").click(function(){
if(tab < max){
tab ++ ;
var _src = imgs[tab].src;
f_show(_src)
}else{
tab = 0;
var _src = imgs[tab].src;
f_show(_src)
}

});
}

// 获取 <span> 元素，设置关闭模态框按钮
var span = document.getElementsByClassName("close")[0];

// 点击 <span> 元素上的 (x), 关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
</script>

</body>
</html>

html+js实现图片的点击放大切换

猜你喜欢