<!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. 安装rackspace private cloud --3 Deployment host

    on deploy host: 在deploy host上安装 Ubuntu Server 14.04 (Trusty Tahr) LTS 64-bit # apt-get install aptit ...

  2. sqlserver设置具体的访问权限

    为具体的用户设置具体的访问权限 收藏 use 你的库名 go --新增用户 exec sp_addlogin 'test' --添加登录 exec sp_grantdbaccess N'test' - ...

  3. 编写TreeSet类的实现程序，其中相关的迭代器使用二叉查找树

    package com.test.tree; import java.util.Iterator; /** * 编写TreeSet类的实现程序,其中相关的迭代器使用二叉查找树. * 在每个节点上添加一 ...

  4. C++初始化小问题

    #include<; } 发现,没有对string进行初始化,就已经默认可以使用,并且是空串,一直用java,对c++不熟悉.搜索了下,发现在c++中,只要对对象进行了定义,如果没有初始化,就会 ...

  5. UML类图（三）-------实例

    实例分析1——登录模块 某基于C/S的即时聊天系统登录模块功能描述如下: 用户通过登录界面(LoginForm)输入账号和密码,系统将输入的账号和密码与存储在数据库(User)表中的用户信息进行比较, ...

  6. MariaDB Galera Cluster环境搭建及高可用测试

    一.服务器概况Galera Cluster需要至少三个节点,在此次实验过程中,三个节点IP地址:192.168.56.101192.168.56.102192.168.56.103OS为centos ...

  7. python--关于if __name__==__main__的解释

    在解释之前首先我们看下__name__这个变量存的是什么: #!/usr/bin/env python # -*- coding:utf-8 -*- print(__name__) 结果: __mai ...

  8. uva489（需要考虑周全）

    这个题是简单题,但是我的思路本身不周全,忽略了一种比较“无理”的情况,而导致WA多次.我是把猜的串全扫一遍以后判断出结果,但是实际上可能是前面已经全猜对了,但是这个选手是个逗比,已经猜对了还要猜,而且 ...

  9. memcache应对缓存失效问题

    .两个key,一个key用来存放数据,另一个用来标记失效时间 比如key是aaa,设置失效时间为30s,则另一个key为expire_aaa,失效时间为25s. 在取数据时,用multiget,同时取 ...

  10. enumerate 枚举