<!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. CTF-BugKu-杂项-29-33

    2020.09.15 今天换个新壁纸,换个新背景音乐,燃起来 做题 第二十九题 论剑 https://ctf.bugku.com/challenges#论剑 图片详情没啥信息,不是正方形,考虑改成正方 ...

  2. SSM框架中，事务无法回滚的原因和解决

    原因: 由ServletContextListener加载spring配置文件产生的是父容器,springMVC产生的是子容器,子容器对Controller进行扫描装配时装配了@Service注解的实 ...

  3. ava实现时钟小程序【代码】

    其实这个程序并不难,主要是用Java 2D画图,弄一个线程,每隔一秒,依照时针分针秒针各自的速度重新计算它们走过的角度(相对12点方向顺时针偏离的角度),利用这个角度算出它们各自端点的坐标,重绘一次表 ...

  4. 配置静态 IP、网卡命名规范

    一.网卡命名规范(设备类型 + 设备位置 + 数字) 设备类型: 格式 描述 en 以太网(Ethernet) ib 无限宽带(InfiniBand) sl 串列线路互联网协议(slip:Serial ...

  5. 记一次由selinux引起的使用cat查看文件报错Permission denied的问题排查

    事件起因:如下 1.在服务器上root用户,定期会生成一个文件,到/tmp目录,如:qq_5201351.txt,给other加上了r读取 2.zabbix端会周期性取这台服务器/tmp/qq_520 ...

  6. linux学习（十一）linux安装nginx

    一.前言 由于本地练手的小demo用的是vue+spring boot来玩的,所以部署的时候想着用Nginx来实现反向代理[即请求转发,解决前后端分离的跨域请求问题],既然要用,那么首先得在服务器上面 ...

  7. 极简 Node.js 入门 - 4.3 可读流

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  8. cookie、session和md5加密

    cookie Http无状态协议,只能在同一个网站(包括多个页面)下获取,存储在客户端本地的一段信息,帮助我们存储信息获取信息.但是同样有风险:我们自己在浏览器上可以操作或者设置Cookie. con ...

  9. Python-函数式编程-map reduce filter lambda 三元表达式 闭包

    lambda 匿名函数,核心是作为算子,处理逻辑只有一行但具有函数的特性,核心用于函数式编程中 三元运算符 其实本质上是if分支的简化版,满足条件返回 if 前面的值,不满足条件返回 else后面的值 ...

  10. mysql-14-transaction

    #TCL /* 事务控制语言 事务:一个或一组sql语句组成一个执行单元,每条sql语句相互依赖 这个执行单元要么全部执行.要么全部失败后回滚 案例:转账 事务的acid属性 1.原子性:事务时一个不 ...