JavaScript--变量与常用属性

最新推荐文章于 2025-01-02 17:31:59 发布

海向

最新推荐文章于 2025-01-02 17:31:59 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaEE是怎样炼成的

本文链接：https://blog.youkuaiyun.com/baidu_37181928/article/details/78698568

JavaEE是怎样炼成的专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现一个简单的下拉菜单效果，包括去除默认样式、设置过渡效果、响应鼠标悬停事件等步骤。

1.为了简化编程

   var oDiv = document.getElementById("box");
   var oUl = document.getElementById("ul1");

定义变量来简化操作

2.可以使用以下语句来去除ul的本来的padding-left属性,因为我们把她本来的小圆点去掉了，保留了空白。

ul{
    margin: 0;
    padding: 0;
  }

3.去除li小圆点

li{
    list-style: none;
  }

4.设置border的阴影

box-shadow: 2px 2px #ccc,-2px -2px 1px #ccc;

5.设置字体
第一个参数是字体的大小第二个是行间距第三个是字体类型

font: 20px/60px "simhei";

6.span必须先得转化为block才能进行行高等块状设置

7.hover可以设置鼠标经过时背景的改变

#box li:hover{
            background: #4136E2;
        }

8.设置过渡时间
例如鼠标移到菜单时，过n秒菜单显示

transition: 0.8s;

9.设置不透明度

opacity: 0.8;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #box{
            width: 200px;
            margin: 0 auto;
            font: 20px/60px "simhei";
            text-align: center;
        }
        #box span{
            display: block;<!--不支持宽高先变成块-->
            height: 40px;
            border:1px solid #181509;
        }
        #box ul{
            border-radius: 50px;
            border:1px solid #181509;
            margin-top: 40px;
            box-shadow: 10px 10px #ccc,-10px -10px  #ccc;
            height: 0;
            overflow: hidden;
            /*display: none;*/
            transition: 0.8s;
            opacity: 0.8;
        }
        #box li{
            height:60px;
        }
        #box li:hover{
            background: #4136E2;
            border-radius: 50px;
        }


    </style>
</head>
<body>
    <div id="box">
        <span id="span1">设置</span>
        <ul id="ul1">
            <li>搜索设置</li>
            <li>高级设置</li>
            <li>关闭预测</li>
            <li>搜索历史</li>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
/*
当鼠标移入span的时候，让ul显示出来
html的属性操作
    display
    height
    width
    visibility
    opacity
*/

    //alert("百度一下你就知道");
    /*
    当鼠标移入span的时候，让ul显示出来
    1.当鼠标移入span的时候，让ul样式的display变成block
    2.当鼠标移出span的时候，让ul样式的display变为none
    在css里面找标签通过选择器 document.getElementById
    在js里，找标签叫获取元素，比如：id的方法 getNameById("id名")

        鼠标事件
            onmouseover
            onmouseout
            onclick
            ....
        函数
        function(){}

        alert()
        就是一个打印的命令

        变量声明
        var 变量名;

    */

    var oDiv = document.getElementById("box");
    var oUl = document.getElementById("ul1");
    //alert(document.getElementById("span1"));
    oDiv.onmouseover = function(){
    //当鼠标移入span的时候，让ul样式的display变成block
        //oUl.style.display = "block";
        //oUl.style.opacity = 1;
        oUl.style.height = "250px";
    };

    oDiv.onmouseout = function(){
        //当鼠标移入span的时候，让ul样式的display变成none
        //oUl.style.display = "none";
        //oUl.style.opacity = 0;
        oUl.style.height = "0px";
    };

</script>