最近發現web網頁的拖曳效果,我個人覺得是一種不錯的使用者體驗,抽空研究了一下,原理還蠻簡單的,下面貼一下我寫的一個簡單拖曳jquery自訂函數。
jquery程式碼:fun.js
_IsMove = 0;
_MouseLeft = 0;
_MouseTop = 0;
return $(this).bind("mousemove",function(e){
if(_IsMove==1){
$(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop});
}
}).bind( "mousedown",function(e){
_IsMove=1;
var offset =$(this).offset();
_MouseLeft = e.pageX - offset.left;
_MouseTop = e .pageY - offset.top;
}).bind("mouseup",function(){
_IsMove=0;
}).bind("mouseout",function(){
_IsMove =0;
});
}
html代碼:
效果圖2: