<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. java Vamei快速教程00

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Java是面向对象语言.这门语言其实相当年轻,于1995年才出现,由Sun公司出品 ...

  2. [dp]uestc oj E - 菲波拉契数制

    E - 菲波拉契数制 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submi ...

  3. HDU 5097 Page Rank （模拟）

    题目背景是以前用来对网页进行排名的Page Rank算法,是早期Google的革命性发明. 背后的原理是矩阵和图论.这个数学模型是由Google的创始人拉里·佩奇和谢尔盖·布林发现的. 如果一个网页被 ...

  4. springmvc的第一个程序

    文中用的框架版本:spring 3,hibernate 3,没有的,自己上网下. web.xml配置: <?xml version="1.0" encoding=" ...

  5. Node.js 中文学习资料和教程导航

    这篇文章来自 Github 上的一位开发者收集整理的 Node.js 中文学习资料和教程导航.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念,它的目标是帮助程 ...

  6. Hibernate中session的save方法问题

    今天在使用session.save(),进行插入数据操作时,一直没有成功,也没有报错.后来发现是因为没有创建事务,提交事务的原因 你对flush和commit的意思没有理解到:1,flush代表刷新, ...

  7. shell脚本，awk取中间列的方法。

    解释 1.$(int(NF/2)+1) 中int(NF/2)等于3,然后加1,就得到中间的4了. 2.$(NF/2+0.5) 相当于得出的是整数.NF/2是3.5,再由3.5+0.5,所以就是4了,也 ...

  8. Linux性能检测常用的10个基本命令

    检测性能的10个命令汇总 uptim dmesg | tail vmstat 1 mpstat -P ALL 1 pidstat 1 iostat -xz 1 free -m sar -n DEV 1 ...

  9. 【费用流】bzoj1834: [ZJOI2010]network 网络扩容

    还是稍微记一下这个拆点模型吧 Description 给定一张有向图,每条边都有一个容量C和一个扩容费用W.这里扩容费用是指将容量扩大1所需的费用. 求:  1.在不扩容的情况下,1到N的最大流:  ...

  10. paper:synthesizable finite state machine design techniques using the new systemverilog 3.0 enhancements 之 FSM Coding Goals

    1.the fsm coding style should be easily modifiable to change state encoding and FSM styles. FSM 的的 状 ...