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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 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
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
php微信开发之百度天气预报
2016/11/18 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
JS实现的视频弹幕效果示例
2018/08/17 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python中修改字符串的四种方法
2018/11/02 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
Python实现图片添加文字
2019/11/26 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
python热力图实现的完整实例
2022/06/25 Python
基于Redission的分布式锁实战
2022/08/14 Redis