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

时间：2017-02-09 编辑：简简单单来源：一聚教程网

知识要点

var fn=setInterval(function(){},1000)

每隔1秒执行一次函数

clearInterval(fn)

清除计时器

判断当图片放大缩小到固定大小时，清除计时器

完整代码

代码如下复制代码

demo

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>demotitle>

<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

if(img.height

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>

上一个：详解基于angular路由的requireJs按需加载js
下一个： jQuery中DOM节点删除之empty与remove

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程