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