使用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图片放大离开缩小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js自动查找select下拉的菜单并选择(示例代码)需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了JS一维数组转多维数组树的方法,文章通过代码示例给大家讲解的非常详细, 对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-06-06
刚看到笑看风云写的JavaScript面向对象(极简主义法)和一个分解url参数面试题，我作了一下修改，记录下来2012-08-08
js动态改变select选择变更option的index值示例
今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删，然后再 删除索引小的2014-07-07
在我们日常开发中经常要验证客户输入的手机号是否正确，有的时候还需要将中间的四位或者前几位用星号(*)代替，那该如何实现呢？下面跟着小编一起来看看。2016-08-08
js实时监听文本框状态的方法,这里的方法兼容性不是很好，建议参考脚本之家以前的文章。2011-04-04
这篇文章主要介绍了微信小程序项目实践之主页tab选项实现,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-07-07
javascript中break，continue和return语句用法小结
break，continue和return这三个语句的用法新手们经常弄混淆，至少在我学习c语言的时候经常把它们的用法给搞错。不过现在好了，我已彻底搞清楚它们之间的用法2012-05-05
这篇文章主要介绍了微信小程序扫描二维码获取信息，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
下面小编就为大家分享一篇select标签设置默认选中的选项方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论