JS實現(xiàn)圖片放大縮小的方法
更新時間：2017年02月15日 14:31:14 作者：nlx0201
這篇文章主要介紹了JS實現(xiàn)圖片放大縮小的方法,結(jié)合實例形式分析了javascript動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)圖片放大縮小的方法。分享給大家供大家參考，具體如下：
最近經(jīng)常看見有人問怎樣放大和縮小圖片，我之前也做過一次，下面就把我的方法共享出來。我有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相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:
- JS簡單的圖片放大縮小的兩種方法
- JS網(wǎng)頁圖片查看器(兼容IE、FF)可控制圖片放大縮小移動
- javascript 圖片放大縮小功能實現(xiàn)代碼
- js實現(xiàn)用滾動條來放大縮小圖片的代碼
- js實現(xiàn)圖片旋轉(zhuǎn) js滾動鼠標中間對圖片放大縮小
- js實現(xiàn)圖片緩慢放大縮小效果
- js實現(xiàn)圖片放大縮小功能后進行復雜排序的方法
- 原生js實現(xiàn)圖片放大縮小計時器效果
- js實現(xiàn)使用鼠標拖拽切換圖片的方法
- 原生JS實現(xiàn)拖拽圖片效果
- JS實現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
- JavaScript實現(xiàn)圖片的放大縮小及拖拽功能示例
相關文章
因為業(yè)務需求 今天做了一個textarea文本域字符串長度限制的方法，其實網(wǎng)上已經(jīng)有了很多相關的解決方案，但在輸入日語時，在IE存在BUG，我的這個版本就是針對這種情況的2012-10-10
這篇文章主要介紹了JavaScript獲取Url里的參數(shù),需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了three.js中3D視野的縮放實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
dateformat.js 是一個非常簡潔、輕量級、不到 5kb 的很簡潔的 Javascript 庫,本文主要介紹了dateformat.js超輕量級的JS日期處理庫的使用,感興趣的可以了解一下2023-12-12
基于JavaScript實現(xiàn)跳轉(zhuǎn)提示頁面
這篇文章主要介紹了基于JavaScript實現(xiàn)跳轉(zhuǎn)提示頁面 的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了javascript實現(xiàn)隨機抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點擊生成隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript代碼應該放在HTML代碼哪個位置比較好？
這篇文章主要介紹了JavaScript代碼應該放在HTML代碼哪個位置比較好？本文總結(jié)了多種放置JS代碼的方法,需要的朋友可以參考下2014-10-10
本篇文章主要介紹了微信小程序開發(fā)（二）圖片上傳+服務端接收，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
本篇文章主要介紹了js輪播圖透明度切換（帶上下頁和底部圓點切換）的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04