---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

jQuery获取鼠标移动方向特效

前端开发 蚂蚁 1337℃ 0评论

http://www.grycheng.com/?p=2264

提示:你可以先修改部分代码再运行。

(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的内部
*/


        $(".outer").each(function(i){
            $(this).show($(".inner").eq(i));
        });

转载请注明:有爱前端 » jQuery获取鼠标移动方向特效

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情