JS實現圖片放大縮小的方法
更新時間：2017年02月15日 14:31:14 作者：nlx0201
這篇文章主要介紹了JS實現圖片放大縮小的方法,結合實例形式分析了javascript動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下
本文實例講述了JS實現圖片放大縮小的方法。分享給大家供大家參考，具體如下：
最近經?？匆娪腥藛栐鯓臃糯蠛涂s小圖片，我之前也做過一次，下面就把我的方法共享出來。我有2個種方法實現：第一種方法可以兼容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數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
完美解決mui框架off-canvas側滑超出部分隱藏無法滾動的問題
下面小編就為大家分享一篇完美解決mui框架off-canvas側滑超出部分隱藏無法滾動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Javascript Worker子線程代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細介紹了JS實現簡單計數器，有加、減和零三個按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
下面小編就為大家?guī)硪黄趈s中實現郵箱格式的驗證方法(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
Javascript在互聯網上名聲很臭，但你又很難再找到一個像它這樣如此動態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言2011-10-10
理解 JavaScript Scoping & Hoisting（二）
這篇文章主要介紹了理解 JavaScript Scoping & Hoisting,盡管對于有經驗的程序員來說這只是小菜一碟，不過我還是順著初學者常見的思路做一番描述2015-11-11
循環(huán)處理是最常見的編程模式之一，也是提升性能必須關注的要點之一。本文將對此進行介紹。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
詳解JavaScript 中 if / if...else...替換方式
這篇文章主要介紹了JavaScript 中 if / if...else...替換方式 ，非常不錯，這篇文章是小編給大家做的一個方法匯總，感興趣的朋友一起看看吧2018-07-07
推薦一個封裝好的getElementsByClassName方法
這篇文章主要推薦一個封裝好的getElementsByClassName方法,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了JS實現電腦虛擬鍵盤的操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06