使用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);
})
})
© 版权声明
THE END
暂无评论内容