wex5 教程 之 图文讲解 0基础掌握坐标定位与样式逻辑

   由于制作播放器需要，经过网上查资料，对坐标系定位与逻辑进行了深入了解，通过自已动手与摸索，自已动手实现鼠标拖拽，来控制播放器的移动入音量旋钮的旋转。

很多刚刚接触wex5的朋友，对js以及css相对操作不熟练，本文尽量以简单的思路来说明。

效果演示：

       

        

 

一.总体思路:

    用js通过对鼠标和操作对像的坐标位置的逻辑判断，改变对像的css样式中的位置等参数，实现操作对像的样式变化。

二.event事件与对像获取：

       在学习与操作代码过程中，要充分利用谷歌浏览器的开发工具，其中不仅提供了大量的对像和方法，对于wex5这种开发文档不够全面的开发工具，相当于API的补充文档。

 

 

1. altKey: false //a;t键是否按下
2. bubbles: true 
3. button: 0
4. buttons: 0
5. cancelBubble: false
6. cancelable: true
7. clientX: 484  //鼠标坐标
8. clientY: 145  //鼠标坐标
9. ctrlKey: false
10. currentTarget: document  
11. defaultPrevented: false
12. detail: 1
13. eventPhase: 3
14. fromElement: null
15. isTrusted: true
16. isTrusted: true
17. layerX: 484  
18. layerY: 115
19. metaKey: false
20. movementX: 0
21. movementY: 0
22. offsetX: 484
23. offsetY: 115
24. pageX: 484  //鼠标坐标
25. pageY: 145   //鼠标坐标
26. path: Array[9]
27. relatedTarget: null
28. returnValue: true
29. screenX: 484  //鼠标在屏幕的坐标
30. screenY: 206  //鼠标在屏幕的坐标
31. shiftKey: false //shinf键是否按下
32. srcElement: div#C74EEAEAAB50000137CD6C8019701251_div5.box.ciArqi2    //对像来源
33. target: div#C74EEAEAAB50000137CD6C8019701251_div5.box.ciArqi2        //操作目标  
34. timeStamp: 1479718438444
35. toElement: div#C74EEAEAAB50000137CD6C8019701251_div5.box.ciArqi2     //操作目标 
36. type: "click"
37. view: Window
38. webkitMovementX: 0
39. webkitMovementY: 0
40. which: 1
41. x: 484
42. y: 145

    对开发工具的分析可知，鼠标类型：type:"click",意为执行的事件不点击事件，之后可以获取鼠标坐标的定位方法，屏幕尺寸，事件对像，按键等信息，在js中可以直接使用。    比如event相关写法：

 

   event.srcElement,event.toElement,event.clientX,event.target.。可以直接获取到所要的信息。

三.css样式

   1. 鼠标样式：

     比较简单 直接在css对像中添加hover:鼠标类型即可,包括：

 

• [<uri> ,]*: 根据用户定义的资源显示
• auto: 正常鼠标
• crosshair: 十字鼠标
• default: 默认鼠标
• pointer: 点状鼠标
• move: 移动鼠标
• e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改变大小鼠标
• text: 文字鼠标
• wait: 等待鼠标
• help: 求助鼠标
• progress: 过程鼠标
• inherit: 继承

 

 

    

 

  四.js代码及逻辑实现：

       1.拖拽：

          鼠标拖拽过程中，鼠标坐标与对像坐标之间的距离保持不变 ，如下图：

       

      $(document).ready(function() {                                                   document即页面文件，ready之后执行，否则只有在点击对像后才能执行。
var move = false,disX,disY;                                                定义一个move对像控制是否移动。 disX,disY为鼠标与div左边距离； 
$(".box").mousedown(function(e) {                                  按下事件      
move = true;
disX = e.pageX - parseInt($(".box").css("left"));      从css对像中得到边距，用parsInt进行了整型转换。
disY = e.pageY - parseInt($(".box").css("top"));
});
$(".box").mousemove(function(e) {                                  移动事件
if (move) {
var x = e.pageX - disX;                                       移动中计算出div新的边距
var y = e.pageY - disY;
$(".box").css("left", x);                                         用css方法改变样式。
$(".box").css("top", y);
}
}).mouseup(function() {                              弹起事件，取消move;
move = false;
});
});

     2.按钮旋转：

         鼠标向上向下和移动距离，与屏幕的高度之比，以一定的比率转换成角度参数，用上图的方法，写入样式。如下图：

     

       代码逻辑与实现：

     $(document).ready(function(){
       var rotate=false;
       var deg=0;
       var y;
       $(".rotate").mousedown(function(e){
         rotate=true;
         y=e.pageY;
       });
       $(".rotate").mousemove(function(e){
        deg=(e.pageY-y)/$(document).height()*3000+"deg";     角度计算，注意单位是deg,，进行了字符串拼接。3000为自定义比率，大小可自已改，控制旋转速度。
        if(e.pageY>y){                                                                        e.pageY>y  进行正向判断，即只有当向下的拖拽才能旋转，因为音量只能正向，不能倒转。
        $(".rotate").css("transform","rotate("+deg+")");
        }      
       });
        $(".rotate").mouseup(function(){
        rotate=false;
       });

      总结：js逻辑与css样式相互配后，实际编写过程中充分发掘谷歌浏览器的开发工具提示功能，大量运用event事件函数，0基础也能学会并掌握坐标定位与样式逻辑

转载于:https://my.oschina.net/fangziffff123/blog/791618