JavaScript 圖片放大鏡(可拖放、縮放效果)
更新時間:2008年09月15日 10:35:34 作者:
背景:很久之前就在marry5.com看到這個效果,當時覺得很神奇,礙于水平有限,沒做出來。
首先需要5個參數(shù),分別是:容器對象、拖放對象、圖片地址、圖片寬度、圖片高度。
可選設(shè)置:
Opacity:透明度(0到100),
dragTop:拖放對象top,
dragLeft:拖放對象left,
dragWidth:拖放對象寬度,
dragHeight:拖放對象高度,
縮放觸發(fā)對象:
Right,Left,Up,Down,RightDown,LeftDown,RightUp,LeftUp,
Scale:是否按比例縮放,
View:預覽對象,
viewWidth:預覽寬度,
viewHeight:預覽高度,
實例化對象:
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ù)需要擴展,例如:
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();
}
補充:
里面的Drag拖放程序和Resize縮放程序是可以獨立出來用的,
ImgCropper圖片切割程序只是在內(nèi)部實例化了這兩個對象。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
小程序開發(fā)?page-container?頁面容器彈出對話框功能的實現(xiàn)
這篇文章主要介紹了小程序開發(fā)?page-container?頁面容器,彈出對話框,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08JavaScript實現(xiàn)帶有子菜單和控件的slider輪播圖效果
本文通過實例代碼給大家介紹了基于js實現(xiàn)帶有子菜單和控件的slider輪播圖效果,本文附有圖片和示例代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-11-11JavaScript函數(shù)節(jié)流概念與用法實例詳解
這篇文章主要介紹了JavaScript函數(shù)節(jié)流概念與用法,結(jié)合實例形式詳細分析了JavaScript函數(shù)節(jié)流的概念、功能,并分析了函數(shù)節(jié)流的用法與使用技巧,需要的朋友可以參考下2016-06-06Firefox中通過JavaScript復制數(shù)據(jù)到剪貼板(Copy to Clipboard 跨瀏覽器版)
這篇文章主要介紹了irefox中通過JavaScript復制數(shù)據(jù)到剪貼板的方法,可以跨瀏覽器使用,大家可以使用看看2013-11-11