jQuery + Flex 通過(guò)拖拽方式動(dòng)態(tài)改變圖片的代碼
更新時(shí)間:2011年08月03日 23:45:53 作者:
功能終于告一段落了,實(shí)現(xiàn)了預(yù)期的功能。遇到了一個(gè)小麻煩,js 會(huì)把某些變量( 如果你是通過(guò)對(duì)象的方式傳遞的,將在傳遞之后丟失類(lèi)型信息 ,后面*號(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)頁(yè)元素拖拽插件效果及實(shí)現(xiàn)
- 如何使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能
- jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無(wú)滾動(dòng)條左右拖拽的方法
相關(guān)文章
jquery實(shí)現(xiàn)非疊加式的搜索框提示效果
用JQUERY疊加兩個(gè)INPUT框來(lái)實(shí)現(xiàn)登陸中需要輸入的用戶(hù)名、密碼來(lái)實(shí)現(xiàn)提示與用戶(hù)的輸出,使用jquery在一個(gè)INPUT框中即可實(shí)現(xiàn)2014-01-01
使用jQuery Rotare實(shí)現(xiàn)微信大轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
本文主要介紹使用jQuery Rotare實(shí)現(xiàn)微信大轉(zhuǎn)盤(pán)抽獎(jiǎng)功能,并附實(shí)例講解,非常實(shí)用,有需要的朋友可以參考一下。2016-06-06
JQuery validate插件驗(yàn)證用戶(hù)注冊(cè)信息
這篇文章主要為大家詳細(xì)介紹了JQuery validate插件驗(yàn)證用戶(hù)注冊(cè)信息的具體代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05
jQuery實(shí)現(xiàn)圖片放大預(yù)覽實(shí)現(xiàn)原理及代碼
jQuery實(shí)現(xiàn)圖片放大原理很簡(jiǎn)單,就是將圖片顯示的尺寸變大后放在瀏覽器的一個(gè)指定位置,從而實(shí)現(xiàn)圖片的放大預(yù)覽,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-09-09
jquery實(shí)現(xiàn)清新實(shí)用的網(wǎng)頁(yè)菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)清新實(shí)用的網(wǎng)頁(yè)菜單效果,涉及jquery通過(guò)鼠標(biāo)事件控制頁(yè)面元素的動(dòng)態(tài)隱藏與顯示實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jquery parent和parents的區(qū)別分析
從字面上不難看出parent是指取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合。parents則是取得一個(gè)包含著所有匹配元素的祖先元素的元素集合(不包含根元素)??梢酝ㄟ^(guò)一個(gè)可選的表達(dá)式進(jìn)行篩選2013-10-10

