jQuery练习t80

最新推荐文章于 2024-10-18 17:51:23 发布

虾米大王

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量189

点赞数

分类专栏： jQuery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/modern358/article/details/112669693

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font-size: 13px;
        }
        ul,li {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .menu {
            width: 220px;
            border: 1px solid #e5d1a1;
            background-color: #fffdd2;
        }
        .content{
            padding-top: 10px;
            clear: left;
        }
        .optn {
            width: 100%;
            line-height: 28px;
            border: 1px dashed #CCCCCC;
        }
        a {
            text-decoration: none;
            color: #666666;
            padding: 10px;
        }

        .optnFocus{
            background-color: #ffffff;
            font-weight: bold;
        }

        div{
            padding: 10px;
        }
        div img {
            float: left;
            padding-right: 6px;
        }
        span {
            padding-top: 3px;
            font-size: 14px;
            font-weight: bold;
            float: left;
        }
        .tip{
            width: 200px;
            border: 2px solid #ffa200;
            position: absolute;
            padding: 10px;
            background-color: #ffffff;
            display: none;
        }
        .tip li{
            line-height: 25px;
        }

        .liFocus {
            background-color: #fffdd2;
            font-weight: bold;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {
            var curY; //获取所选项的top值
            var curH; //获取所选项的height值
            var curW; //获取所选项的width值
            var objL; //获取当前对象


            /**
             *
             *设置当前位置数值
             *参数obj为当前对象名称
             *
             * */
            function setInitValue(obj) {
                curY = obj.offset().top;
                curH = obj.height();
                curW = obj.width();
            }
            
            //设置当前所选项的鼠标滑过事件
            $(".optn").mouseover(function () {
                objL = $(this);
                setInitValue(objL);
                //var allY = (curY - curH) + "px";
                var allY = curY + "px";
                objL.addClass("optnFocus");
                objL.next("ul").show("normal")
                    .css({"top":allY,"left":curW});
            }).mouseout(function () {
               $(this).removeClass("optnFocus");
               $(this).next("ul").hide();
            });


            $(".tip").mousemove(function () {
                $(this).show();
                objL = $(this).prev("li");
                setInitValue(objL);
                objL.addClass("optnFocus");
            }).mouseout(function () {
                $(this).hide();
                $(this).prev("li").removeClass("optnFocus");
            });

            $(".tip li").hover(function () {
                $(this).addClass("liFocus");
            },function () {
                $(this).removeClass("liFocus");
            });

        });
    </script>
</head>
<body>
    <ul>
        <li class="menu">
            <div>
                <img alt="gif" src="images/icon.gif">
                <span>电脑数码类产品</span>
            </div>
            <ul class="content">
                <li class="optn"><a href="#">笔记本</a></li>
                <ul class="tip">
                    <li><a href="#">联想笔记本</a></li>
                    <li><a href="#">华硕笔记本</a></li>
                    <li><a href="#">三星笔记本</a></li>
                    <li><a href="#">惠普笔记本</a></li>
                    <li><a href="#">神舟笔记本</a></li>
                    <li><a href="#">东芝笔记本</a></li>
                </ul>
                <li class="optn"><a href="#">移动硬盘</a></li>
                <ul class="tip">
                    <li><a href="#">数码移动硬盘</a></li>
                    <li><a href="#">西部移动硬盘</a></li>
                    <li><a href="#">希捷移动硬盘</a></li>
                    <li><a href="#">三星移动硬盘</a></li>
                    <li><a href="#">华硕移动硬盘</a></li>
                    <li><a href="#">联想移动硬盘</a></li>
                </ul>
                <li class="optn"><a href="#">电脑软件</a></li>
                <ul class="tip">
                    <li><a href="#">安全卫士</a></li>
                    <li><a href="#">电脑管家</a></li>
                    <li><a href="#">文档处理</a></li>
                    <li><a href="#">表格处理</a></li>
                    <li><a href="#">浏览器</a></li>
                    <li><a href="#">数据库</a></li>
                </ul>
                <li class="optn"><a href="#">数码产品</a></li>
                <ul class="tip">
                    <li><a href="#">凯乐胶卷</a></li>
                    <li><a href="#">投影仪</a></li>
                    <li><a href="#">数码相机</a></li>
                    <li><a href="#">胶卷相机</a></li>
                    <li><a href="#">摄像机</a></li>
                    <li><a href="#">小霸王学习机</a></li>
                </ul>
            </ul>
        </li>
    </ul>
</body>
</html>