jQuery + Flex 通過拖拽方式動(dòng)態(tài)改變圖片的代碼
更新時(shí)間:2011年08月03日 23:45:53 作者:
功能終于告一段落了,實(shí)現(xiàn)了預(yù)期的功能。遇到了一個(gè)小麻煩,js 會(huì)把某些變量( 如果你是通過對(duì)象的方式傳遞的,將在傳遞之后丟失類型信息 ,后面*號(hào)部分)
代碼如下:
function init() {
if(swfobject.hasFlashPlayerVersion("10")){
var flashvars = {};
flashvars.xmlPath = "coffee";
flashvars.name = "coffee";
var params = {};
params.quality = "high";
params.wmode = "transparent";
var attributes = {};
attributes.id = "swf_editer";
swfobject.embedSWF("../img/swf/PhotoEditer2.swf","editarea","670","690","10.3"
,"../img/swf/playerProductInstall.swf",flashvars,params,attributes);
$( ".draggable" ).draggable({ revert: true, helper: "clone" });
$("body").bind("mousemove",getListener);
}
}
var srcName = "";
var currentX = 0;
var currentY = 0;
var currentTop = 0;
function setImgLocal(srcName) {
bindDroppable();
this.srcName = srcName ;
}
function changeSwfImg() {
if(srcName === "" || srcName === null){
return ;
}
var swf = swfobject.getObjectById("swf_editer");
var swfCoord = getSwfCoord();
var dom = {};
dom.name = srcName;
dom.changeFlg = 0;
//*********************************
var tmp1 = swfCoord.domY - 0;
tmp2 = swfCoord.domHeight - 220;
//*********************************
if((currentTop + currentY) > (swfCoord.domY + 100)
&& (currentTop + currentY) < (tmp1 + tmp2))
{
dom.changeFlg = currentX - swfCoord.domX < swfCoord.domWidth/2 ? 1 : 2;
}
swf.FlexManager(dom);
}
function bindDroppable() {
$("#swf_editer").droppable({
accept: "#dv_draggables img",
drop: function(event, ui) {
changeSwfImg();
}
});
}
function getListener(event) {
currentX = event.clientX;
currentY = event.clientY;
currentTop = document.documentElement.scrollTop ;
}
function getSwfCoord() {
var swf = swfobject.getObjectById("swf_editer");
var dom = {};
dom.domX = 0 , dom.domY = 0;
dom.domWidth = swf.width;
dom.domHeight = swf.height;
while(swf.offsetParent) {
dom.domX += swf.offsetLeft;
dom.domY += swf.offsetTop;
swf = swf.offsetParent;
}
return dom;
}
復(fù)制代碼 代碼如下:
function init() {
if(swfobject.hasFlashPlayerVersion("10")){
var flashvars = {};
flashvars.xmlPath = "coffee";
flashvars.name = "coffee";
var params = {};
params.quality = "high";
params.wmode = "transparent";
var attributes = {};
attributes.id = "swf_editer";
swfobject.embedSWF("../img/swf/PhotoEditer2.swf","editarea","670","690","10.3"
,"../img/swf/playerProductInstall.swf",flashvars,params,attributes);
$( ".draggable" ).draggable({ revert: true, helper: "clone" });
$("body").bind("mousemove",getListener);
}
}
var srcName = "";
var currentX = 0;
var currentY = 0;
var currentTop = 0;
function setImgLocal(srcName) {
bindDroppable();
this.srcName = srcName ;
}
function changeSwfImg() {
if(srcName === "" || srcName === null){
return ;
}
var swf = swfobject.getObjectById("swf_editer");
var swfCoord = getSwfCoord();
var dom = {};
dom.name = srcName;
dom.changeFlg = 0;
//*********************************
var tmp1 = swfCoord.domY - 0;
tmp2 = swfCoord.domHeight - 220;
//*********************************
if((currentTop + currentY) > (swfCoord.domY + 100)
&& (currentTop + currentY) < (tmp1 + tmp2))
{
dom.changeFlg = currentX - swfCoord.domX < swfCoord.domWidth/2 ? 1 : 2;
}
swf.FlexManager(dom);
}
function bindDroppable() {
$("#swf_editer").droppable({
accept: "#dv_draggables img",
drop: function(event, ui) {
changeSwfImg();
}
});
}
function getListener(event) {
currentX = event.clientX;
currentY = event.clientY;
currentTop = document.documentElement.scrollTop ;
}
function getSwfCoord() {
var swf = swfobject.getObjectById("swf_editer");
var dom = {};
dom.domX = 0 , dom.domY = 0;
dom.domWidth = swf.width;
dom.domHeight = swf.height;
while(swf.offsetParent) {
dom.domX += swf.offsetLeft;
dom.domY += swf.offsetTop;
swf = swf.offsetParent;
}
return dom;
}
您可能感興趣的文章:
- jquery插件jquery.beforeafter.js實(shí)現(xiàn)左右拖拽分隔條對(duì)比圖片的方法
- jQuery使用drag效果實(shí)現(xiàn)自由拖拽div
- jQuery控制Div拖拽效果完整實(shí)例分析
- jQuery實(shí)現(xiàn)拖拽效果插件的方法
- jQuery手機(jī)瀏覽器中拖拽動(dòng)作的艱難性分析
- jquery網(wǎng)頁元素拖拽插件效果及實(shí)現(xiàn)
- 如何使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能
- jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無滾動(dòng)條左右拖拽的方法
相關(guān)文章
JQuery表格拖動(dòng)調(diào)整列寬效果(自己動(dòng)手寫的)
當(dāng)鼠標(biāo)停留在表頭邊框線上時(shí),鼠標(biāo)會(huì)變成表示左右拖動(dòng)的形狀,接著拖動(dòng)鼠標(biāo),會(huì)在表格中出現(xiàn)一條隨鼠標(biāo)移動(dòng)的豎線,最后放開鼠標(biāo),表格列寬會(huì)被調(diào)整2014-09-09jQuery實(shí)現(xiàn)的背景顏色漸變動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的背景顏色漸變動(dòng)畫效果,涉及事件響應(yīng)及頁面元素屬性結(jié)合時(shí)間動(dòng)態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03jQuery 標(biāo)題的自動(dòng)翻轉(zhuǎn)實(shí)現(xiàn)代碼
我們平時(shí)在開發(fā)web程序的時(shí)候,想把一個(gè)新聞源滾動(dòng)顯示新聞的條目的標(biāo)題及內(nèi)容摘要,而且是每次一條,有點(diǎn)類似csdn的滾動(dòng)廣告。2009-10-10基于jQuery.Hz2Py.js插件實(shí)現(xiàn)的漢字轉(zhuǎn)拼音特效
jQuery.Hz2Py.js插件實(shí)現(xiàn)的漢字轉(zhuǎn)拼音是一款很實(shí)用的在線轉(zhuǎn)換功能,此插件已經(jīng)把漢字打包成一個(gè)插件庫,調(diào)用的時(shí)間很簡單,只調(diào)用一個(gè)方法就可以實(shí)現(xiàn)轉(zhuǎn)換了2015-05-05