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