实现功能：点击小图查看原图
工作比较紧张，废话不多少复制代码，查看效果就行
放一张自己的照片可以用作test demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.small_img {
width: 30px;
}
/*#close {
position: absolute;
left: 10px;
top: -5px;
font-size: 12px;
color: red;
cursor: pointer;
}*/
</style>
</head>
<body>
<p id="bb"><img class='small_img' src='timg.jpeg'/></p>
<div id='big_div' style="display:none;position: relative;"><!-- 弹出层 -->
<!-- <p id="close">关闭</p> -->
<p id="aa"><img class="big_img" src='timg.jpeg'/></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var small = $('.small_img'); //小图
var big_div = $('#big_div'); //大图弹出层
var small_size = $('#small_size'); //显示小图实际尺寸区域
var big_size = $('#big_size'); //显示大图实际尺寸区域
var smallWidth = small.width(); //小图宽度
var smallHeight = small.height(); //小图高度
var bigWidth = $('.big_img').width(); //大图宽度
var bigHeight = $('.big_img').height(); //大图高度
var small_str = smallWidth + ' X ' + smallHeight + ' 像素';
var big_str = bigWidth + ' X ' + bigHeight + ' 像素';
small_size.text(small_str); //显示小图片实际尺寸
small.click(function () { //点击显示大图弹出层
big_div.show();//也可换做big_div.toggle();去除关闭按钮
big_size.text(big_str);
$('#bb').hide();
});
$('#aa').click(function () {
big_div.hide();
$('#bb').show();
});
});
</script>
</body>
</html>
1529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
