快捷導(dǎo)航

JavaScript 圖片放大鏡（可拖放、縮放效果）第4/4頁(yè)

更新時(shí)間：2008年09月15日 10:35:34 作者：

背景：很久之前就在marry5.com看到這個(gè)效果，當(dāng)時(shí)覺得很神奇，礙于水平有限，沒做出來(lái)。

首先需要5個(gè)參數(shù)，分別是：容器對(duì)象、拖放對(duì)象、圖片地址、圖片寬度、圖片高度。
可選設(shè)置：
Opacity:透明度(0到100)，
dragTop:拖放對(duì)象top，
dragLeft:拖放對(duì)象left，
dragWidth:拖放對(duì)象寬度，
dragHeight:拖放對(duì)象高度，
縮放觸發(fā)對(duì)象：
Right,Left,Up,Down,RightDown,LeftDown,RightUp,LeftUp,
Scale:是否按比例縮放，
View:預(yù)覽對(duì)象，
viewWidth:預(yù)覽寬度，
viewHeight:預(yù)覽高度，

實(shí)例化對(duì)象：

Code
var ic = new ImgCropper("bgDiv", "dragDiv", "1.jpg", 400, 500, {
dragTop: 50, dragLeft: 50,
Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown",
RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
View: "viewDiv", viewWidth: 200, viewHeight: 200
})
可以根據(jù)需要擴(kuò)展，例如：

Code
//設(shè)置圖片大小
function Size(w, h){
ic.Width = w;
ic.Height = h;
ic.Init();
}
//換圖片
function Pic(url){
ic.Url = url;
ic.Init();
}
//設(shè)置透明度
function Opacity(i){
ic.Opacity = i;
ic.Init();
}
//是否使用比例
function Scale(b){
ic.Scale = b;
ic.Init();
}
補(bǔ)充：

里面的Drag拖放程序和Resize縮放程序是可以獨(dú)立出來(lái)用的，
ImgCropper圖片切割程序只是在內(nèi)部實(shí)例化了這兩個(gè)對(duì)象。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript 圖片切割效果（帶拖放、縮放效果） </title> </head> <body> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{position:absolute;background:#F00;width:5px; height:5px; z-index:500; font-size:0;} #dragDiv{border:1px solid #000000;} </style> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="50%"><div   class="vvxyksv9kd"   id="bgDiv" style="width:400px; height:500px;"> <div   class="vvxyksv9kd"   id="dragDiv"> <div   class="vvxyksv9kd"   id="rRightDown" style="right:0; bottom:0;"> </div> <div   class="vvxyksv9kd"   id="rLeftDown" style="left:0; bottom:0;"> </div> <div   class="vvxyksv9kd"   id="rRightUp" style="right:0; top:0;"> </div> <div   class="vvxyksv9kd"   id="rLeftUp" style="left:0; top:0;"> </div> <div   class="vvxyksv9kd"   id="rRight" style="right:0; top:50%;"> </div> <div   class="vvxyksv9kd"   id="rLeft" style="left:0; top:50%;"> </div> <div   class="vvxyksv9kd"   id="rUp" style="top:0; left:50%;"> </div> <div   class="vvxyksv9kd"   id="rDown" style="bottom:0;left:50%;"></div> </div> </div></td> <td><div   class="vvxyksv9kd"   id="viewDiv" style="width:200px; height:200px;"> </div></td> </tr> </table>     <div> <input name="" type="button" value=" 增肥 " onclick="Size(500,400)" /> <input name="" type="button" value=" 還原 " onclick="Size(300,400)" /> </div>  <div> <input name="" type="button" value=" 換圖 " onclick="Pic('http://www.dbjr.com.cn/upload/20080915103828432.jpg')" /> <input name="" type="button" value=" 還原 " onclick="Pic('http://www.dbjr.com.cn/upload/20080915103841507.jpg')" /> </div>  <div> <input name="" type="button" value=" 透明 " onclick="Opacity(0)" /> <input name="" type="button" value=" 還原 " onclick="Opacity(50)" /> </div>  <div> <input name="" type="button" value="使用比例" onclick="Scale(true)" /> <input name="" type="button" value="取消比例" onclick="Scale(false)" /> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

上一頁(yè)1 2 34閱讀全文

您可能感興趣的文章: