前言
一转眼的功夫，寒假过去了，已经开学两天了，然而还在摸鱼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> <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
版权属于：soarli
本文链接：https://blog.soarli.top/archives/96.html
转载时须注明出处及本声明。
