html js 鼠标变图片大小,js之图片变大变小效果

淩亂°似流年 2022-10-06 08:57 382阅读 0赞

1、当鼠标移到图片上，图片变大；当鼠标移出图片，图片变小，效果如图：

![c163c928e3d53b6757b3c778431f385d.png][]

![363ce0be4a2f8670d738315cd869359d.png][]

2、原理不难，就是鼠标over时，设置一个定时器，让图片逐渐变大，鼠标out时同理，看下最初的简略代码你就会明白：

html>

div \{

width: 200px;           /\* 宽度 \*/

height: 100px;          /\* 高度 \*/

border: 1px solid red;  /\* 边框 \*/

margin: 100px auto;     /\* 外边距 \*/

overflow: hidden;       /\* 溢出隐藏 \*/

\}

img \{

width: 200px;           /\* 宽度 \*/

height: 100px;          /\* 高度 \*/

cursor: pointer;        /\* 鼠标变手 \*/

\}

// js代码

js代码：

window.onload = function()\{

var img = document.getElementById('img');         // 获取img标签

var width = img.width;                            // 初始化img宽度

var height = img.height;                          // 初始化img高度

var marginLeft = 0;                               // 初始化img左外边距

var marginTop = 0;                                // 初始化img上外边距

var overTimer = null;                             // 初始化定时器，用于鼠标接触时

var outTimer = null;                              // 初始化定时器，用于鼠标离开时

img.onmouseover = function()\{                     // 鼠标接触img

clearInterval(outTimer);                      // 清除鼠标离开的定时器

overTimer = setInterval(function()\{           // 设置鼠标接触触发的定时器，时距15毫秒

width = width + 2;                        // 宽度+2

height = height + 1;                      // 高度+1

marginLeft = marginLeft - 1;              // 左外边距-1

marginTop = marginTop - 0.5;              // 上外边距-0.5

img.style.width = width + 'px';           // 设置img宽度

img.style.height = height + 'px';         // 设置img高度

img.style.marginLeft = marginLeft + 'px'; // 设置img左外边距

img.style.marginTop = marginTop + 'px';   // 设置img上外边距

if (width >= 270) \{                       // 如果img宽度大于某值

clearInterval(overTimer);             // 清除定时器

\};

\}, 15);

\};

img.onmouseout = function()\{                      // 鼠标离开img

clearInterval(overTimer);                     // 清除鼠标接触的定时器

outTimer = setInterval(function()\{            // 设置鼠标离开触发的定时器，时距15毫秒

width = width - 2;                            // 宽度-2

height = height - 1;                          // 高度-1

marginLeft = marginLeft + 1;                  // 左外边距+1

marginTop = marginTop + 0.5;                  // 上外边距+0.5

img.style.width = width + 'px';               // 设置img宽度

img.style.height = height + 'px';             // 设置img高度

img.style.marginLeft = marginLeft + 'px';     // 设置img左外边距

img.style.marginTop = marginTop + 'px';       // 设置img上外边距

if (width <= 200) \{                           // 如果img宽度小于某值

clearInterval(outTimer);                  // 清除定时器

\};

\}, 15);

\};

\};

[c163c928e3d53b6757b3c778431f385d.png]: /images/20221005/6723fafbbd1c4759bf95019f463d7616.png
[363ce0be4a2f8670d738315cd869359d.png]: /images/20221005/1361e361115a446d8287d25c7f562f2f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，382人围观）

还没有评论，来说两句吧...

相关阅读

相关 html+css实现图片缓慢变大效果

html+css实现图片缓慢变大效果简介：本文讲解如何使用html+css实现让图片缓慢变大的效果。完整代码下面是是这代码的完整代码和对应的解释。在页

布满荆棘的人生/ 2024年03月23日 17:07/ 0 赞/ 38 阅读

相关【图片压缩】把图片的kb变小

一、在画图工具中打开该图片后点击“重新调整大小”选项。 ![在这里插入图片描述][57d198c783ef4b94b811f7d03a609e83.png]二、在弹出的窗口

绝地灬酷狼/ 2023年09月24日 17:58/ 0 赞/ 24 阅读

相关 html js 鼠标变图片大小,js之图片变大变小效果

1、当鼠标移到图片上，图片变大；当鼠标移出图片，图片变小，效果如图： ![c163c928e3d53b6757b3c778431f385d.png][] ![363ce0b

淩亂°似流年/ 2022年10月06日 08:57/ 0 赞/ 383 阅读

相关 html5鼠标悬停图片变淡,HTML5实现网页图片鼠标悬停黑白变换效果

使用HTML5画布，图像可以被巧妙的转换为灰色，而不必使用图像编辑软件。下面的示例将展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。贡献者：感谢达西·克拉克

深碍√TFBOYSˉ_/ 2022年10月06日 00:57/ 0 赞/ 209 阅读

相关 jquery鼠标移上图片变暗

<!doctype html> <html> <head> <meta charset="utf-8"> <title>hover</t

àì夳堔傛蜴生んèń/ 2022年09月26日 11:54/ 0 赞/ 172 阅读

相关 CSS3实现鼠标移动到图片上图片变大

.story-lists img{ transition: all 0.4s cubic-bezier(0.215, 0.61, 0.

待我称王封你为后i/ 2022年09月11日 00:27/ 0 赞/ 136 阅读

相关 js访问url变，IE显示不变

function sendRequest(url)\{ createXMLHttpRequest(); XMLHttpR.open("GET",u

ゞ浴缸里的玫瑰/ 2022年07月24日 10:28/ 0 赞/ 124 阅读

相关鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

曾经终败给现在/ 2022年06月12日 10:52/ 0 赞/ 208 阅读

相关编程小知识之协变和逆变

> 本文简述了 C\ 中协变和逆变的一些知识在 C\ 中, 协变和逆变能够实现数组类型和委托类型的隐式引用转换, .NET Framework 4 (包括)以

短命女/ 2022年04月23日 06:10/ 0 赞/ 183 阅读

相关 css 使图片变模糊

.blur { filter: url(blur.svgblur); / FireFox, Chrome, Opera / -we

﹏ヽ暗。殇╰゛Y/ 2021年09月03日 07:03/ 0 赞/ 371 阅读