<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. 使用JS的画布制作一个瞄准镜

    <canvas width="600" height="500" id="myCanvas"></canvas> & ...

  2. codeforce Gym 100500I Hall of Fame (水)

    题意:统计一些串中,字母的出现频率,不分大小写,找出现频率最高5个字符(相同频率优先取字典序大的),把他们的对应的值加起来判断以下是否大于62. 没出现的不算. #include<cstdio& ...

  3. Robot Framework（一）入门

    1.1简介 Robot Framework是一个基于Python的,可扩展的关键字驱动的测试自动化框架,用于端到端验收测试和验收测试驱动开发(ATDD).它可用于测试分布式异构应用程序,其中验证需要涉 ...

  4. 剑指offer18 树的子结构

    另一种写法 class Solution { public: bool HasSubtree(TreeNode* pRoot1, TreeNode* pRoot2) { bool result = f ...

  5. opensuse 15.0 安装ctdb

    问题 1 2019/05/20 15:27:14.574363 ctdb-eventd[26329]: 60.nfs: /etc/ctdb/nfs-linux-kernel-callout: line ...

  6. Redis 和缓存技术

    Redis 是什么?什么作用?优点和缺点? https://blog.csdn.net/weixin_42295141/article/details/81380633 Redis 的主要功能哨兵+复 ...

  7. CentOS7下systemd

    配置文件: /usr/lib/systemd/system:每个服务最主要的启动脚本设置,类似于之前的/etc/init.d/ /run/systemd/system:系统执行过程中所产生的服务脚本, ...

  8. Golang 简单静态web服务器

    直接使用 net.http 包,非常方便 // staticWeb package main import ( "fmt" "net/http" "s ...

  9. windows下配置Nginx支持php

    编辑配置文件nginx.conf worker_processes 1; events { worker_connections 1024; } http { include mime.types; ...

  10. Python基础（六）——面向对象编程

    (1)定义类和实例 这一部分难得和 Java 较为一致,直接写个例子: class Stu: def __init__(self, name, id): # 构造方法 self.name = name ...