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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
jQuery 性能优化指南(2)
May 21 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
基于vue.js实现的分页
Mar 13 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
python在非root权限下的安装方法
2018/01/23 Python
python使用代理ip访问网站的实例
2018/05/07 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python any()函数的使用方法
2019/10/28 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Django框架请求生命周期实现原理
2020/11/13 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
《她是我的朋友》教学反思
2014/04/26 职场文书
刘胡兰观后感
2015/06/16 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript