Heim > Web-Frontend > js-Tutorial > avalonjs implementiert Weibo-ähnliche Bildzieheffekte_Javascript-Fähigkeiten

avalonjs implementiert Weibo-ähnliche Bildzieheffekte_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:00:38
Original
1333 Leute haben es durchsucht

Wirkung:

HTML:

<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>
Nach dem Login kopieren

JS:

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;
};
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage