JS 图片缩放效果代码
程序员文章站
2022-07-04 12:40:58
复制代码 代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>onmousewheel</title>
<script>
var count = 10;
function picture()
{
count = counting(count);
resize(count);
return false;
}
function counting(count){
if (event.wheeldelta >= 120)
count++;
else if (event.wheeldelta <= -120)
count--;
return count;
}
function resize(count){
oimage.style.zoom = count + '0%';
ocounter.innertext = count + '0%';
}
</script>
</head>
<body>
<div align=center>
<span style="font-weight:bold">size =
<span id="ocounter" style="color:red;">100%</span></span>
<img id="oimage" src="images/aaa.gif" onmousewheel="return picture();" >
</div>
</body>
</html>
复制代码 代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>onmousewheel</title>
<script>
var count = 10;
function picture()
{
count = counting(count);
resize(count);
return false;
}
function counting(count){
if (event.wheeldelta >= 120)
count++;
else if (event.wheeldelta <= -120)
count--;
return count;
}
function resize(count){
oimage.style.zoom = count + '0%';
ocounter.innertext = count + '0%';
}
</script>
</head>
<body>
<div align=center>
<span style="font-weight:bold">size =
<span id="ocounter" style="color:red;">100%</span></span>
<img id="oimage" src="images/aaa.gif" onmousewheel="return picture();" >
</div>
</body>
</html>
上一篇： 这届币圈年轻人，搞NFT到底有多“野”？
下一篇： js 图片上传前大小长宽验证代码