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

Posted 大耳朵兔兔兔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JS实现,图片放大和缩小相关的知识,希望对你有一定的参考价值。

<!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="img/001.jpg" id="myImage" />-->

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

 

// 步骤:

//1.添加页面元素,实现页面布局

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

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

//3.

 

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>

以上是关于用JS实现,图片放大和缩小的主要内容,如果未能解决你的问题,请参考以下文章

pc端 前端页面 js灯箱效果能放大缩小吗

JS控制图片放大和缩小怎么改

javascript高手请进!关于就js控制网页图片放大缩小的问题

怎么用js实现图片点击时放大,再点击恢复

求一个简单的点击图片放大缩小的JS代码

在html中怎么用js实现鼠标指向图片时图片放大的效果?(具体实现)