这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了原生 js 实现图片放大缩小计时器效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
知识要点
- var fn=setInterval(function(){},1000)
每隔 1 秒执行一次函数
- clearInterval(fn)
清除计时器
判断当图片放大缩小到固定大小时,清除计时器
完整代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>demo</title>
- <style>
- body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
- body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
- h1,h2,h3,h4,h5,h6{font-size:100%;}
- address,cite,dfn,em,var{font-style:normal;}
- code,kbd,pre,samp{font-family:courier new,courier,monospace;}
- small{font-size:12px;}
- ul,ol{list-style:none;}
- a{text-decoration:none;}
- a:hover{text-decoration:underline;}
- sup{vertical-align:text-top;}
- sub{vertical-align:text-bottom;}
- legend{color:#000;}
- fieldset,img{border:0;}
- button,input,select,textarea{font-size:100%;}
- table{border-collapse:collapse;border-spacing:0;}
- .clear{clear: both;float: none;height: 0;overflow: hidden;}
- </style>
- </head>
- <body>
- <div style="width:400px;margin:0 auto;">
- <img src="http://img.mukewang.com/53577ee900016c2102080260.jpg" id="myImage" /><br>
- <input type="button" id="max" value="放大" />
- <input type="button" id="min" value="缩小" />
- </div>
- <script type="text/javascript">
- function pic_max(){
- var maxBtn=document.getElementById("max");
- var minBtn=document.getElementById("min");
- maxBtn.onclick=function(){
- max();
- }
- var img=document.getElementById("myImage");
- var maxHeight=img.height*2;
- var maxWidth=img.width*2;
- function max(){
- var endHeight=img.height*1.3;
- var endWidth=img.width*1.3;
- var maxTime=setInterval(function(){
- if(img.height<endHeight&&img.width<endWidth){
- if(img.height<maxHeight&&img.width<maxWidth){
- img.height=img.height*1.05;
- img.width=img.width*1.05;
- }else{
- alert("图片已经是最大值了")
- clearInterval(maxTime);
- }
- }else{
- clearInterval(maxTime);
- }
- },20);
- }
- minBtn.onclick=function(){
- min();
- }
- var img=document.getElementById("myImage");
- var minHeight=img.height*0.5;
- var minWidth=img.width*0.5;
- function min(){
- var overHeight=img.height*0.7;
- var overWidth=img.width*0.7;
- var minTime=setInterval(function(){
- if(img.height>overHeight&&img.width>overWidth){
- if(img.height>minHeight&&img.width>minWidth){
- img.height=img.height*0.95;
- img.width=img.width*0.95;
- }else{
- alert("图片已经是最小值了")
- clearInterval(minTime);
- }
- }else{
- clearInterval(minTime);
- }
- },20);
- }
- }
- window.onload=function(){
- pic_max();
- }
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0531/328307.html