soarli

使用Javascript实现图片点击放大功能
前言一转眼的功夫,寒假过去了,已经开学两天了,然而还在摸鱼qwq,不能再这样废下去了,小小的手机查阅课表很不方便,...
扫描右侧二维码阅读全文
19
2020/02

使用Javascript实现图片点击放大功能

前言

一转眼的功夫,寒假过去了,已经开学两天了,然而还在摸鱼qwq,不能再这样废下去了,小小的手机查阅课表很不方便,把它截图放在h文件里挂到网站上挺香的。单双周课表加时间表三张图。新的问题又来了:文字太小!!如果能实现点击放大功能就妙极了。

行动

定义了三个相同的js放大函数,通过css给图像设置缺省值,通过超链接调用;顺便加了个不蒜子计数器,不啰嗦了,直接上代码:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>课程表</title>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  <!--
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
-->
</head>
<style type="text/css">
    .main_div{
        margin: 20px auto;
        text-align: center;

    }
    .pic_div{
        position: relative;
        background-color: pink;
        border: 1px dotted red;
        margin: 10px auto;
        width: 800px;
        height: 600px;
    }
    img{
        width: 420px;
        height: 600px;
    }


</style>
<script type="text/javascript">
    function bigit(){
        var image=document.getElementsByClassName("pic")[0];
        image.style.height=image.height*1.1+'px';
        image.style.width=image.width*1.1+'px';
    }
    function bigit2(){
        var image=document.getElementsByClassName("pic2")[0];
        image.style.height=image.height*1.1+'px';
        image.style.width=image.width*1.1+'px';
    }
    function bigit3(){
        var image=document.getElementsByClassName("pic3")[0];
        image.style.height=image.height*1.1+'px';
        image.style.width=image.width*1.1+'px';
    }    
</script>



<body>
<div  style="" class="main_div">
<p><a href="javascript:bigit();"><img border="0" src="dz.jpg" width="430" height="600" class="pic"></a>
<a href="javascript:bigit2();"><img border="0" src="time.jpg" width="429" height="600" class="pic2"></a>
<a href="javascript:bigit3();"><img border="0" src="sz.jpg" width="423" height="600" class="pic3"></a></p>

</div>
  <center>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <span id="busuanzi_container_site_pv">本页pv:<span id="busuanzi_value_page_pv"></span></span>
    </center>
</body>

</html>

如果要给图像放大设置区间,可以这样写:

<!DOCTYPE html>
<html>
<head>
    <title>图片放大</title>
</head>
<style type="text/css">
    .main_div{
        margin: 20px auto;
        text-align: center;

    }
    .pic_div{
        position: relative;
        background-color: pink;
        border: 1px dotted red;
        margin: 10px auto;
        width: 800px;
        height: 600px;
    }
    img{
        width: 600px;
        height: 400px;
    }

</style>
<script type="text/javascript">
    function bigit(){
        var image=document.getElementsByClassName("pic")[0];
        image.style.height=image.height*1.1+'px';
        image.style.width=image.width*1.1+'px';
    }
    function littleit(){
        var image=document.getElementsByClassName("pic")[0];
        image.style.height=image.height/1.1+'px';
        image.style.width=image.width/1.1+'px';
    }
</script>
<body>
    <div  style="" class="main_div">
        <p>图片在一个区域里放大缩小</p>
        <button onclick="bigit()">图片放大</button>&nbsp;&nbsp;<button onclick="littleit()">图片缩小</button>
        <div class="pic_div">
            <img src="bgcc.jpg" class="pic">
        </div>
    </div>

</body>
</html>

参考文献:https://blog.csdn.net/meiqi0538/article/details/82431893

最后修改:2020 年 04 月 01 日 10 : 26 PM

发表评论