用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实现,图片放大和缩小的更多相关文章
- 在cocos2d中实现真正意思上的图片放大和缩小
http://www.cnblogs.com/dinghing154/archive/2012/08/05/2623970.html 在编写程序的时候我们常常使用self.scale来让我们使用的图片 ...
- CSS设置标签、图片放大、缩小、旋转、移动(tranform)
CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...
- js 压缩图片(只缩小体积,不更改图片尺寸)
1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...
- js控制图片放大缩小的简易版
js代码: function bb_img_onmousewheel(e, o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += eve ...
- 测试cnblogs的代码折叠展开功能和zoom.js实现图片放大缩小冲突的问题
#!/usr/bin/env python # -*- coding:utf- -*- def test(): print('from the test'
- H5端js实现图片放大滑动查看-插件photoswipe的使用
最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑 ...
- c语言数字图像处理(二):图片放大与缩小-双线性内插法
图像内插 假设一幅大小为500 * 500的图像扩大1.5倍到750 * 750,创建一个750 * 750 的网格,使其与原图像间隔相同,然后缩小至原图大小,在原图中寻找最接近的像素(或周围的像素) ...
- java图片放大或缩小
package org.jimmy.autotranslate20181022.utils; import java.awt.Graphics; import java.awt.image.Buffe ...
- vue图片放大、缩小、旋转等
用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 效果: 安装 使用npm命令安装 npm install v-viewer 使用 引入v-viewer及必需的css样式 ...
随机推荐
- java中的向下转型
1.父类对象可以强制转换为子类对象,但是前提是此父类对象为子类对象实例化的结果. e.g. Fruit fruit=new Apple(); Apple a=(Apple)fruit;//ok e.g ...
- DB2导入导出方法总结
1.导出 DEL 文本文件 export to D:\T_TESTTABLE20121220.del of del select * from T_TESTTABLE 2.导出 ixf 文本文件.i ...
- windows7下cmd窗口使用ssh命令
http://jingyan.baidu.com/article/36d6ed1f931eb31bcf4883dc.html
- The import java.util cannot be resolved
原因:项目buildpath不对 解决方案: 右键项目-------build path--------configuration build path 的选择libraries找到JRE(这个时候你 ...
- 1008 Envy(好题¥)
1008: Envy 时间限制: 1 Sec 内存限制: 128 MB提交: 288 解决: 61[提交][状态][讨论版] 题目描述 今年的 ACM 比赛推出了一个赛后的娱乐活动,所有参赛选手排 ...
- 21 Python 异常处理
异常和错误 AttributeError 试图访问一个对象没有的树形,比如foo.x,但是fo ...
- idea下建立bootstrap项目
环境准备: 1.创建一个static web名为bootstrapDemo 2.在bootstrapDemo文件夹下安装bower npm install bower 会自动产生node-module ...
- jsp中向浏览器页面输出的方式总结
jsp中百分号内输出 不需要有JavaScript标签 1.因为jsp就是包含在html 里面,所以什么都不干时,就是在body里面输出html内容 2.百分号 内是JavaScript代码?java ...
- New Concept English three (56)
The river which forms the eastern boundary of our farm has always played an important part in our li ...
- hawq创建filespace,tablespace,database,table
使用HAWQ 在HAWQ的使用上跟Greenplum基本就一样一样的了.比如: 1. 创建表空间 #选创建filespace,生成配置文件 [gpadmin@master ~]$ hawq f ...