使用JS实现鼠标放上图片进行放大离开实现缩小功能_js教程

使用JS实现鼠标放上图片进行放大离开实现缩小功能

2022-01-10 16:27bug开发工程师. js教程

这篇文章主要介绍了使用JS实现鼠标放上图片进行放大离开实现缩小功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

				?

									<!DOCTYPE html>

									<html>

									<head>

									    <title></title>

									</head>

									<body>

									    <div id= 'div_jpg' style="width: 200px;height: 200px;">

									        <img src="./128206.jpg" id="img" style="width: 100%;height: 100%;">

									    </div>

									    <script>

									        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); 

									            })

									        })

									    </script>

									</body>

									</html>