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 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
js Dialog 实践分享
Oct 22 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
js实现日历的简单算法
Jan 24 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
jQuery异步提交表单实例
May 30 jQuery
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
基于python中theano库的线性回归
2018/08/31 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
如何使用repr调试python程序
2020/02/28 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
《骑牛比赛》教后反思
2014/04/22 职场文书
员工团队活动方案
2014/08/28 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
MySQL基础(一)
2021/04/05 MySQL
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript