<!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. Tensorflow中的transpose函数解析

    transpose函数作用是对矩阵进行转换操作 相信说完上面这一句,大家和我一样都是懵逼状态,完全不知道是怎么回事,那么接下来和我一起探讨吧 1.二维数组 x = [[1,3,5],  [2,4,6] ...

  2. js 实现自动调出键盘

    在app中,在页面加载完成之后,给输入框添加一个focus,不能自动调出软键盘,可以用以下方式实现: //触发键盘 $("#content").on("touchstar ...

  3. Model compatibility cannot be checked because the database does not contain model metadata. Ensure that IncludeMetadataConvention has been added to the DbModelBuilder conventions

    Model compatibility cannot be checked because the database does not contain model metadata. Ensure t ...

  4. Announcing the Release of ASP.NET MVC 5.1, ASP.NET Web API 2.1 and ASP.NET Web Pages 3.1 for VS2012

    The NuGet packages for ASP.NET MVC 5.1, ASP.NET Web API 2.1 and ASP.NET Web Pages 3.1 are now live o ...

  5. poj2396有源汇上下界可行流

    题意:给一些约束条件,要求算能否有可行流,ps:刚开始输入的是每一列和,那么就建一条上下界相同的边,这样满流的时候就一定能保证流量相同了,还有0是该列(行)对另一行每个点都要满足约束条件 解法:先按无 ...

  6. windows7安装Scrapy

    在Linux下安装Scrapy很容易,基本不会出现问题 pip install Scrapy 但是在Windows下经常会出现问题,首先还是尝试一下使用pip命令: pip install scrap ...

  7. LeetCode OJ：Combination Sum III（组合之和III）

    Find all possible combinations of k numbers that add up to a number n, given that only numbers from ...

  8. 7.MySQL优化---存储过程和存储函数

    转自互联网. 当一个大型系统在建立时,会发现,很多的SQL操作是有重叠的,个别计算是相同的,比如:业务系统中,计算一张工单的计算方式.当遇到这些情况时,我们运用存储过程就是一个非常棒的优化啦.那么,什 ...

  9. Element header-row-style设置多个属性

    方式1: 直接在标签上添加上属性值: <el-table :header-cell-style="{background:'#F3F4F7',color:'#555'}" & ...

  10. 使用Jsonp实现跨域请求

    来自百度百科的一段话: JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.exampl ...