jQuery + Flex 通过拖拽方式动态改变图片的代码


Posted in Javascript onAugust 03, 2011

代码如下:

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; 
}
Javascript 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
input的focus方法使用
Mar 13 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
JavaScript 一道字符串分解的题目
Aug 03 #Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 #Javascript
JavaScript 大数据相加的问题
Aug 03 #Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 #Javascript
JS 控制小数位数的实现代码
Aug 02 #Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 #Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 #Javascript
You might like
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
jquery简单体验
2007/01/10 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
解析Python中的__getitem__专有方法
2016/06/27 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
工程项目建议书范文
2014/03/12 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
语文教师个人工作总结
2015/02/06 职场文书