快捷導(dǎo)航

js實現(xiàn)圖片緩慢放大縮小效果

更新時間：2016年08月02日 13:04:44 作者：前端小菜bi

這篇文章主要為大家詳細介紹了js實現(xiàn)圖片緩慢放大縮小效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了圖片緩慢放大縮小js實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

<!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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解微信小程序開發(fā)之城市選擇器城市切換
這篇文章主要介紹了詳解微信小程序開發(fā)之城市選擇器城市切換，非常具有實用價值，需要的朋友可以參考下。
2017-01-01
一次Webpack配置文件的分離實戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于一次Webpack配置文件的分離實戰(zhàn)記錄，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11
JavaScript中高階函數(shù)的巧妙運用
JavaScript中的高階函數(shù)是指可以接受其他函數(shù)作為參數(shù)或者返回一個函數(shù)作為結(jié)果的函數(shù)，本文介紹了JS中一些高階函數(shù)的妙用，希望對大家有所幫助
2023-05-05
jQuery animate()實現(xiàn)背景色漸變效果的處理方法【使用jQuery.color.js插件】
這篇文章主要介紹了jQuery animate()實現(xiàn)背景色漸變效果的處理方法,結(jié)合實例形式分析了jQuery顏色插件jquery.color.js實現(xiàn)背景色漸變的簡單操作技巧,需要的朋友可以參考下
2017-03-03
使用Js讓Html中特殊字符不被轉(zhuǎn)義
怎么讓<textarea></textarea>之間包含的文本原封不動的顯示出來呢？下面小編就為大家介紹一下具體的實現(xiàn)方法吧
2013-11-11
$JS面向?qū)ο缶幊虦\析$
JS面向?qū)ο缶幊虦\析
下面就結(jié)合我自己的體會和所學(xué)習(xí)的東東和大家一起來學(xué)習(xí)在JS中如何使用面向?qū)ο蟮木幊獭?/div> 2011-08-08
javascript canvas封裝動態(tài)時鐘
這篇文章主要為大家詳細介紹了javascript canvas封裝動態(tài)時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this
這篇文章主要介紹了深入學(xué)習(xí)js函數(shù)的隱式參數(shù) arguments 和 this，arguments是一個類數(shù)組結(jié)構(gòu)，它保存了調(diào)用時傳遞給函數(shù)的所有實參；this是函數(shù)執(zhí)行時的上下文對象, 這個對象有些讓人感到困惑的行為。下面分別對他們進行討論。,需要的朋友可以參考下
2019-06-06
javascript實現(xiàn)仿IE頂部的可關(guān)閉警告條
仿windows IE頂部的敬告工具條，帶關(guān)閉按鈕，設(shè)計還算精美，你完全可以用到自己的網(wǎng)頁用于顯示提示等方面，有需要的小伙伴可以參考下。
2015-05-05
寫給小白的JavaScript引擎指南
有時編寫 Web 應(yīng)用的代碼會感覺充滿魔力，因為我們只是寫了一系列字符，就能在瀏覽器里看到效果了。但是理解魔法背后的技術(shù)，可以幫助你更好地提高編程技巧
2015-12-12