使用JS實現滑鼠放上圖片進行放大離開實現縮小功能
阿新 • • 發佈：2021-01-29
使用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>分享原始碼，喜歡的朋友點選檢視：
基於jQuery外掛Pinchzoom.js實現手指觸控圖片放大縮小特效原始碼
jquery滑鼠懸停圖片放大滑動顯示標題特效
到此這篇關於使用JS實現滑鼠放上圖片進行放大離開實現縮小功能的文章就介紹到這了,更多相關js圖片放大離開縮小內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！