欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年02月15日 14:31:14   作者：nlx0201  
這篇文章主要介紹了JS實現(xiàn)圖片放大縮小的方法,結合實例形式分析了javascript動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下

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

最近經(jīng)?？匆娪腥藛栐鯓臃糯蠛涂s小圖片，我之前也做過一次，下面就把我的方法共享出來。我有2個種方法實現(xiàn)：第一種方法可以兼容IE和火狐(其他的瀏覽器我沒有測試)；第二種方法只能兼容IE。

第一種方法很簡單，代碼如下：

<%@ 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>

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

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

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

  • 完美解決mui框架off-canvas側滑超出部分隱藏無法滾動的問題

    完美解決mui框架off-canvas側滑超出部分隱藏無法滾動的問題

    下面小編就為大家分享一篇完美解決mui框架off-canvas側滑超出部分隱藏無法滾動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • Javascript Worker子線程代碼實例

    Javascript Worker子線程代碼實例

    這篇文章主要介紹了Javascript Worker子線程代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-02-02
  • JS實現(xiàn)簡單計數(shù)器

    JS實現(xiàn)簡單計數(shù)器

    這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單計數(shù)器，有加、減和零三個按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-10-10
  • 在js中實現(xiàn)郵箱格式的驗證方法(推薦)

    在js中實現(xiàn)郵箱格式的驗證方法(推薦)

    下面小編就為大家?guī)硪黄趈s中實現(xiàn)郵箱格式的驗證方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • 能說明你的Javascript技術很爛的五個原因分析

    能說明你的Javascript技術很爛的五個原因分析

    Javascript在互聯(lián)網(wǎng)上名聲很臭，但你又很難再找到一個像它這樣如此動態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言
    2011-10-10
  • 理解 JavaScript Scoping & Hoisting（二）

    理解 JavaScript Scoping & Hoisting（二）

    這篇文章主要介紹了理解 JavaScript Scoping & Hoisting,盡管對于有經(jīng)驗的程序員來說這只是小菜一碟，不過我還是順著初學者常見的思路做一番描述
    2015-11-11
  • js 性能優(yōu)化之算法和流程控制

    js 性能優(yōu)化之算法和流程控制

    循環(huán)處理是最常見的編程模式之一，也是提升性能必須關注的要點之一。本文將對此進行介紹。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-02-02
  • 詳解JavaScript 中 if / if...else...替換方式

    詳解JavaScript 中 if / if...else...替換方式

    這篇文章主要介紹了JavaScript 中 if / if...else...替換方式 ，非常不錯，這篇文章是小編給大家做的一個方法匯總，感興趣的朋友一起看看吧
    2018-07-07
  • 推薦一個封裝好的getElementsByClassName方法

    推薦一個封裝好的getElementsByClassName方法

    這篇文章主要推薦一個封裝好的getElementsByClassName方法,需要的朋友可以參考下
    2014-12-12
  • JS實現(xiàn)電腦虛擬鍵盤的操作

    JS實現(xiàn)電腦虛擬鍵盤的操作

    這篇文章主要為大家詳細介紹了JS實現(xiàn)電腦虛擬鍵盤的操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-06-06

最新評論