<!doctype html>
<head>
<meta charset=utf-8" />
<title>javascript控制图片缩小或者放大</title>
</head>
<body>
<script type="text/javascript">
var oTime;
function changeSize(id,action){
    var obj=document.getElementById(id);
    obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%';
    oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100);
    }
    document.onmouseup=function(){
    window.clearTimeout(oTime);
    }
    </script>
<div style="height: 200px; overflow: auto;">
    <img id="headImg" src="http://www.phpernote.com/images/logo.gif" width="67" height="55" style="zoom: 100%;"></div>
    <button onmousedown="changeSize('headImg','+');" onmouseup="window.clearTimeout(oTime);">放大</button>
    <button onmousedown="changeSize('headImg','-');" onmouseup="window.clearTimeout(oTime);">缩小</button>
    </body>
    </html>

JS图片的放大与缩小的更多相关文章

  1. Android------实现图片双击放大，缩小，左右滑动的多种方式

    项目中常常有图片浏览功能.像微信朋友圈图片浏览,QQ空间照片浏览 的功能. 实现图片双击放大,缩小,左右滑动等效果. 来看看我的效果图,希望能满足你的要求   前三个button按钮是参考网上的多种实 ...

  2. 实例讲解如何利用jQuery设置图片居中放大或者缩小

    大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...

  3. 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  4. C#和Halcon交互实现图片的放大和缩小

    [转载] C#和halcon实现图片的放大和缩小 e.Delta>0表示鼠标向上滚动,e.Delta<0表示向下滚动 要拖动的图像为Measure.currentImageL,可以更换. ...

  5. js 实现图片的放大和缩小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 通过Java代码实现图片的放大和缩小

    本文介绍的例子在Android安卓手机上测试通过. 先看看效果吧.可以看到这个开发好的安卓应用有三个按钮:Zoom In缩小图片,Zoom Out放大图片和Save保存. 初始页面: 可以在左边边框自 ...

  7. JavaScript特效之图片特效放大，缩小，旋转

    效果图如下: 效果代码如下: <!doctype html> <html lang="en"> <head> <meta charset= ...

  8. [Swift通天遁地]三、手势与图表-(3)通过捏合手势放大和缩小图像视图

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

随机推荐

  1. 口罩预约管理系统——数据库设计（前端+PHP+MySQL）

    目录 一.背景 二.口罩预约管理系统介绍 三.数据库设计 四.MySQL创建数据库以及数据表 五.数据库设计总结 一.背景 2020年的疫情影响了我们的生产生活,政府不断加大力度联防联控,遏制疫情的蔓 ...

  2. C#开发PACS医学影像处理系统(十二)：绘图处理之图形标记

    在医生实际使用过程中,对于有病灶的影像需要一些2D绘图操作,例如对于病灶的标记和测量, 这就牵涉到在WPF中的2D绘图操作技术,一般的思路是监听鼠标的按下和抬起以及运动轨迹,目前整理出的常用绘图和测量 ...

  3. 使用Java Stream，提取集合中的某一列/按条件过滤集合/求和/最大值/最小值/平均值

    不得不说,使用Java Stream操作集合实在是太好用了,不过最近在观察生产环境错误日志时,发现偶尔会出现以下2个异常: java.lang.NullPointerException java.ut ...

  4. Windows提示80被占用

    情景:使用cmd启动某一服务的时候报错[emerg] 7220#6900: bind() to 0.0.0.0:80 failed (10013: An attempt was made to acc ...

  5. git个人常用命令

    git https://www.cnblogs.com/chenwolong/p/GIT.html 添加当前目录的所有文件到暂存区 $ git add . 提交暂存区到仓库区 $ git commit ...

  6. java虚拟机配置

    -XXSurvivorRatio 设置两个survivor和eden的比,8表示两个survivor:eden:2:8.survivor的比例影响新生代向老年代移动的数度.survivor比例越小,新 ...

  7. 这10道springboot常见面试题你需要了解下

    ​ 1.什么是Spring Boot? 多年来,随着新功能的增加,spring变得越来越复杂.只需访问https://spring.io/projects页面,我们就会看到可以在我们的应用程序中使用的 ...

  8. Oracle学习（十二）标量函数

    UCASE()大写转换  LCASE()小写转换 --把查询结果对应的列进行大写转换 SELECT UCASE(列) FROM 表; --把查询结果对应的列进行小写转换 SELECT LCASE(列) ...

  9. linux监控工具audit

    audit是什么? audit是记录linux审计信息的内核模块. 他记录系统中的各种动作和事件,比如系统调用,文件修改,执行的程序,系统登入登出和记录所有系统中所有的事件.audit还可以将审计记录 ...

  10. Code Test(2)

    1110test T1:Inversion逆序数对1(inversion.cpp/in/out 1s 256M)给定N的值,要求找出一个N的全排列,这个全排列中,逆序数有M对.这样的结果会存在多个解, ...