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 实现图片轮换
Jan 28 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
php模板原理讲解
2013/11/13 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
如何用Python徒手写线性回归
2021/01/25 Python
python中@contextmanager实例用法
2021/02/07 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android