原生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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
Javascript 读后台cookie代码
Sep 15 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
javascript事件处理模型实例说明
May 31 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
微信小程序的线程架构【推荐】
May 14 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
详解基于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
2009/06/29 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
python 实现逻辑回归
2020/12/30 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
学生会副主席竞聘书
2014/03/31 职场文书
小学数学教研活动总结
2014/07/01 职场文书
机关作风建设自查报告
2014/10/22 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
python 如何在list中找Topk的数值和索引
2021/05/20 Python