做一个跟随鼠标效果

范儿斯

已于 2022-12-23 11:22:59 修改

阅读量141

点赞数

文章标签： javascript 前端 css

于 2022-12-23 11:20:20 首次发布

本文链接：https://blog.csdn.net/Leader_yuxi/article/details/128417577

版权

项目场景：

提示：这里简述项目相关背景：

例如：做一个鼠标跟随效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

    <style>
        body{
            position: relative;
        }
        .articleUl {
            width: 200px;
            
            cursor: default;

        }

        .articleUl>li {
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            list-style: inside;
            list-style-type: decimal;
            padding: 15px 2px;


        }
        
        .articleUl>li:hover {
       background-color: #f5f5f5;

        }

        .bubbleAlert {
            width: 337px;
            height: auto;
            padding: 21px;
            background-color: #fff;
            position: fixed;/*强调一下这里用fixed定位,即使列表超出窗口也不会出问题 */
            border-radius: 4px;
            box-shadow: 0px 0px 6px 2px #d6d6d6;/*box-shadow参数(背影向左偏移量left,背影向上偏移量top,影子模糊程度,影子长度)*/
            left: 0px;
            top: 0px;
            display: none;

        }

        .bubbleAlert>li {
            width: 100%;
            text-align: left;
            list-style: inside !important;
            list-style-type: square !important;
        }
    </style>

</head>

<body>

    <ul class="articleUl">
        <li>Ahsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
        <li>Bhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
        <li>Chsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
        <li>Dhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
        <li>Ehsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
        <li>Fhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
        <li>Ghsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
        <li>Hhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
        <li>Ihsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>
        <li>Jhsbhui估计搜诶hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦hsbhui估计搜诶哦哦hshsbhui估计搜诶哦bhsbhui估计搜诶哦hui估计搜诶哦</li>

    </ul>

    <!-- 气泡窗 -->
    <ul class="bubbleAlert">

    </ul>



</body>
<script>

    	$(".articleUl li").hover(function (e) {
                e.stopPropagation;
                $(".bubbleAlert").html($(this).html());
                $(".bubbleAlert").show();
            }, function (e) {
                e.stopPropagation;
                $(".bubbleAlert").hide();
            }).stop();


            (function mouseFollowFloatTip() {
                // 鼠标跟随tip
                let floatTip = document.querySelector(".bubbleAlert");
                document.onmousemove = e => {
                    let x = e.clientX,
                        y = e.clientY;
                    let mouseOffsetX = 20,
                        mouseOffsetY = 20;
                    let left = x + mouseOffsetX;
                    let top = y + mouseOffsetY;
                    let floatTipRect = floatTip.getBoundingClientRect();
                    // console.log("alert:"+"x"+ left +"y"+ top)
                    //边界判断
                    left + floatTipRect.width > window.innerWidth &&
                        (left -= floatTipRect.width + mouseOffsetX + 10);
                    top + floatTipRect.height > window.innerHeight &&
                        (top -= floatTipRect.height + mouseOffsetY + 10);

                    var style = {
                        "left": left + "px",
                        "top": top + "px"
                    };

                    $(".bubbleAlert").css(style).stop();

                };
            })()



</script>


</html>