首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery 图片裁切预览,容易拖动

2012-10-29 
jquery 图片裁切预览,简单拖动看到网上的图片裁切,很是有感觉,我自己基于jquery-ui,然后根据大家普遍接受

jquery 图片裁切预览,简单拖动

看到网上的图片裁切,很是有感觉,我自己基于jquery-ui,然后根据大家普遍接受的clip原理,实现的简单的预览

想整张图片,不知道怎么整上。

?

?

// JavaScript Documentvar layerx;var layery;var i=0;$(document).ready(function(){  $("#demo")[0].onmousedown=drag;//准备拖动  $("#demo")[0].onmousemove=dmove;//开始拖动  document.onmouseup=delmouse;//停止移动   });function drag(event){event=event||window.event;stopBubble(event);stopdefault(event);i=1;layerx=event.offsetX||event.layerX;layery=event.offsetY||event.layerY;}function dmove(event){event=event||window.event;stopBubble(event);stopdefault(event);if(i==1){$("#demo")[0].style.left=event.clientX-layerx+"px";$("#demo")[0].style.top=event.clientY-layery+"px";}}function delmouse(){i=0;}//防止冒泡事件function stopBubble(e){if(e&&e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;}}//阻止浏览器默认行为function stopdefault(e){if(e&&e.preventDefault){e.preventDefault();}else{window.event.returnValue=false;//取消默认事件}}

?缩放的原理也不难,在这就不发了。

?

1 楼 夜之son 2010-11-29   对不住大家了,我把浏览器默认行为取消后,ie还是不行。

热点排行