服务器之家

服务器之家 > 正文

使用JS实现鼠标放上图片进行放大离开实现缩小功能

时间:2022-01-10 16:27     来源/作者:bug开发工程师.

使用JS实现鼠标放上图片进行放大离开实现缩小功能,具体代码如下所示:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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实现手指触摸图片放大缩小特效源码

jquery鼠标悬停图片放大滑动显示标题特效

到此这篇关于使用JS实现鼠标放上图片进行放大离开实现缩小功能的文章就介绍到这了,更多相关js图片放大离开缩小内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/kongge123456/article/details/104901135

标签:

相关文章

热门资讯

蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部