wex5 教程 之 图文讲解 0基础掌握坐标定位与样式逻辑
由于制作播放器需要，经过网上查资料，对坐标系定位与逻辑进行了深入了解，通过自已动手与摸索，自已动手实现鼠标拖拽，来控制播放器的移动入音量旋钮的旋转。
很多刚刚接触wex5的朋友，对js以及css相对操作不熟练，本文尽量以简单的思路来说明。
效果演示：
一.总体思路:
用js通过对鼠标和操作对像的坐标位置的逻辑判断，改变对像的css样式中的位置等参数，实现操作对像的样式变化。
二.event事件与对像获取：
在学习与操作代码过程中，要充分利用谷歌浏览器的开发工具，其中不仅提供了大量的对像和方法，对于wex5这种开发文档不够全面的开发工具，相当于API的补充文档。
对开发工具的分析可知，鼠标类型：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样式相互配后，实际编写过程中充分发挥.
相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251
扫描二维码，看高清教学视频。
