快捷導(dǎo)航

JS實(shí)現(xiàn)圖片放大縮小的方法

更新時(shí)間：2017年02月15日 14:31:14 作者：nlx0201

這篇文章主要介紹了JS實(shí)現(xiàn)圖片放大縮小的方法,結(jié)合實(shí)例形式分析了javascript動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)圖片放大縮小的方法。分享給大家供大家參考，具體如下：

最近經(jīng)?？匆?jiàn)有人問(wèn)怎樣放大和縮小圖片，我之前也做過(guò)一次，下面就把我的方法共享出來(lái)。我有2個(gè)種方法實(shí)現(xiàn)：第一種方法可以兼容IE和火狐(其他的瀏覽器我沒(méi)有測(cè)試)；第二種方法只能兼容IE。

第一種方法很簡(jiǎn)單，代碼如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inherits="ImageZoom.Image" %>
<!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">
<head runat="server">
  <title></title>
  <style type="text/css">
    img
    {
      border:#000000 1px solid;
    }
  </style>
  <script language="JavaScript" type="text/javascript">
    //兼容IE和火狐
    function ImageChange(args) {
      var oImg = document.getElementById("img1");
      if (args) {
        oImg.width = oImg.width * 1.2;
        oImg.height = oImg.height * 1.2;
      }
      else {
        oImg.width = oImg.width / 1.2;
        oImg.height = oImg.height / 1.2;
      }
    }
   </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <img id="img1" alt="圖片" src="images/img1.gif" mce_src="images/img1.gif"/>
    <br />
    <input id="btn1" type="button" value="放大" onclick="ImageChange(true)" />
    <input id="btn2" type="button" value="縮小" onclick="ImageChange(false)" />
  </div>
  </form>
</body>
</html>

第二種方法也簡(jiǎn)單，就是把中間的js方法改變一下，然后給圖片框加上 style="zoom:100%;"，如下

var oImg = document.getElementById("img1");
oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + '%';

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript圖片操作技巧大全》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

完美解決mui框架off-canvas側(cè)滑超出部分隱藏?zé)o法滾動(dòng)的問(wèn)題
下面小編就為大家分享一篇完美解決mui框架off-canvas側(cè)滑超出部分隱藏?zé)o法滾動(dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
Javascript Worker子線程代碼實(shí)例
這篇文章主要介紹了Javascript Worker子線程代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
JS實(shí)現(xiàn)簡(jiǎn)單計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單計(jì)數(shù)器，有加、減和零三個(gè)按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
在js中實(shí)現(xiàn)郵箱格式的驗(yàn)證方法(推薦)
下面小編就為大家?guī)?lái)一篇在js中實(shí)現(xiàn)郵箱格式的驗(yàn)證方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
能說(shuō)明你的Javascript技術(shù)很爛的五個(gè)原因分析
Javascript在互聯(lián)網(wǎng)上名聲很臭，但你又很難再找到一個(gè)像它這樣如此動(dòng)態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語(yǔ)言
2011-10-10
理解 JavaScript Scoping & Hoisting（二）
這篇文章主要介紹了理解 JavaScript Scoping & Hoisting,盡管對(duì)于有經(jīng)驗(yàn)的程序員來(lái)說(shuō)這只是小菜一碟，不過(guò)我還是順著初學(xué)者常見(jiàn)的思路做一番描述
2015-11-11
js 性能優(yōu)化之算法和流程控制
循環(huán)處理是最常見(jiàn)的編程模式之一，也是提升性能必須關(guān)注的要點(diǎn)之一。本文將對(duì)此進(jìn)行介紹。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
詳解JavaScript 中 if / if...else...替換方式
這篇文章主要介紹了JavaScript 中 if / if...else...替換方式，非常不錯(cuò)，這篇文章是小編給大家做的一個(gè)方法匯總，感興趣的朋友一起看看吧
2018-07-07
推薦一個(gè)封裝好的getElementsByClassName方法
這篇文章主要推薦一個(gè)封裝好的getElementsByClassName方法,需要的朋友可以參考下
2014-12-12
JS實(shí)現(xiàn)電腦虛擬鍵盤(pán)的操作
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)電腦虛擬鍵盤(pán)的操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06