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 相关文章推荐
jQuery 名称冲突的解决方法
Apr 08 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 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
检测png图片是否完整的php代码
2010/09/06 PHP
php中取得文件的后缀名?
2012/02/20 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
PHP文件与目录操作示例
2016/12/24 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
jquery validate demo 基础
2015/10/29 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
python 简易计算器程序,代码就几行
2009/08/29 Python
讲解Python中的递归函数
2015/04/27 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
python 二维数组90度旋转的方法
2019/01/28 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
法学毕业生自荐信
2013/11/13 职场文书
世界遗产导游词
2015/02/13 职场文书
亮剑观后感
2015/06/05 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android