实现功能：点击小照片查看原照片
工作忙，没用的话不要复制代码，看效果就行了
可以放入自己的照片作为test demo使用
！ DOCTYPE html
html lang='en '
头儿
meta charset='UTF-8 '
titleDocument/title
斯泰尔斯
. small_img {
width: 30px；
}
/*#close {
定位：助手；
left: 10px；
top: -5px；
字体大小： 12px；
颜色：红色；
cursor: pointer；
) /
/style
/head
身体
PID=' bb ' img class=' small _ img ' src=' timg.JPEG '/p
divid=' big _ div ' style=' display : none； 位置：关系；' ！ -弹出层-
！ -- p id='close '关闭/P-
PID=' aa ' img class=' big _ img ' src=' timg.JPEG '/p
/div
script src=' https://cdn.boot CSS.com/jquery/3.3.1/jquery.min.js '/script
脚本
$ (document.ready (function ) )。
varsmall=$(.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 (； //小照片高度
varbigwidth=$(.big_img ) ).width )； //大图宽度
varbigheight=$('.big_img ' ).height )； //大图高度
var small _ str=small width ' x ' small height '像素'；
var big _ str=big width ' x ' big height '像素'；
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 (；
)；
)；
/脚本
/body
/html
转载于：https://my.oschina.net/chaojiaheng/blog/3020061