长沙网站建设JS效果之滚轮缩放文本框

长沙网站建设JS效果之——滚动鼠标滚轮使文本框进行缩放

一、效果简介

本效果通过滚动鼠标滚轮调整文本框的尺寸，使文本框实现进行放大或缩小。

二、基础代码展示

（Html与Css代码图）

（Js代码展示图）

长沙网站建设 通过 Javascript 监听鼠标滚轮事件，根据滚动方向进行缩放比例计算（每次滚动缩放比例为10%），并同时通过反向调整文本框容器尺寸（原始尺寸/缩放比例），已达到缩放的效果。在文本框内的文字，也会根据变化后的宽度，自动进行换行。

三、效果展示

将代码保存好后，我们打开浏览器得到如下页面：

（原始效果图一）

（文本框变大效果图）

当长沙网站开发将鼠标移动到文本框上方时，光标发生变化，表明已经到了可以操作的区域。

此时我们向后滚动滚轮，文本框会向右边逐渐扩大，如上图。

而向前滚动滚轮时，文本框则会向左收缩回来，如下图。

（文本框缩小效果图）

四、效果应用场合

本效果适合用在专业的代码编辑器与富文本编辑器上，放大效果便于让使用者查看到细节，缩小效果则可以使其迅速看到文件全局。

以上就是长沙网站制作整理出的滚动鼠标滚轮使文本框进行缩放的方法，希望能对您有所帮助！