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

// 步骤：

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

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

用JS实现，图片放大和缩小的更多相关文章

  1. 在cocos2d中实现真正意思上的图片放大和缩小

    http://www.cnblogs.com/dinghing154/archive/2012/08/05/2623970.html 在编写程序的时候我们常常使用self.scale来让我们使用的图片 ...

  2. CSS设置标签、图片放大、缩小、旋转、移动(tranform)

    CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...

  3. js 压缩图片（只缩小体积，不更改图片尺寸）

      1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...

  4. js控制图片放大缩小的简易版

    js代码: function bb_img_onmousewheel(e, o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += eve ...

  5. 测试cnblogs的代码折叠展开功能和zoom.js实现图片放大缩小冲突的问题

    #!/usr/bin/env python # -*- coding:utf- -*- def test(): print('from the test'

  6. H5端js实现图片放大滑动查看-插件photoswipe的使用

    最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑 ...

  7. c语言数字图像处理（二）：图片放大与缩小-双线性内插法

    图像内插 假设一幅大小为500 * 500的图像扩大1.5倍到750 * 750,创建一个750 * 750 的网格,使其与原图像间隔相同,然后缩小至原图大小,在原图中寻找最接近的像素(或周围的像素) ...

  8. java图片放大或缩小

    package org.jimmy.autotranslate20181022.utils; import java.awt.Graphics; import java.awt.image.Buffe ...

  9. vue图片放大、缩小、旋转等

    用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 效果: 安装 使用npm命令安装 npm install v-viewer 使用 引入v-viewer及必需的css样式 ...

随机推荐

  1. eclipse build path 以及 clean(转)

    1.设置"source folder"与"output folder". source folder:存放.Java源文件的根目录:output folder: ...

  2. Java中各种集合特点总结

    1:集合:    (1) Collection(单列集合)         List(有序,可重复)             ArrayList                 底层数据结构是数组,查 ...

  3. javascript删除JSON元素

    首先要搞清JSON的数据格式,我这里所说的JSON都是指javascript中的. JSON数据是由对象和数组数据结构组成,我们只要学会javascript中对对象和数组的删除方法即可对JSON项进行 ...

  4. review38

    Java程序中可以存在多个线程,但是在处理多线程问题时,必须注意这样一个问题:当两个或多个线程同时访问同一个变量,并且一些线程需要修改这个变量.这时可能发生混乱. 所谓线程同步就是若干个线程都需要一个 ...

  5. python3 列表属性

    1.合并 >>> l1=[1,2,3,'e']>>> l2=['f',34,'feel']>>> l1+l2[1, 2, 3, 'e', 'f', ...

  6. Java源码阅读的真实体会(一种学习思路)【转】

    Java源码阅读的真实体会(一种学习思路)   刚才在论坛不经意间,看到有关源码阅读的帖子.回想自己前几年,阅读源码那种兴奋和成就感(1),不禁又有一种激动. 源码阅读,我觉得最核心有三点:技术基础+ ...

  7. const、define与sizeof

    一.const的用途 1.定义const常量 2.可以修饰函数的形参,返回值,以及函数体.被const修饰的内容可以受到强制保护,防止被意外修改,提高程序健壮性. const 返回值 函数返回值为 c ...

  8. Docker-安装与部署

    本文在CentsOS下安装Docker 1.安装前准备工作 系统要求: 在CentOS下需要64位的CentsOS 7  OS requirements To install Docker, you ...

  9. ACM学习历程—SNNUOJ1215 矩阵2(二分 && dfs)

    http://219.244.176.199/JudgeOnline/problem.php?id=1215 这是这次微软和百度实习面试的一道题,题目大意就是:有一个n*m的矩阵,已知它每一行都是不严 ...

  10. NOIp2018集训test-10-24（am&pm)

    李巨连续AK三场了,我跟南瓜打赌李巨连续AK七场,南瓜赌李巨连续AK五场. DAY1 T1 qu 按题意拿stack,queue和priority_que模拟即可.特判没有元素却要取出的情况. T2 ...