学习 JavaScript 记录一下-优快云博客


<html>
<head>
    <title>
        ttt
    </title>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        div#con {
            border: 1px solid #54a70d;
            width: 400px;
            font-size: 16px;
            text-algin: left;
            height: 300px;
        }

        ul.hot li {
            list-style: none;
            border: 1px solid #da3a08;
            padding: 3px 5px;
            float: left;
            cursor: pointer;
        }

        li#hot_t {
            border-bottom-width: 0px;
        }

        div.hot {
            clear: both;
            display: none;
            padding-top: 20px;
        }

        div.topic {
            display: block;
        }

        div#top {
            position: relative;
            top: 50px;
            left: 200px;
            z-index: 10;
            width: 200px;
            height: 200px;
            background-color: red;
        }

        div#top button {
            margin-left: 50px;
        }
    </style>
</head>

<body>
<script type="text/javascript">
    var left = 200;
    var top = 40;
    var i = 0;
    function dong() {
        document.getElementById('top').style.left = (left + Math.sin(i) * 10) + 'px';

        i = i + 20;
        var set = setTimeout('dong();', 30);
        if (i % 180 == 0) {
            clearTimeout(set);
            i = 0;
        }
    }


    $(document).ready(function() {
        $("#hot_v").mouseover(
                function() {
                    $("div.video").show();
                    $("#hot_v").css("border-bottom-width", "0");
                    $("div.topic").hide();
                    $("#hot_t").css("border-bottom-width", "1px");
                    $("div.pra").hide();
                    $("#hot_p").css("border-bottom-width", "1px");
                }
                );
        $("#hot_t").mouseover(
                function() {
                    $("div.video").hide();
                    $("#hot_v").css("border-bottom-width", "1px");
                    $("div.topic").show();
                    $("#hot_t").css("border-bottom-width", "0px");
                    $("div.pra").hide();
                    $("#hot_p").css("border-bottom-width", "1px");
                }
                );
        $("#hot_p").mouseover(
                function() {
                    $("div.video").hide();
                    $("#hot_v").css("border-bottom-width", "1px");
                    $("div.topic").hide();
                    $("#hot_t").css("border-bottom-width", "1px");
                    $("div.pra").show();
                    $("#hot_p").css("border-bottom-width", "0");
                }
                );
    });

</script>
<div id="con">
    <ul class="hot">
        <li id="hot_t">hot topic</li>
        <li id="hot_v">hot video</li>
        <li id="hot_p">hot practice</li>
    </ul>
    <div class="topic hot">
        topictopictopi ctopictopictopic
        topictopictopicto pictopictopic
        topictopictopict opictopictopic
        topictopictopic topictopictopic
    </div>
    <div class="video hot">
        video videovideovid eovideovideovideo
    </div>
    <div class="pra hot">
        pra pra pra pra pra pra pra pra
    </div>
</div>
<div style="position:absolute;">
    <div id="top">
        <button type="button" onclick="dong();">点我一下</button>
    </div>
</div>

</body>
</html>