使⽤JS实现⿏标放上图⽚进⾏放⼤离开实现缩⼩功能使⽤JS实现⿏标放上图⽚进⾏放⼤离开实现缩⼩功能,具体代码如下所⽰:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id= 'div_jpg' >
<img src="./128206.jpg" id="img" >
</div>
<script>
var img = ElementById('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)+'%';html特效代码照片
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>
分享源码,喜欢的朋友点击查看:
到此这篇关于使⽤JS实现⿏标放上图⽚进⾏放⼤离开实现缩⼩功能的⽂章就介绍到这了,更多相关js图⽚放⼤离开缩⼩内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。