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 相关文章推荐
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 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获取参数的几种方法总结
2014/02/18 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
jQuery基础知识小结
2014/12/22 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python版本的仿windows计划任务工具
2018/04/30 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Python实现异步IO的示例
2020/11/05 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
小学毕业演讲稿
2014/04/25 职场文书
慈善晚会策划方案
2014/05/14 职场文书
学校节能减排倡议书
2014/05/16 职场文书
学校读书活动总结
2014/06/30 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
个人查摆剖析材料
2014/10/16 职场文书
师德培训心得体会2016
2016/01/09 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers