<!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. review15

    不同区域的星期格式 不同国家的星期的简称或全称有很大的不同.如果想用特定地区的星期格式来表示日期中的星期,可以用format的重载方法: format(Locale locale, 格式化模式,日期列 ...

  2. ES6-let命令

    let命令 用于声明变量,但是声明的变量只能在let命令所在的代码块内有效, { let a = 10; var b = 1; } 其中,a在代码块的外部是调用不到的.对于for循环的计数器里面,就很 ...

  3. Spring Boot配置文件详解：自定义属性、随机数、多环境配置

    自定义属性与加载 我们在使用Spring Boot的时候,通常也需要定义一些自己使用的属性,我们可以如下方式直接定义: application-dev.yml com.didispace.blog: ...

  4. nginx基本参数详解

    运行用户 user nobody; 启动进程,通常设置成和cpu的数量相等 worker_processes 1; 全局错误日志及PID文件 error_log logs/error.log; err ...

  5. c#线程中下载文件到本地

    额,太懒了 直接上示例代码... /// <summary> /// 下载文件到本地 2017-05-31 /// </summary> /// <param name= ...

  6. 常用T-CODE ,快捷键

    RSA1 --主界面. RSA8 --后台处理数据源和层次结构,很少使用 RSRT --QUERY 测试  .输入技术名称查询即可 RSRV--分析修复BW对象 RSMO --信息包监测. 检查处理链 ...

  7. MySql数据库中存放用户密码需要注意什么？

    前几天被电话面试了,问了一些比较实际的问题,其中一个问题关于PHP开发中MySql里存放用户密码需要注意什么,由于没有过大项目经验,一时语塞,回来网上找了找记下来,希望能对其他人有帮助,我也继续学习. ...

  8. 滑雪（经典DP思想）

    个人心得:思想还是不够,开始自己写但是不知道如何记录长度,也不太知道状态的转移,后面看了百度, 发现人人为我我为人人就是一步一步推导, 而递归思想就要求学会记录和找到边界条件,这一题中的话就是用递归, ...

  9. BZOJ5334: [Tjoi2018]数学计算

    BZOJ5334: [Tjoi2018]数学计算 https://lydsy.com/JudgeOnline/problem.php?id=5334 分析: 线段树按时间分治即可. 代码: #incl ...

  10. 【java规则引擎】简单规则的rete网络示意图

    一个Fact通过Session添加到规则网络中,如何进行规则匹配的大致过程如下 (1)通过根结点对象从EntryPointNode的Map集合中找到相应的EntryPointNode对象 (2)Ent ...