JS实现图片缩放功能

最新推荐文章于 2022-03-04 14:04:33 发布

JAVAZHICHIZHE

最新推荐文章于 2022-03-04 14:04:33 发布

阅读量534

点赞数

分类专栏： Web前端文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/JAVAZHICHIZHE/article/details/83678164

版权

Web前端专栏收录该内容

79 篇文章 0 订阅

订阅专栏

在上网时经常会看到有图片缩放的功能，于是今天自己也动手写了一个，以下是源代码：

<html>

<head>

<title>图片自动缩放</title>

</head>

<body>
<script language="javascript">

</script>
<img src="收藏1.jpg" border="0" onmousewheel="return bimg(this)">
<img src="收藏1.jpg" border="0" id="pic"><a href="#" οnclick="return limg();">放大</a> <a href="#" οnclick="return simg();">缩小</a>

</body>

</html>

————说明：上述代码中用到了三个函数，第一个函数是用滚轮去控制缩放的，第二个与第三个则是通过点击链接控制的。

1、 parseInt()方法用于将一个字符串转换为整型数字，其中parseInt(xxx,10),代表把字符串转化成整数，10代表十进制，同理8，16等分别代表八进制和十六进制

2、 style.zoom属性主要是用来显示元素的放大比例

3、 event.wheelData属性为onmousewheel事件返回的一个表示鼠标滑轮滚动方向的整数，返回值一般式120或120，正值表示滚轮向上滚动，负值表示向下滚动。

4、 onmousewheel事件表示当鼠标中间滚轮滚动时获取通知。

JAVAZHICHIZHE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现图片缩放功能

在上网时经常会看到有图片缩放的功能，于是今天自己也动手写了一个，以下是源代码：图片自动缩放放大&nbsp;&nbsp;缩小 ————说明：上述代码中用到了三个函数，第一个函数是用滚轮去控制缩放的，第二个与第三个则是通过点击链接控制的。...
复制链接

扫一扫