您的位置：首页 > Web前端 > JavaScript

用JS实现，图片放大和缩小

2016-10-28 22:36 483 查看

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; min-height: 29.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #929151; min-height: 29.0px }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #4a8a01 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #d16400 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #a5b2b9 }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #4f5d66 }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 25.0px Consolas; color: #4663cc }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #060606 }
span.s7 { color: #929151 }
span.s8 { color: #4a8a01 }
span.s9 { color: #ad42ef }
span.s10 { color: #698906 }
span.s11 { color: #000000 }
span.s12 { color: #d16400 }
span.s13 { color: #e48b00 }
span.s14 { color: #4663cc }
span.s15 { color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

img {

margin: 100px 0px 0px 500px;

}

#div2 {

margin-left: 500px;

}

#max,

#min {

display: inline-block;

border: 1px solid aqua;

font-size: 30px;

border-radius: 50%;

background-color: #FFFF00;

outline: none

}

</style>

</head>

<body>

<div id="div1">



<img src="http://img0.imgtn.bdimg.com/it/u=1244475385,1750660751&fm=21&gp=0.jpg" id="myImage"/>

</div>

<div id="div2">

<input type="button" id="max" value="放大" />

<input type="button" id="min" value="缩小" />

</div>

</body>

<script type="text/javascript">

//setInterval(fun,time) 每隔一段时间执行一次规定的函数

//一直循环下去，时间以毫秒为单位

//例如：

//var timer=setInterval(function(){alert(1)},1000);

//clearInterval(timer): 清除时间函数，终止时间函数继续执行。

//例如：clearInterval(timer)

// 步骤：

//１.添加页面元素，实现页面布局

//2.在页面布局的基础上，通过使用javascript来控制操作按钮，

//从而实现页面的交互效果

//３.

window.onload = function() {

var maxBth = document.getElementById("max");

maxBth.onclick = function() { //添加放大点击事件

//放大函数

maxFun();

}

var img = document.getElementById("myImage");

var maxWidth = img.width * 2; //放大的极限值

var maxHeight = img.height * 2; //放大的高度的极限值

//定义放大函数

function maxFun() {

var endWidth = img.width * 1.3; //每次点击后的宽度

var endHeight = img.height * 1.3; //每次点击后的高度

var maxTimer = setInterval(function() {　

if(img.width < endWidth) {

if(img.width < maxWidth) {

img.width = img.width * 1.05;

img.height = img.height * 1.05;

} else {

alert("已经放大到最大值了")

clearInterval(maxTimer);

}

} else {

clearInterval(maxTimer);

}

}, 20);

}

var minBtn = document.getElementById("min");

minBtn.onclick = function() {

minFun();

}

var minWidth = img.width * 0.5; //缩小宽度的极限值

var minHeight = img.height * 0.5; //缩小高度的极限值

//实现缩小函数

function minFun() {

var endWidth = img.width * 0.7; //每次点击后的宽度

var endHeight = img.height * 0.7; //每次点击后的高度

var maxTimer = setInterval(function() {　

if(img.width > endWidth) {

if(img.width > minWidth) {

img.width = img.width * 0.95;

img.height = img.height * 0.95;

} else {

alert("已经缩小到最小值了")

clearInterval(maxTimer);

}

} else {

clearInterval(maxTimer);

}

}, 20);

}

}

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航