<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. EditPlus 3.7激活码注册码

    EditPlus3.7激活教程以及EditPlus3.7激活码使用方法 EditPlus是一款功能齐全的文字编辑器,搭配其他的插件还可以实现很多的功能,还可以编辑和编译Java,调试程序等,主要用来打 ...

  2. 四、filter和find函数的区别

    filter(): filter函数会返回data中为true那项的数组(即查询符合条件的数据) eg:data.filter((f)=>{ if(f[name]===item[name]){ ...

  3. IOS使用Jenkins进行持续集成

    本文主要讲述在开发过程中,提高工作效率而进行的IOS-Jenkins的持续集成. 背景 平时我们开发完成IOS项目,需要打包给测试人员进行测试.其中的过程需要重复进行:修改配置项--编译---连接设备 ...

  4. AutoLayout处理UITableView动态高度

    我们经常会遇到UITableViewCell的高度要跟随内容而调整,在未引入AutoLayout之前,我们使用以下方法计算Label高度,然后heightForRowAtIndexPath中返回计算的 ...

  5. JavaScript数组之傻傻分不清系列（split，splice，slice）

    因业务场景需求,需要将一个数组截断而不需要影响原数组.这里来理解一下 slice,splice,split slice() 从某个已有的数组返回选定的元素.(JavaScript Array 对象) ...

  6. PHP获取文件夹内所有文件包括子目录文件的名称或路径

    /* * new getFile($_dir[,$_emptyDir,$_fileType]); * @parma $_dir 是目录名称 * @parma $_emptyDir 是否获取空文件夹,选 ...

  7. PHP分页类代码

    今天为大家献上一段代码,这是一段php分页代码: <?php//创建分页类class Page {    private $_all_num;                           ...

  8. octave-basic

    在coursera上斯坦福的machine learning,lecturer极力推荐开源的编程环境Octave入手,所以我也下载了来试一试吧== 参考链接:http://www.linuxdiyf. ...

  9. SQL前后端分页

    /class Page<T> package com.neusoft.bean; import java.util.List; public class Page<T> { p ...

  10. 欧拉函数：HDU3501-Calculation 2

    Calculation 2 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Probl ...