使用JS实现鼠标放上图片进行放大离开实现缩小功能
更新时间：2021年01月27日 16:04:46 作者：bug开发工程师.
这篇文章主要介绍了使用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图片放大离开缩小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
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创建对象的常用方式,结合实例形式总结分析了javascript面向对象程序设计中对象创建的常见方式、相关操作技巧与注意事项,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
因为在移动端APP需要实现长按执行别的事件，但是在iOS系统有默认的长按选择复制粘贴。禁止在网上找了很多资料，下面小编给大家分享解决方案，一起看看吧2016-12-12
最新评论