原生js实现图片放大缩小计时器效果
更新时间：2017年01月20日 11:38:35 作者：夏天不做梦
本文主要介绍了原生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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
javascript之Partial Application学习
在数学中，一个函数是描述每个输入值对应唯一输出值的这种对应关系，符号为 f(x)。例如，表达式 f(x)=x2表示了一个函数 f，其中每个输入值x都与唯一输出值x2相联系2013-01-01
下面小编就为大家带来一篇js判断出两个字符串最大子串的函数实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
onsubmit阻止form表单提交与onclick的相关操作
return false会阻止表单提交，基本上关于onsubmit=return false有以下几点要注意的地方，学习后台编程的朋友一定要知道。2010-09-09
JavaScript中的noscript元素属性位置及作用介绍
Javascript插入到XHTML中要使用script元素，使用这个元素可以把Javascript嵌入到XHTML页面中，让脚本与标记混合在一起，感兴趣的朋友可以了解下2013-04-04
本篇文章主要介绍了js实现添加删除表格（两种方法）的实例代码。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
简单谈谈offsetleft、offsetTop和offsetParent
这篇文章主要给大家介绍了offsetleft、offsetTop和offsetParent的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要给大家介绍了关于JS如何实现Base64编码和解码及中文乱码问题的相关资料,Base64编码是一种常用的将二进制数据转换为文本数据的方式,文中通过代码介绍的非常详细，需要的朋友可以参考下2023-10-10
原生JavaScript实现remove()和recover()功能示例
这篇文章主要介绍了原生JavaScript实现remove()和recover()功能,结合实例形式分析了javascript实现类似jQueryremove()和recover()功能的自定义函数,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了js中如何通过父级进行查找定位元素,需要的朋友可以参考下2014-06-06
这篇文章主要为大家详细介绍了JS调用安卓手机摄像头扫描二维码，并用JS解析二维码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
最新评论