使用JS實現鼠標放上圖片進行放大離開實現縮小功能
更新時間：2021年01月27日 16:04:46 作者：bug開發(fā)工程師.
這篇文章主要介紹了使用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>
分享源碼，喜歡的朋友點擊查看：
基于jQuery插件Pinchzoom.js實現手指觸摸圖片放大縮小特效源碼
到此這篇關于使用JS實現鼠標放上圖片進行放大離開實現縮小功能的文章就介紹到這了,更多相關js圖片放大離開縮小內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
javascript實現window.print()去除頁眉頁腳
這篇文章主要介紹了javascript實現window.print()去除頁眉頁腳的方法以及各參數的設置技巧,需要的朋友可以參考下2014-12-12
Javascript hasOwnProperty 方法 & in 關鍵字
hasOwnProperty :如果 object 具有指定名稱的屬性，那么方法返回 true；反之則返回 false。2008-11-11
這篇文章主要為大家詳細介紹了原生JS貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
javascript實現的彈出層背景置灰-模擬(easyui dialog)
本文為大家介紹下使用javascript實現的彈出層背景置灰-模擬(easyui dialog) 具體實現如下，感興趣的朋友可以參考下2013-12-12
這篇文章主要為大家詳細介紹了JS對HTML表格進行增刪改操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了js實現拾色器插件ColorPicker，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了JavaScript+canvas實現七色板效果的方法,結合實例形式詳細分析了JavaScript結合html5的canvas技術實現繪制七色板效果的相關技巧,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了JavaScript創(chuàng)建對象的常用方式,結合實例形式總結分析了javascript面向對象程序設計中對象創(chuàng)建的常見方式、相關操作技巧與注意事項,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了微信小程序 textarea 層級過高問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
因為在移動端APP需要實現長按執(zhí)行別的事件，但是在iOS系統(tǒng)有默認的長按選擇復制粘貼。禁止在網上找了很多資料，下面小編給大家分享解決方案，一起看看吧2016-12-12