js实现图片缓慢放大缩小效果

本文实例为大家分享了图片缓慢放大缩小js实现代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片的缓慢缩放</title>
</head>
<script>
  window.onload = function(){
    var btn_big = document.getElementById("big");
    var btn_small = document.getElementById("small");
    var pic = document.getElementById("pic");
    //缓慢放大
    btn_big.onclick = function(){
      var width = parseInt(pic.style.width);
      var i = width;
      var count = 0;
      console.log(width);
      var timer = setInterval(function(){
        count++;
        i++;
        pic.style.width = i + "%";
        if(count == 10 ){
          clearInterval(timer);
        }else if( i > 50){
          btn_big.onclick = function(e){
            btn_big.onclick = null;
          };
        }
      },13);
    };

    //缓慢缩小
    btn_small.onclick = function(){
      var width = parseInt(pic.style.width);
      var count = 0;
      if(width == 10){
        alert("图片已最小!!");
        return false;
      }
      console.log(width);
      var timer2 = setInterval(function(){
        count++;
        width--;
        pic.style.width = width +"%";
        if(count == 10){
          clearInterval(timer2);
        }else if( width < 10){
          btn_small.onclick = null;
        }
      },13);
    }
  }
</script>
<style>
  #pic{
    width: 20%;
  }
</style>
<body>
  <div id="pic" style="width: 20%">
    <img src="3.pic.jpg" style="width:100%;">
  </div>

  <div class="scale">
    <button id="big">放大</button> <button id="small">缩小</button>
  </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现图片放大缩小功能后进行复杂排序的方法

    js实现图片放大缩小功能后进行复杂排序的方法

    这是一个基于jquery的图片效果,它的作用是:当图片点击变大(变小)时,其它图片按照一定的规则进行排序运动. 首先来看下最终的效果图: 有人可能看到这个会觉得,这有什么难的,这么简单的事,楼主是不是太小提大作了?当你真正去尝试时,你才知道到底有什么难点. 首先,我们来讲下需求: 1.图片分为大小和小图,大图占四个小图的位置, 2.点击图片放大缩小, 重新排列顺序, 3. 当点击偶数列(2,4)时,它前面的那项将向提出来向后面排列 4.第一个项不能动,点第二个是将占第三四的位置,从后面取第一个小

  • js实现双击图片放大单击缩小的方法

    本文实例讲述了js实现双击图片放大单击缩小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>双击图片放大,单击缩小</title> </head> <body> <SCRIPT

  • js实现用滚动条来放大缩小图片的代码

    js实现用滚动条来放大缩小图片的代码

    这段时间比较闲,就搞了这么一个功能来练练手. 因为没有系统的学习过javascript,很多东西都是现学现用.请大家多提宝贵意见,谢谢 无标题文档 //---------------------------------------------------------------------------------------------- // 功能说明:用于放大图片的滚动条,可放大至图片的原始大小.在ie6,ie7,ff1.5下可用 // 使用方法:在图片代码里加上resizeable=1,同

  • JS实现图片放大缩小的方法

    本文实例讲述了JS实现图片放大缩小的方法.分享给大家供大家参考,具体如下: 最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来.我有2个种方法实现:第一种方法可以兼容IE和火狐(其他的浏览器我没有测试):第二种方法只能兼容IE. 第一种方法很简单,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inhe

  • javascript 图片放大缩小功能实现代码

    javascript 图片放大缩小功能实现代码

    看JS源码: 复制代码 代码如下: // 放大缩小控制 var PhotoSize = { zoom: 0, // 缩放率 count: 0, // 缩放次数 cpu: 0, // 当前缩放倍数值 elem: "", // 图片节点 photoWidth: 0, // 图片初始宽度记录 photoHeight: 0, // 图片初始高度记录 init: function(){ this.elem = document.getElementById("focusphoto&qu

  • JS实现图片局部放大或缩小的方法

    本文实例讲述了JS实现图片局部放大或缩小的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • JS简单的图片放大缩小的两种方法

    以左上角为定点,放大缩小,该点位置不变. 方法一: Html代码 复制代码 代码如下: <script type="text/javascript">         //兼容IE和火狐   缩小放大.缩放         function ImageSuofang(args) {             var oImg = document.getElementById("oImg");             if (args) {        

  • JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    本文实例讲述了JS实现放大.缩小及拖拽图片的方法.分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; window.onload=function(){ divId = document.getElementById("block1"); var height1 = images1.height;//图片的高度 var width1 = images1.width;//图片的宽度 v_left=(document.body.client

  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

    修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //

  • 原生js实现图片放大缩小计时器效果

    知识要点 var fn=setInterval(function(){},1000) 每隔1秒执行一次函数 clearInterval(fn) 清除计时器 判断当图片放大缩小到固定大小时,清除计时器 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

随机推荐