使用JS實現鼠標放上圖片進行放大離開實現縮小功能，具體代碼如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!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實現手指觸摸圖片放大縮小特效源碼
到此這篇關于使用JS實現鼠標放上圖片進行放大離開實現縮小功能的文章就介紹到這了,更多相關js圖片放大離開縮小內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/kongge123456/article/details/104901135
