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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
微信小程序实现时间进度条功能
Nov 17 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
搜索引擎技术核心揭密
2006/10/09 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP 断点续传实例详解
2017/11/11 PHP
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python构建深度神经网络(DNN)
2018/03/10 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
详解python中*号的用法
2019/10/21 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
大学生就业自荐信
2013/10/26 职场文书
平面设计师工作职责范文
2013/12/03 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
python实现MD5进行文件去重的示例代码
2021/07/09 Python