DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> avalonjs實現仿微博的圖片拖動特效
avalonjs實現仿微博的圖片拖動特效
編輯:JavaScript綜合知識     

   JavaScript實現仿微博的圖片拖動特效,貌似這些天有不少朋友需要這功能,今天發現這款是js制作的好,不敢獨享,希望需要的朋友喜歡哦。

  效果:

  HTML:

  ?

1 2 3 4 5 6 <div id='post_img' ms-controller='post_img'> <ul id='post_img_inner' ms-mousemove='onmousemove'> <li ms-repeat-el="post_img_list" class='inline-block' ms-mousedown='onmousedown($event,$index,el)' ms-attr-id='post_img_item{{$index}}'> <img ms-src='el' class='uploaded_img'></li> </ul> </div>

  JS:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//拖動的代理,原圖片,原圖片的src var post_img = avalon.define('post_img', function(vm) { vm.post_img_list=[];//保存所有圖片的src vm.onmousedown=function(e,i,el){ $('drag_proxy').style.display='block'; var target=e.target.parentNode; var xx = e.clientX; var yy = e.clientY; $('drag_proxy').style.top=yy+'px'; $('drag_proxy').style.left=xx+'px'; if(target&&target.nodeName=='LI'){ ori_src=el; index=target.getAttribute('id').substring(13); $('drag_proxy').innerHTML=target.innerHTML; post_img.post_img_list.splice(i, 1, 'about:blank'); } drag_flag=true; }; vm.onmousemove=function(e){ if(drag_flag){//如果點下了圖片 var xx = e.clientX; var yy = e.clientY; $('drag_proxy').style.top=yy+'px'; $('drag_proxy').style.left=xx+'px'; var x=xx-avalon($('post_img')).offset().left; var y=yy-avalon($('post_img')).offset().top; //例子沒有考慮滾動條的情況 var x_index=Math.floor(x/100);//圖片尺寸100*100 var y_index=Math.floor(y/100); post_img.post_img_list.splice(index, 1);//刪除當前圖片的li var target_index=3*y_index+x_index;//目標圖片的位置(3*3) if(post_img.post_img_list.indexOf('about:blank')!=target_index) //如果圖片數組中沒有src=about:blank這個占位置的li post_img.post_img_list.splice(target_index, 0, 'about:blank'); //添加src=about:blank index=target_index; //會觸發很多次move,所以觸發一次就改動一次 } }; }); document.onmouseup=function(e){ drag_holder=null; if(ori_src){ post_img.post_img_list.splice(index, 1); //刪除src=about:blank post_img.post_img_list.splice(index, 0,ori_src); //添加原圖片 } $('drag_proxy').style.display='none'; $('drag_proxy').innerHTML=''; drag_flag=false; };

  以上所述就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved