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

淩亂°似流年 2022-10-06 08:57 484阅读 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);

};

};

发表评论

表情：
评论列表 （有 0 条评论，484人围观）

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

相关阅读