鼠标划过显示鼠标移出隐藏效果

最新推荐文章于 2023-12-15 18:15:49 发布

changuncle

最新推荐文章于 2023-12-15 18:15:49 发布

阅读量3.9k

点赞数 2

分类专栏：前端内容文章标签：鼠标显示隐藏

本文链接：https://blog.csdn.net/xiaouncle/article/details/79419871

版权

前端内容专栏收录该内容

9 篇文章 0 订阅

订阅专栏

项目开发中有一个页面元素较多，为了使页面更简洁决定对其中一些元素进行隐藏，鼠标划过的时候才显示出来，于是就有了这篇文章。
实现这个效果的几个主要元素是：onmouseover、onmouseout、opacity，简言之就是捕捉鼠标的over事件和out事件，并设置目标元素的透明度opacity，示例代码如下：

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function mouseOver() {
            var overlay = document.getElementById('seldiv');
            startrun(overlay, "opacity", 100.0);
        }
        function mouseOut() {
            var overlay = document.getElementById('seldiv');
            startrun(overlay, "opacity", 0.0);

        }
        function startrun(obj, attr, target, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var cur = 0;
                if (attr == "opacity") {
                    cur = Math.round(parseFloat(getstyle(obj, attr)) * 100);
                } else {
                    cur = parseInt(getstyle(obj, attr));
                }
                var speed = (target - cur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if (cur == target) {
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                } else {
                    if (attr == "opacity") {
                        obj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
                        obj.style.opacity = (cur + speed) / 100;
                    } else {
                        obj.style[attr] = cur + speed + "px";
                    }
                }
            }, 30);
        }
        function getstyle(obj, name) {
            if (obj.currentStyle) {
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="seldiv" style="width: 700px; position: absolute; margin-left: 50px; opacity: 0;">
        <dl id="overlay" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" style="text-align:center">
        <ul class="inline">
            <li style="padding-left:3px;padding-right:2px;">variable</li>
            <li style="padding-left:3px;padding-right:2px;">patrol</li>
            <li style="padding-left:3px;padding-right:2px;">inventory</li>
            <li style="padding-left:3px;padding-right:2px;">compete</li>
            <li style="padding-left:3px;padding-right:2px;">vehicle</li>
        </ul>
        </dl>
    </div>
    </form>
</body>