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第二章
Sep 30 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
浅谈JavaScript作用域
Dec 06 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
如何给phpadmin一个保护
2006/10/09 PHP
基于php缓存的详解
2013/05/15 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python os用法总结
2018/06/08 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
python 制作简单的音乐播放器
2020/11/25 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
25道Java面试题集合
2013/05/21 面试题
初级会计求职信范文
2014/02/15 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
学习考察心得体会
2014/09/04 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
Python中time标准库的使用教程
2022/04/13 Python