JS實(shí)現(xià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)容感興趣的讀者可查看本站專題：《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ì)有所幫助。
- JS簡(jiǎn)單的圖片放大縮小的兩種方法
- JS網(wǎng)頁(yè)圖片查看器(兼容IE、FF)可控制圖片放大縮小移動(dòng)
- javascript 圖片放大縮小功能實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)用滾動(dòng)條來(lái)放大縮小圖片的代碼
- js實(shí)現(xiàn)圖片旋轉(zhuǎn) js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小
- js實(shí)現(xiàn)圖片緩慢放大縮小效果
- js實(shí)現(xiàn)圖片放大縮小功能后進(jìn)行復(fù)雜排序的方法
- 原生js實(shí)現(xiàn)圖片放大縮小計(jì)時(shí)器效果
- js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
- 原生JS實(shí)現(xiàn)拖拽圖片效果
- JS實(shí)現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
- JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能示例
相關(guān)文章
因?yàn)闃I(yè)務(wù)需求 今天做了一個(gè)textarea文本域字符串長(zhǎng)度限制的方法，其實(shí)網(wǎng)上已經(jīng)有了很多相關(guān)的解決方案，但在輸入日語(yǔ)時(shí)，在IE存在BUG，我的這個(gè)版本就是針對(duì)這種情況的2012-10-10
這篇文章主要介紹了JavaScript獲取Url里的參數(shù),需要的朋友可以參考下2014-12-12
three.js中3D視野的縮放實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了three.js中3D視野的縮放實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
dateformat.js超輕量級(jí)的JS日期處理庫(kù)的使用
dateformat.js 是一個(gè)非常簡(jiǎn)潔、輕量級(jí)、不到 5kb 的很簡(jiǎn)潔的 Javascript 庫(kù),本文主要介紹了dateformat.js超輕量級(jí)的JS日期處理庫(kù)的使用,感興趣的可以了解一下2023-12-12
基于JavaScript實(shí)現(xiàn)跳轉(zhuǎn)提示頁(yè)面
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)跳轉(zhuǎn)提示頁(yè)面 的相關(guān)資料,需要的朋友可以參考下2016-09-09
javascript實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript代碼應(yīng)該放在HTML代碼哪個(gè)位置比較好？
這篇文章主要介紹了JavaScript代碼應(yīng)該放在HTML代碼哪個(gè)位置比較好？本文總結(jié)了多種放置JS代碼的方法,需要的朋友可以參考下2014-10-10
微信小程序開(kāi)發(fā)（二）圖片上傳+服務(wù)端接收詳解
本篇文章主要介紹了微信小程序開(kāi)發(fā)（二）圖片上傳+服務(wù)端接收，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
js輪播圖透明度切換（帶上下頁(yè)和底部圓點(diǎn)切換）
本篇文章主要介紹了js輪播圖透明度切換（帶上下頁(yè)和底部圓點(diǎn)切換）的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04