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 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
javascript内置对象操作详解
Feb 04 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
基于jquery的拖动布局插件
2011/11/25 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
Python中os.path用法分析
2015/01/15 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Python通过len函数返回对象长度
2020/10/22 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
自主招生自荐信指南
2014/02/04 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
小学班主任寄语大全
2014/04/04 职场文书
人资专员岗位职责
2014/04/04 职场文书
校园文化标语
2014/06/18 职场文书
小学生运动会报道稿
2014/09/12 职场文书
开除通知书范本
2015/04/25 职场文书
史上最牛辞职信
2015/05/13 职场文书
Python time库的时间时钟处理
2021/05/02 Python