js-图片缩放

最新推荐文章于 2022-03-19 16:26:40 发布

xiaobai12123

最新推荐文章于 2022-03-19 16:26:40 发布

阅读量296

点赞数

分类专栏： Javascript 文章标签：图片

本文链接：https://blog.csdn.net/xiaobai12123/article/details/78751218

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

有4张图片，点击某一张，变大，其他回复正常大小
效果图如下

代码如下

<!DOCTYPE html>
<html>
<head>
    <title>图片缩放</title>
    <style type="text/css">
        .first
        {
            width: 200px;
            height: 300px;
        }
        .second
        {
            width: 400px;
            height: 400px;
        }
    </style>
    <script type="text/javascript">
        function change(obj) {
            var imgs = document.getElementsByTagName("img");
            for(var i=0;i<imgs.length;i++)
                imgs[i].className="first";
            obj.className="second";
        }

    </script>
</head>
<body>
    <img src="D:\\图片\\QQ截图20160616215058.png" id="one" class="first" onclick="change(this)">
    <img src="D:\\图片\\QQ截图20170521133435.png" id="two" class="first" onclick="change(this)">
    <img src="D:\\图片\\QQ截图20170521133638.png" id="three" class="first" onclick="change(this)">
    <img src="D:\\图片\\TIM截图20170701112403.png" id="four" class="first" onclick="change(this)">
</body>
</html>

注：图片地址另配

xiaobai12123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-图片缩放

有4张图片，点击某一张，变大，其他回复正常大小效果图如下代码如下<!DOCTYPE html><html><head> <title>图片缩放</title> <style type="text/css"> .first { width: 200px; height: 300
复制链接

扫一扫

专栏目录