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 相关文章推荐
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 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
php4的session功能评述(一)
2006/10/09 PHP
php简单分页类实现方法
2015/02/26 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
Seajs源码详解分析
2019/04/02 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
Angular封装表单控件及思想总结
2019/12/11 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Django实现随机图形验证码的示例
2020/10/15 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
伊琍体标语
2014/06/25 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
Go语言编译原理之变量捕获
2022/08/05 Golang