<body>

     <!--页面布局:一张图片两个按钮-->

     <div style = "width:400px;margin:0 auto">    <!--设置div,目的使图片居中-->

         <img src = "./wolf.jpg" id="image"/><br/>

         <input type = "button" id = "max" value = "放大"/>

         <input type = "button" id = "min" value = "缩小"/>

     </div>

 <script>

         //获取元素,添加点击事件

     window.onload = function() {

             var img = document.getElementById("image");

             var maxBtn = document.getElementById("max");

             var minBtn = document.getElementById("min");

             var maxWidth = img.width * 2;//定义放大的极限宽度值

             var minWidth = img.width * 0.5;//定义缩小的极限宽度值

             maxBtn.onclick = function () {//添加放大的点击事件

                 maxFun();//调用放大函数

             };

             minBtn.onclick = function(){//添加缩小的点击事件

                 console.log("click minbutton");

                 minFun();//调用缩小函数

             };

             //定义放大函数

             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);

                     }

                 }, 10);

             }

             //定义缩小函数

             function minFun(){

                 var endWidth = img.width * 0.7;//定义每次点击后缩小的宽度

                 var endHeight = img.height * 0.7;//定义每次点击后缩小的高度

                 var minTimer = setInterval(function(){

                     if(img.width > endWidth){//判断点击结束后的图片宽度是否大于每次点击的最小宽度

                         if(img.width > minWidth){//判断点击结束后的图片宽度是否大于缩小的极限宽度

                             img.width = img.width * 0.95;//每次点击的宽度缩小幅度

                             img.height = img.height * 0.95;//每次点击的高度缩小幅度

                             console.log("img.height = img.height * 0.95;");

                         }else{

                             alert("已经缩小到最小值");

                             clearInterval(minTimer);

                             console.log("clear Interval");

                         }

                     }else{

                         clearInterval(minTimer);

                     }

                 },10);

             }

     }

     </script>

 </body>

用Javascript实现图片的缓慢缩放效果的更多相关文章

  1. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  2. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  3. JavaScript实现图片裁剪预览效果~（第一个小玩具）

    感觉开始学习的前一个月真的太不珍惜慕课网的资源了  上面蛮多小玩意真的蛮适合我这样刚入门JavaScript的同学加深使用理解 大概收藏了百来门或大或小的课程  有一个感觉就是学这个真的比光是看书看概 ...

  4. javascript控制图片等比例缩放

    <SCRIPT language="JavaScript"> function DrawImage(ImgD,FitWidth,FitHeight){ var imag ...

  5. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  6. 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

    1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...

  7. 《JavaScript 实战》：JavaScript 实现拖拽缩放效果

    拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小,例如选框效果.这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放. 跟拖放效果一样,程 ...

  8. 《JavaScript 实战》：JavaScript 实现图片切割效果

    很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪.图片剪切(设置一下也可以做出放大镜等类似的效果).当时觉得很神奇,碍于水平有限,没做出来.前些日子突然想做一个透镜效果,就突然想到了这 ...

  9. 图片的滑动缩放html、css、js代码

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 使用ABAP批量下载有道云笔记中的图片

    Jerry喜欢用有道云笔记这款软件做自己的知识管理和知识体系的构建. 当您看到一篇好的有道云笔记分享时,可能会想将其精美的图片下载到本地.作为程序猿,我们不会去手动一张张下载.写个程序帮我们自动下载吧 ...

  2. AddDbContext was called with configuration, but the context type 'NewsContext' only declares a parameterless constructor?

    问题 An error occurred while starting the application. ArgumentException: AddDbContext was called with ...

  3. Unity基础-脚本的基本使用

    脚本的基本使用 定义与挂载monobehaviour 1.新建一个场景 2.新建脚本 using System.Collections; using System.Collections.Generi ...

  4. NodeJS基础-Buffer

    Buffer用于处理二进制数据流 实例类似于整数数组,大小固定 C++代码在V8堆外分配物理内存 // 创建一个长度为10,且用0填充的Buffer const buf1 = Buffer.alloc ...

  5. Python爬虫系列-Selenium详解

    自动化测试工具,支持多种浏览器.爬虫中主要用来解决JavaScript渲染的问题. 用法讲解 模拟百度搜索网站过程: from selenium import webdriver from selen ...

  6. phpstorm 工具使用技巧（持续补充中。。。）

    phpstorm 工具使用技巧(持续补充中...) 一.phpstorm大小写切换 1.选择要转换的目标字符串: //普通商家,普通折扣默认值'COMMON_DISCOUNT'=>10.00, ...

  7. 【android】android对位图文件的支持

    Android 支持以下三种格式的位图文件:.png(首选)..jpg(可接受)..gif(不建议).

  8. zend studio10 破解方法

    zend studio 是一款强大的PHP开发工具,该软件的具体信息用户可以百度一下,下面是zend studio10的破解方法. 1.下载zend studio 10,下载地址:链接:http:// ...

  9. JAVA基础篇—多态

    class ColaEmployee父类 package com.cola; public class ColaEmployee { private String name; private int ...

  10. micrium ucprobe使用笔记

    前段时间在学习ucos-iii的时候,用到了micrium ucprobe,发现在调试的时候,很方便,可以直观的看到任务的运行使用情况,全局变量的值变化等,当然详细的可以参考官方文档,也可以参考网上的 ...