快捷導(dǎo)航

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

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

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

本文實(shí)例為大家分享了圖片緩慢放大縮小js實(shí)現(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>

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

您可能感興趣的文章:

相關(guān)文章

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