zoukankan      html  css  js  c++  java
  • jQuery获取鼠标移动方向2

    (function($) {
    $.fn.extend({
    show: function(div) {
    var w = this.width(),
    h = this.height(),
    xpos = w / 2,
    ypos = h / 2,
    eventType = "",
    direct = "";
    this.css({
    "overflow": "hidden",
    "position": "relative"
    });
    div.css({
    "position": "absolute",
    "top": this.width()
    });
    this.on("mouseenter mouseleave", function(e) {
    var oe = e || event;
    var x = oe.offsetX;
    var y = oe.offsetY;
    var angle = Math.atan((x - xpos) / (y - ypos)) * 180 / Math.PI;
    if (angle > -45 && angle < 45 && y > ypos) {
    direct = "down";
    }
    if (angle > -45 && angle < 45 && y < ypos) {
    direct = "up";
    }
    if (((angle > -90 && angle < -45) || (angle > 45 && angle < 90)) && x > xpos) {
    direct = "right";
    }
    if (((angle > -90 && angle < -45) || (angle > 45 && angle < 90)) && x < xpos) {
    direct = "left";
    }
    move(e.type, direct)
    });

    function move(eventType, direct) {
    if (eventType == "mouseenter") {
    switch (direct) {
    case "down":
    div.css({
    "left": "0px",
    "top": h
    }).stop(true, true).animate({
    "top": "0px"
    }, "fast");
    break;
    case "up":
    div.css({
    "left": "0px",
    "top": -h
    }).stop(true, true).animate({
    "top": "0px"
    }, "fast");
    break;
    case "right":
    div.css({
    "left": w,
    "top": "0px"
    }).stop(true, true).animate({
    "left": "0px"
    }, "fast");
    break;
    case "left":
    div.css({
    "left": -w,
    "top": "0px"
    }).stop(true, true).animate({
    "left": "0px"
    }, "fast");
    break;
    }
    } else {
    switch (direct) {
    case "down":
    div.stop(true, true).animate({
    "top": h
    }, "fast");
    break;
    case "up":
    div.stop(true, true).animate({
    "top": -h
    }, "fast");
    break;
    case "right":
    div.stop(true, true).animate({
    "left": w
    }, "fast");
    break;
    case "left":
    div.stop(true, true).animate({
    "left": -w
    }, "fast");
    break;
    }
    }
    }
    }
    });
    })(jQuery)
    /*
    *使用说明:
    * $(".a").show($(".b"))
    * a是展示层,b是遮罩层
    * b在a的内部
    */


    $(".case li .list").each(function(i){
    $(this).show($(".case .list-wrap .wrap").eq(i));
    });
    全部教程http://each.sinaapp.com/angular/index.html
  • 相关阅读:
    将excel单元格中的内容,批量转化成批注
    装饰器的入门到精通
    自定义dict
    python2.7 + PyQt4安装
    一些好用的python模块
    人工智能-自然语言处理
    websocket-单群聊
    UA池和代理池
    scrapy框架持久化存储
    SQL Server 2012 酸爽的安装体验
  • 原文地址:https://www.cnblogs.com/xfdmb/p/6086214.html
Copyright © 2011-2022 走看看