<!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. [HDU2553]N皇后问题(DFS)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2553 题意 n<=10,输出N皇后问题的方法数. 题解 可以使用各种方法.这里使用DFS. 使用 ...

  2. 内存管理初始化源码5：free_area_init_nodes

    start_kernel ——> setup_arch ——> arch_mem_init ——> |——> bootmem_init  |——> device_tree ...

  3. Linux实战（14）：Ubuntu修改root默认登陆

    第一步 首先登录系统,创建root用户的密码 在终端输入命令: sudo passwd root 然后输入设置的密码,这样就完成了设置root用户密码的步骤 第二步 修改文件 sudo nano /u ...

  4. SpringBoot-01-快速入门

    SpringBoot 1. 快速入门 什么是Spring 轻量级的Java开源开发框架 为了解决企业级应用开发的复杂性而创建的,简化开发 Spring是如何简化Java开发的 ​ 为了降低Java开发 ...

  5. Node.js 从零开发 web server博客项目[express重构博客项目]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  6. vue大型项目高性能优化----想说爱你真的不容易

    一.背景   目前公司的电子合同采用表单设计器+合同业务配合实现,做了半年多后终于上线,但是下边员工普遍反映卡顿,甚至卡死,爆栈.尤其是新增和修改合同页面,因为这部分数据量大,逻辑复杂,很容易崩溃,所 ...

  7. jpeg编解码概述

    本博文为概览性介绍.后面有空了再分几篇博文分别介绍所用到的技术细节. 1.编解码目标 编码和解码是个逆过程.jpeg编码的目的在于图形去冗余,进行数据压缩,解码的目的在于还原图像,使能够进行预览. 2 ...

  8. 记一次公司mssql server密码频繁被改的事件

    环境描述 近期公司服务器mssql密码频繁被改,导致各种业务系统无法连接,报错.昨天来公司,发现4台数据库3台密码都变了.今天尝试着去查查是否能找到问题根源. 步骤 4台服务器3台连不上,只有64还活 ...

  9. Vue编写的页面部署到springboot网站项目中出现页面加载不全问题

    问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ...

  10. springboot项目打包瘦身

    默认情况下,Spring Boot 项目发布时会将项目代码和项目的所有依赖文件一起打成一个可执行的 jar 包.但如果项目的依赖包很多,那么这个文件就会非常大.这样每次即使只改动一点东西,就需要将整个 ...