4、js 添加动态效果(方向 0,1,2,3 分别为上,右,下,左)
1、给绑定鼠标进入或者出去的事件
- $("#cursorPlay li").on("mouseenter mouseleave",function(event){
- var evType = event.type;
- var direction = getDir($(this), {
- x: event.pageX,
- y: event.pageY
- });
- // console.log("evtype:"+evType+",dir:"+direction);
- moveTo($(this),direction, evType);
- });
2、使用 getDir 获取鼠标移动的方向,coordinates 坐标
计算鼠标划入画出方向函数(搜索关键词 "jquery 计算鼠标划入划出方向")
- direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
- function getDir($el, coordinates){
- var w = $el.width(),
- h = $el.height(),
- x = (coordinates.x - $el.offset().left - (w / 2)) * (w > h ? (h / w) : 1),
- y = (coordinates.y - $el.offset().top - (h / 2)) * (h > w ? (w / h) : 1),
- direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
- return direction;
- }
3、添加移动函数 moveTo,三个参数分别为选择器,方向,鼠标划入画出类型,通过判断鼠标划入类型,来自定义选择器初始位置,然后重定义 CSS 样式,当鼠标划出时再重定义每个方向上的位置
- function moveTo($el, direction, type) {
- var $layer = $el.find("div");
- var coord = {};
- if (type === "mouseenter") {
- switch (direction) {
- case 0:
- $layer.css("top", "-100%").css("left", "0px");
- break;
- case 1:
- $layer.css("left", "100%").css("top", "0px");
- break;
- case 2:
- $layer.css("top", "100%").css("left", "0px");
- break;
- case 3:
- $layer.css("left", "-100%").css("top", "0px");
- break;
- }
- coord = {
- left: 0,
- top: 0
- }
- } else {
- switch (direction) {
- case 0:
- coord = {
- left: 0,
- top: '-100%'
- };
- break;
- case 1:
- coord = {
- left: '100%',
- top: 0
- };
- break;
- case 2:
- coord = {
- left: 0,
- top: '100%'
- };
- break;
- case 3:
- coord = {
- left: '-100%',
- top: 0
- };
- break;
- }
- }
- $layer.animate(coord, 300);
- }
来源: http://www.jb51.net/article/108125.htm