<!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. 如何使用 TDengine 2.0 最新开源的集群功能?

    导读:8月3日,TDengine 发布了 v2.0 版本,这次更新最大的亮点是,我们将分布式集群功能开源.开源后,引起了很大反响,又连续几天在 GitHub 趋势榜排名第一.不少关注TDengine的 ...

  2. ASP.NET Core 配置与获取

    目录 1,来自字典 2,来自配置文件 3,层次结构 4,映射 ASP.NET Core 中,可以使用 ConfigurationBuilder 对象来构建. 主要分为三部:配置数据源 -> Co ...

  3. hystrix(8) 插件

    上一节讲到HystrixCommand的执行流程. Hystrix内部将一些模块实现成了插件,并且提供了用户提供自己的实现,通过配置来替换插件.Hystrix提供了5个插件,分别为并发相关插件(Hys ...

  4. 3.ConcurrentMap-并发Map

  5. 关于properties文件的一些问题

    在写properties文件时,比如jdbc.properties文件配置连接数据库的账号密码时,不要留有空格,不然会报错 com.mchange.v2.resourcepool.CannotAcqu ...

  6. Vue 分支循环

    分支循环 在Vue中,分支循环也是使用标签属性指令完成的,这一点与后端模板语法不太相同. v-for 下面是通过v-for进行循环,不光可以拿到元素本身,也可以拿到索引值. 如果数据是对象类型,则可以 ...

  7. 215。数组中第K个最大元素(堆实现)

    class Solution: def findKthLargest(self, nums: List[int], k: int) -> int: """堆排序思想 ...

  8. httpclient post推送数据

    客户端代码 /** * 从接口获取数据 * @param url 服务器接口地址 * @param json 传入的参数 若获取全部,此项为空 * @return 返回查询到的数据 * @throws ...

  9. Redis 作者 Antirez 与 Contributor Mattsta 之间关于 CRC 的 Battle

    大家好,我是 yes. 昨天表弟说有个学妹问他 Redis 为什么要用 CRC16(key) mod 16384 来计算 key 所处槽的位置,我想这 CRC 一般都是用来校验的,通过多项式转换成二进 ...

  10. android开发之意图

    intent 全局变量传值(程序关闭时存储值消失) intent普通传值 intent传值 intent不能序列化传值 intent回传