找回密码
当前位置：前端开发者 > jQuery > 正文

jQuery 鼠标移入显示悬浮框 制作

2018-07-15 分类：jQuery 阅读(1235) 评论(0)

jquery 游戏web前端开发工具|s前端开发工具|web前端的开发工具

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>前端图形化开发工具xt:JQ</title>
    <style type=”text/css”>
        body {
            background: rgba(13, 242, 218, 0.1);
            width: 100%;
        }
        .clearfix:after {
            display: block;
            height: 0px;
            content: ‘.’;
            visibility: hidden;
            clear: both;
        }
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        ul {
            width: 480px;
            height: 480px;
            margin: 100px auto;
            padding: 10px;
            background: #FFFFFF;
        }
        li {
            float: left;
            margin: 0 10px 10px 0;
            width: 150px;
            height: 150px;
            position: relative;
            border: 1px solid #CCCCCC;
            overflow: hidden;
            cursor: pointer;
        }
        li:nth-child(3n) {
            margin-right: 0;
        }
        li img {
            display: block;
            width: 100%;
            height: 100%;
            margin: auto;
        }
        li div {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 100%;
            top: 0;
            z-index: 1;
            background: rgba(13, 242, 218, 0.9);
            text-align: center;
            font: 20px/150px simhei;
            color: #333;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id=”div”></div>
    <ul class=”clearfix”>
        <li>
            <img src=”https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868601778.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121″
            />
            <div>以码看人</div>
        </li>
        <li>
            <img src=”https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121″
            />
            <div>码如其人</div>
        </li>
        <li>
            <img src=”https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868597017.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121″
            />
            <div>最怕认真</div>
        </li>
        <li>
            <img src=”https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121″
            />
            <div>最怕懒惰</div>
        </li>
        <li>
            <img src=”https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868593476.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121″
            />
            <div>强大自己</div>
        </li>
        <li>
            <img src=”https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121″
            />
            <div>日有所思</div>
        </li>
        <li>
            <img src=”https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868597017.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121″
            />
            <div>日有所得</div>
        </li>
        <li>
            <img src=”https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868629084.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121″
            />
            <div>我在装逼</div>
        </li>
        <li>
            <img src=”https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/upload_8130933_1481868601778.jpg?x=0&y=0&h=75&w=121&vh=93&vw=150&oh=75&ow=121″
            />
            <div>你还在看</div>
        </li>
    </ul>
    <script src=”https://code.jquery.com/jquery-3.2.1.min.js” integrity=”sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=”
     crossorigin=”anonymous”></script>
    <script type=”text/javascript”>
        $(‘ul li’).hover(function () {// 移入效果
            var x = event.pageX – $(this).offset().left,//得到鼠标在块中的坐标
                y = event.pageY – $(this).offset().top,//得到鼠标在块中的坐标
                h = $(this).outerHeight(), //用于获得包括内边界(padding)和边框(border)的元素高度
                w = $(this).outerWidth(), ///用于获得包括内边界(padding)和边框(border)的元素宽度
                k = Math.floor(h / w);//为了防止不能整除
            // 为判断鼠标从那个方向移到，移出计算临界值； 将元素块，由对角线划分为，4块区域，上右下左；
            // 左下到右上的临界值 Y1=高度/宽度*当前鼠标值 高度/宽度（计算 tan左下角度） 再通过乘鼠标X 得到与之对应的临界值Y1；
            // 左上到右上的临界值 Y2=高度-（高度/宽度*当前鼠标值 ） 对角线将元素划分为4块，所以左下角和左上角 角度相等，通过左下角，得到Y2比高度少的那一块，再通过高度减去那一块得到第二个临界值；
            if ((k * x) >= y && (h – k * x) >= y) {//上方进入
                //初始悬浮块位置，下同
                $(this).children(“div”).css({
                    “top”: “-200px”,
                    “left”: 0
                })
                //设置出现动画，下同
                $(this).children(“div”).stop(true, true).animate({
                    “top”: “0”
                });
            }
            if ((k * x) < y && (h – k * x) < y) {// 从下方进入
                $(this).children(“div”).css({
                    “top”: “200px”,
                    “left”: “0”
                })
                $(this).children(“div”).stop(true, true).animate({
                    “top”: “0”
                });
            }
            if ((k * x) < y && (h – k * x) > y) {
                $(this).children(“div”).css({// 从左边进入
                    “top”: “0”,
                    “left”: “-200px”
                })
                $(this).children(“div”).stop(true, true).animate({
                    “left”: “0”
                });
            }
            if ((k * x) > y && (h – k * x) < y) {// 从右边进入
                $(this).children(“div”).css({
                    “top”: “0”,
                    “left”: “200px”
                })
                $(this).children(“div”).stop(true, true).animate({
                    “left”: “0”
                });
            }
        }, function () { // 移出效果
            var x = event.pageX – $(this).offset().left,//得到鼠标在块中的坐标
                y = event.pageY – $(this).offset().top,//得到鼠标在块中的坐标
                h = $(this).outerHeight(),
                w = $(this).outerWidth(),
                k = Math.floor(h / w);//为了防止不能整除
            if ((k * x) >= y && (h – k * x) >= y) { //从上方移出
                //移出动画，下同
                $(this).children(“div”).stop(true, true).animate({
                    “top”: “-200px”
                });
            }
            if ((k * x) < y && (h – k * x) < y) { //从下方移出
                $(this).children(“div”).stop(true, true).animate({
                    “top”: “200px”
                });
            }
            if ((k * x) < y && (h – k * x) > y) { //从左边移出
                $(this).children(“div”).stop(true, true).animate({
                    “left”: “-200px”
                });
            }
            if ((k * x) > y && (h – k * x) < y) { //下右边移出
                $(this).children(“div”).stop(true, true).animate({
                    “left”: “200px”
                });
            }
        })
    </script>
</body>
</html>

上面的是学习使用，下边可直接拿来用
html 代码

<!doctype 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>web前端开发工具 2018:jq</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>
</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”>
                    这是描述。。。
                </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”>
                    这是描述。。。
                </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”>
                    这是描述。。。
                </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”>
                    这是描述。。。
                </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”>
                    这是描述。。。
                </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”>
                    这是描述。。。
                </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”>
                    这是描述。。。
                </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”>
                    这是描述。。。
                </div>
            </div>
        </li>
    </ul>
    <script src=”https://code.jquery.com/jquery-3.2.1.min.js” integrity=”sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=”
     crossorigin=”anonymous”></script>
    <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)
        /*
        *使用说明：
        * $(“.a”).show($(“.b”))
        * a是展示层，b是遮罩层
        * b在a的内部
        */
        $(“.outer”).each(function (i) {
            $(this).show($(“.inner”).eq(i));
        });
    </script>
</body>
</html>

Linux下的前端开发工具|哪个专业有web前端开发工具|小的_前端开发工具

赞(0)
前端开发者 » jQuery 鼠标移入显示悬浮框 制作
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论