html鼠标悬停图片自动缩小,使用JS实现鼠标放上图片进行放大离开实现缩小功能...

鼠标悬停图片自动缩小,使用JS实现鼠标放上图片进行放大离开实现缩小功能..."/>

html鼠标悬停图片自动缩小,使用JS实现鼠标放上图片进行放大离开实现缩小功能...

使用JS实现鼠标放上图片进行放大离开实现缩小功能，具体代码如下所示：

var img = document.getElementById('img')

var s1,s2

console.log(img)

// 图片放大效果

i = 100;

img.addEventListener('mouseover',function(){

clearInterval(s1);

s1 = setInterval(function(){

i+=0.1;

img.style.width = (i)+'%';

img.style.height = (i)+'%';

i = parseFloat(i);

if(i>=120) clearInterval(s1);

},1);

})

img.addEventListener('mouseout',function(){

clearInterval(s2);

s2 = setInterval(function(){

i-=0.1;

img.style.width = (i)+'%';

img.style.height = (i)+'%';

i = parseFloat(i);

if(i<=100) clearInterval(s2);

})

})

分享源码，喜欢的朋友点击查看：

到此这篇关于使用JS实现鼠标放上图片进行放大离开实现缩小功能的文章就介绍到这了,更多相关js图片放大离开缩小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！