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
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
canvas实现图像截取功能
Feb 06 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
YII实现分页的方法
2014/07/09 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
Prototype Date对象 学习
2009/07/12 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
目前最全的python的就业方向
2018/06/05 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
总经理职责
2013/12/22 职场文书
党员个人思想汇报
2013/12/28 职场文书
应届护士求职信范文
2014/01/26 职场文书
军人违纪检讨书
2014/02/04 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
企业晚会策划方案
2014/05/29 职场文书
社区科普工作方案
2014/06/03 职场文书
安全负责人任命书
2014/06/06 职场文书
springboot入门 之profile设置方式
2022/04/04 Java/Android