JS簡單的圖片放大縮小的兩種方法
更新時間:2013年11月11日 16:38:29 作者:
這篇文章介紹了JS簡單的圖片放大縮小的兩種方法,有需要的朋友可以參考一下
以左上角為定點(diǎn),放大縮小,該點(diǎn)位置不變。
方法一:
Html代碼
<script type="text/javascript">
//兼容IE和火狐 縮小放大、縮放
function ImageSuofang(args) {
var oImg = document.getElementById("oImg");
if (args) {
oImgoImg.width = oImg.width * 1.1;
oImgoImg.height = oImg.height * 1.1;
}
else {
oImgoImg.width = oImg.width / 1.1;
oImgoImg.height = oImg.height / 1.1;
}
}
</script>
<form id="form1">
<div class="pancontainer" data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;">
<img id="oImg" src="/img/c.jpg" alt="pic"/>
</div>
<input id="btn1" type="button" value="放大" onclick="ImageSuofang(true)" />
<input id="btn2" type="button" value="縮小" onclick="ImageSuofang(false)" />
<!-- <input type="button" value="<-Rotate逆時針" name="RotateL" id="RotateL" onclick="rotateRight('oImg',90);"> -->
</form>
方法二:
CSS編碼如下:
Css代碼
#biankuang{height:480px;width:320px;margin: 30px auto;}//加一個border可以看到定點(diǎn)為左上角。
下面是實(shí)現(xiàn)圖片縮小放大功能的JS代碼:
Js代碼
var zoomLevel = 0;
var currentWidth = 0;
var currentHeight = 0;
var originalWidth = 0;
var originalHeight = 0;
function initial(){
currentWidth = document.myImage.width;
currentHeight = document.myImage.height;
originalWidth = currentWidth;
originalHeight = currentHeight;
update();
}
function zoomIn(){
document.myImage.width = currentWidth*1.2;
document.myImage.height = currentHeight*1.2;
zoomLevel = zoomLevel + 1;
update();
}
function zoomOut(){
document.myImage.width = currentWidth/1.2;
document.myImage.height = currentHeight/1.2;
zoomLevel = zoomLevel - 1;
update();
}
function resetImage(){
document.myImage.width = originalWidth;
document.myImage.height = originalHeight;
zoomLevel = 0;
update();
}
function update(){
currentWidth = document.myImage.width;
currentHeight = document.myImage.height;
zoomsize.innerText = zoomLevel;
imgsize.innerText = currentWidth + "X" + currentHeight;
}
html的body中的代碼如下:
Html代碼
<body onload="initial()">
<div id="biankuang" data-orient="center">
<img name="myImage" src="/img/c.jpg" alt="pic"/> //引入本地圖片
</div>
<p>
<input type="button" value="放大圖片" onclick="zoomIn()">
<input type="button" value="縮小圖片" onclick="zoomOut()">
<input type="button" value="重置圖片" onclick="resetImage()">
<span id="zoomsize"></span> <span id="imgsize"></span></p>
</body>
方法一:
Html代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//兼容IE和火狐 縮小放大、縮放
function ImageSuofang(args) {
var oImg = document.getElementById("oImg");
if (args) {
oImgoImg.width = oImg.width * 1.1;
oImgoImg.height = oImg.height * 1.1;
}
else {
oImgoImg.width = oImg.width / 1.1;
oImgoImg.height = oImg.height / 1.1;
}
}
</script>
<form id="form1">
<div class="pancontainer" data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;">
<img id="oImg" src="/img/c.jpg" alt="pic"/>
</div>
<input id="btn1" type="button" value="放大" onclick="ImageSuofang(true)" />
<input id="btn2" type="button" value="縮小" onclick="ImageSuofang(false)" />
<!-- <input type="button" value="<-Rotate逆時針" name="RotateL" id="RotateL" onclick="rotateRight('oImg',90);"> -->
</form>
方法二:
CSS編碼如下:
Css代碼
復(fù)制代碼 代碼如下:
#biankuang{height:480px;width:320px;margin: 30px auto;}//加一個border可以看到定點(diǎn)為左上角。
下面是實(shí)現(xiàn)圖片縮小放大功能的JS代碼:
Js代碼
復(fù)制代碼 代碼如下:
var zoomLevel = 0;
var currentWidth = 0;
var currentHeight = 0;
var originalWidth = 0;
var originalHeight = 0;
function initial(){
currentWidth = document.myImage.width;
currentHeight = document.myImage.height;
originalWidth = currentWidth;
originalHeight = currentHeight;
update();
}
function zoomIn(){
document.myImage.width = currentWidth*1.2;
document.myImage.height = currentHeight*1.2;
zoomLevel = zoomLevel + 1;
update();
}
function zoomOut(){
document.myImage.width = currentWidth/1.2;
document.myImage.height = currentHeight/1.2;
zoomLevel = zoomLevel - 1;
update();
}
function resetImage(){
document.myImage.width = originalWidth;
document.myImage.height = originalHeight;
zoomLevel = 0;
update();
}
function update(){
currentWidth = document.myImage.width;
currentHeight = document.myImage.height;
zoomsize.innerText = zoomLevel;
imgsize.innerText = currentWidth + "X" + currentHeight;
}
html的body中的代碼如下:
Html代碼
復(fù)制代碼 代碼如下:
<body onload="initial()">
<div id="biankuang" data-orient="center">
<img name="myImage" src="/img/c.jpg" alt="pic"/> //引入本地圖片
</div>
<p>
<input type="button" value="放大圖片" onclick="zoomIn()">
<input type="button" value="縮小圖片" onclick="zoomOut()">
<input type="button" value="重置圖片" onclick="resetImage()">
<span id="zoomsize"></span> <span id="imgsize"></span></p>
</body>
您可能感興趣的文章:
- js放大鏡放大圖片效果
- js實(shí)現(xiàn)單擊圖片放大圖片的方法
- js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果
- JS實(shí)現(xiàn)鼠標(biāo)移動到縮略圖顯示大圖的圖片放大效果
- js實(shí)現(xiàn)圖片放大展示效果
- 鼠標(biāo)滑上去后圖片放大浮出效果的js代碼
- JavaScript圖片放大鏡效果代碼[代碼比較簡單]
- 手機(jī)端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果
- JS網(wǎng)頁圖片查看器(兼容IE、FF)可控制圖片放大縮小移動
- JavaScript實(shí)現(xiàn)淘寶網(wǎng)圖片的局部放大功能
相關(guān)文章
JavaScript基礎(chǔ)教程之如何實(shí)現(xiàn)一個簡單的promise
看了些promise的介紹,還是感覺不夠深入,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript基礎(chǔ)教程之如何實(shí)現(xiàn)一個簡單的promise的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-09-09window.print()打印html網(wǎng)頁的兩種方法實(shí)現(xiàn)
本文主要介紹了window.print()打印html網(wǎng)頁的兩種方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06JS實(shí)現(xiàn)簡單面向?qū)ο蟮念伾x擇器實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡單面向?qū)ο蟮念伾x擇器,以完整實(shí)例形式分析了JavaScript基于面向?qū)ο髮?shí)現(xiàn)顏色選擇器的具體步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-04-04js實(shí)現(xiàn)的真正的iframe高度自適應(yīng)(兼容IE,FF,Opera)
由于項(xiàng)目上的需要,要用一個iframe高度自適應(yīng)的功能,在google上搜了很久,找了一些修改了下。大家可以測試下。2010-03-03