原生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 相关文章推荐
jQuery实现长文字部分显示代码
May 13 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JavaScript之数组扁平化详解
Jun 03 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
原生js实现九宫格拖拽换位
Jan 26 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP XML数据解析代码
2010/05/26 PHP
php实现简单洗牌算法
2013/06/18 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
关于Python作用域自学总结
2019/06/10 Python
python range实例用法分享
2020/02/06 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python实现仿射密码的思路详解
2020/04/23 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
音乐专业应届生教师求职信
2013/11/04 职场文书
大学三年的自我评价
2013/12/25 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
广告创意求职信
2014/03/17 职场文书
煤矿安全协议书
2014/08/20 职场文书
高中生综合素质自我评价
2015/03/06 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript