<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. 让您的Eclipse具有千变万化的外观

    大家每天用Eclipse做Java开发,是否厌倦了Eclipse千篇一律的白色背景呢? 看看Jerry这几种不同风格的Eclipse外观,是不是有耳目一新的感觉?如何做到的? 需要给Eclipse安装 ...

  2. 【转】学习apicloud和IOS之间的模块化使用

    最近公司有使用APICloud发开的需求,需要我这边提供一些模块包得封装.因为没有也是刚接触APICloud,所以也就在看官方文档 .下面讲一讲我再使用过程中得一点点东西. 首先,下载官方SDK,下载 ...

  3. 修改Windows默认调试器

    程序崩溃时,系统会弹窗让你选择是否进行调试,可以设置系统默认调试器. 注册表位置: HKEY_LOCAL_MACHINE/SOFTWARE/Microsoft/Windows NT/CurrentVe ...

  4. if...else...这段代码打印结果，并简述其理由

    var age = 20; if (age >= 6) { console.log('teenager'); } else if (age >= 18) { console.log('ad ...

  5. d3网址

    官网: http://d3js.com D3创始人 http://bost.ocks.org.mike 教程: http://www.dashingd3js.com/table-of-contents ...

  6. ubuntu系统普通用户密码忘记之重置

    当我们在使用ubuntu系统忘记普通用户登录密码的时候,会被系统在登录界面拒之门外而不得入,这时候只好需要我们去重新设置密码,具体做法如下: 系统重启,在GRUB模式下选择Advanced Optio ...

  7. strace用法

    strace   --  trace system calls and signals     strace是Linux环境下的一款程序调试工具,用来监察一个应用程序所使用的系统调用及它所接收的系统信 ...

  8. html5音频audio对象封装成vue组件的方式调用以及setTimeout如何在vue2生效 (vue2正在熟悉中,ajax还是用jQuery来写舒服些,里面含有一些php写法可略过) 此网页应用在PC不考虑手机端

    // vue2 组件封装如下: <template> <div> <div><!--vue element 组件的引用 Switch 开关 不懂请自行百度(重 ...

  9. Python3学习了解日记

    # 单行注释 ''' 多行注释 ''' """ 这个也是多行注释 """ ''' 声明变量 Python 中的变量不需要声明.每个变量在使用 ...

  10. LayoutInflater的用法

    Instantiates a layout XML file into its corresponding View objects. It is never used directly. Inste ...