原生js实现图片放大缩小计时器效果


Posted in Javascript onJanuary 20, 2017

知识要点

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
详解基于angular路由的requireJs按需加载js
Jan 20 #Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 #Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 #Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 #Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 #Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 #Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 #Javascript
You might like
php date()日期时间函数详解
2010/05/16 PHP
php ci框架验证码实例分析
2013/06/26 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
JS中eval函数的使用示例
2013/07/21 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python制作Windows系统服务
2017/03/25 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
Java程序员面试题
2016/09/27 面试题
职员竞岗演讲稿
2014/05/14 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
租车协议书
2015/01/27 职场文书
春节慰问信范文
2015/02/15 职场文书
培训班开班主持词
2015/07/02 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书