【JS】鼠标移动方向插件

最新推荐文章于 2023-01-01 10:57:27 发布

邹大叔

最新推荐文章于 2023-01-01 10:57:27 发布

阅读量964

点赞数

分类专栏： Javascript 文章标签： javascript

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

已经等不及了，咱们先来看下效果。。。

这里写图片描述

HTML代码如下：

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Demo</title>
  <style>
    *{margin:0;padding:0;}
    ul,li{list-style:none;}
    div{font-family:"Microsoft YaHei";}
    html,body{width:100%; height:100%; background:#f2f2f2;}
    ul{margin-left:50px;}
    ul li{float:left;}
    ul li .outer{width:300px; height:250px;}
    ul li .outer .inner{width:300px; height:250px; background:rgba(0, 0, 0, .3);}
  </style>
    <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
 </head>
 <body>
    <ul>
        <li>
            <div class="outer">
                <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/09.jpg" width="300px" height="250px" />
                <div class="inner">
                    我是图片1
                </div>
            </div>
        </li>
        <li>
            <div class="outer">
                <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/010.jpg" width="300px" height="250px" />
                <div class="inner">
                    我是图片2
                </div>
            </div>
        </li>
        <li>
            <div class="outer">
                <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/011.jpg" width="300px" height="250px" />
                <div class="inner">
                    我是图片3
                </div>
            </div>
        </li>
        <li>
            <div class="outer">
                <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/012.jpg" width="300px" height="250px" />
                <div class="inner">
                    我是图片4
                </div>
            </div>
        </li>
        <li>
            <div class="outer">
                <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/013.jpg" width="300px" height="250px" />
                <div class="inner">
                    我是图片5
                </div>
            </div>
        </li>
        <li>
            <div class="outer">
                <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/014.jpg" width="300px" height="250px" />
                <div class="inner">
                    我是图片6
                </div>
            </div>
        </li>
        <li>
            <div class="outer">
                <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/015.jpg" width="300px" height="250px" />
                <div class="inner">
                    我是图片7
                </div>
            </div>
        </li>
        <li>
            <div class="outer">
                <img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/016.jpg" width="300px" height="250px" />
                <div class="inner">
                    我是图片8
                </div>
            </div>
        </li>
    </ul>
    <script>
        (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)

    </script>
 </body>
</html>

余下JS代码如下：

/*
*使用说明：
*       $(".a").show($(".b"))
*       a是展示层，b是遮罩层
*       b在a的内部
*/


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