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 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
基于JS实现计算24点算法代码实例解析
Jul 23 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
python如何查看安装了的模块
2020/06/23 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
高一英语教学反思
2014/01/22 职场文书
农村改厕实施方案
2014/03/22 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
岗位说明书怎么写
2014/07/30 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
初中家长意见
2015/06/03 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
Java如何实现树的同构?
2021/06/22 Java/Android
nginx静态资源的服务器配置方法
2022/07/07 Servers