点击图片弹出新图层，鼠标滚动控制图片大小
点击图片弹出新图层，鼠标滚动控制图片大小
photo.html
新建div标签，显示img图片，新建一个img空标签作为新图层
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./photo.css">
<script type="text/javascript" src="photo.js"></script>
</head>
<body>
<div class="second">
<img src="./image/photo.png" alt="文本图片" id="oImage" onClick="btnClick()">
</div>
<img src="" alt="" id="tanchuimg" onmousewheel="return Picture();">
</body>
photo.css
.second {
width: 100px;
height: 100px;
/*内部文字垂直水平居中*/
text-align: center;
line-height: 100px;
}
.second img {
width: 100%;
height: 100%;
margin-top: 30px;
}
#tanchuimg {
/*默认新图层不显示*/
display: none;
width: 600px;
height: 600px;
/*水平水平居中*/
position: absolute;
margin: auto;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
photo.js
第一次点击小图片时，页面弹出新的图层显示图片，可以通过鼠标滚动来控制图片的显示大小，第二次点击小图片时，新图层消失，循环反复
//设置flag，用于判断是否显示新的图层
var flag=false;
function btnClick(){
//falg取反
flag = !flag;
//放falg=true时，显示新的图层
if(flag){
document.getElementById('tanchuimg').style.display = "block";
document.getElementById('tanchuimg').src="./image/photo.png";
}
//否则关闭新图层
else {
document.getElementById('tanchuimg').style.display = "none";
}
}
var count = 10;
function Picture() {
count = Counting(count);
Resize(count);
return false;
}
//判断鼠标滑轮滚动的距离，如果滚动大于120，则放大一倍
function Counting(count) {
if(event.wheelDelta >= 120){
count++;
}
//判断鼠标滑轮滚动的距离，如果滚动小于120，则缩小一倍
else if(event.wheelDelta <= 120) {
count--;
}
return count;
}
//控制百分比
function Resize(count) {
tanchuimg.style.zoom = count + '0%';
oCounter.innerText = count + '0%';
}
OPPO公司福利 1262人发布
查看24道真题和解析