jS事件之网站常用效果汇总

Posted 2020-08-19 最骚的就是你

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jS事件之网站常用效果汇总相关的知识，希望对你有一定的参考价值。

　下拉菜单

这里写图片描述

<!--简单的设置了样式，方便起见，将style和script写到同一个文档，着重练习事件基础-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
            margin:0;
            padding:0;
        }
            ul {
                list-style: none;
            }
            body{
                margin:20px auto;
            }
            .ul>li {
                float: left;
                width:150px;
                height:35px;
                line-height:35px;
                background:mediumaquamarine;
                position:relative;
            }
            #nav div{
                background:bisque;
                position:absolute;
                left:0px;
                top:35px;
                width:150px;
                display:none;

            }
        </style>
    </head>

    <body>
        <div id="nav">
            <ul class="ul">

                <li onmouseover="show(\'div1\')" onmouseout="hide(\'div1\')">下拉菜单
                    <div id="div1">
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                    </div>
                </li>

                <li onmouseover="show(\'div2\')" onmouseout="hide(\'div2\')">下拉菜单
                    <div id="div2">
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                    </div>
                </li>
                <li onmouseover="show(\'div3\')" onmouseout="hide(\'div3\')">下拉菜单
                    <div id="div3">
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                    </div>
                </li>
                <li onmouseover="show(\'div4\')"  onmouseout="hide(\'div4\')">下拉菜单
                    <div id="div4">
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                        <p>下拉菜单</p>
                    </div>
                </li>

            </ul>
        </div>
        <script>
            function show(id){
                document.getElementById(id).style.display="block";
            }
            function hide(id){
                document.getElementById(id).style.display="none";
            }
        </script>
    </body>

</html>

表格随机转换

这里写图片描述

<!--style样式可随己自行设置-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格随机转换</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }

            td {
                width: 100px;
                height: 30px;
                border: 1px solid darkblue;
            }
        </style>
    </head>

    <body>

        <table>
            <tr style="background:pink">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <script>
            var str = ["coral", "chartreuse", "cornflowerblue", "aqua", "antiquewhite", "purple", "white", "black"];
            window.onload = function() {
                var tr = document.getElementsByTagName("td");
                var colo = parseInt(Math.random() * str.length);
                for(var i = 1; i < tr.length; i++) {
                    if(i % 2 != 0) {
                        tr[i].style.background = str[colo];
                    } else {
                        var colo = parseInt(Math.random() * str.length);
                        tr[i].style.background = str[colo];
                    }
                }
                for(var i = 0; i < tr.length; i++) {
                    tr[i].onmouseover = function() {
                        bgc = this.style.background;
                        this.style.background ="green";
                    }
                }
                for(var i = 0; i < tr.length; i++) {
                    tr[i].onmouseout = function() {
                        this.style.background = bgc;
                    }
                }
            }
        </script>
    </body>

</html>

咨询缓慢弹框

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>     
            * {
                padding: 0;
                margin: 0;
            }

            #box {
                width: 500px;
                height: 300px;
                position: fixed;
                right: 0;
                background: pink;
            }

            #box h2 {
                height: 50px;
                line-height: 50px;
                position: relative;
                background: darkturquoise;
            }

            #box h2 p {
                width:50px;
                height:50px;
                position: absolute;
                right: 0;
                top: 0;
            }
            textarea{
                margin:2px 40px 0;
            }
            input{
                width:100px;
                height:50px;
                color:#000;
                font-weight:bold;
                margin:0 0 0 250px;
                background:yellow;
            }
        </style>
    </head>

    <body>
        <div id="box" style="bottom:-300px">
            <h2>请咨询<p onclick="mp()">×</p></h2>
            <textarea cols="30px" rows="7px">
            </textarea>
            <input type="button" value="提交">

        </div>
        <script>
            var v;
            var t;
            var add = -300;
            window.onload = function() {
                v = document.getElementById("box");
                t = setInterval("ups()", 10);
            }
            function ups() {
                add += 3;
                v.style.bottom = add + "px";
                if(parseInt(v.style.bottom) >= 0) {
                    clearInterval(t);
                }
            }
            function mp(){
                v.style.display="none";
            }
        </script>
    </body>

</html>

鼠标经过改变图片路径

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>car鼠标经过改变图片路径</title>
        <style>
            #box img {
                width: 300px;
                height: 300px;
            }

            img {
                width: 50px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <img id="imgb" src="img/1.png">
        </div>

        <img src="img/1.png" onmouseover="f(1)"/>
        <img src="img/2.png" onmouseover="f(2)" />
        <img src="img/3.png" onmouseover="f(3)" />

        <script>
            function f(n) {
                var mg = document.getElementById("imgb");
                mg.src = "img/" + n + ".png";
            }
        </script>
    </body>

</html>

树形菜单

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>树形菜单</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }
            body {
                width: 450px;
                margin: 0 auto;
            }
            .mybox {
                padding: 0 0 0 25px;
                border: 2px solid yellow;
            }
            h2 {
                width: 400px;
                height: 50px;
                line-height: 50px;
                background: pink;
            }
            span {
                float: left;
                margin: 0 10px 0;
            }
            .box {
                width: 400px;
                height: 300px;
                background: greenyellow;
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="mybox">
            <h2 onclick="fun(0)"><span class="mspan">+</span>我是主体栏目</h2>
            <div class="box">
            </div>
            <h2 onclick="fun(1)"><span class="mspan">+</span>我是主体栏目</h2>
            <div class="box">
            </div>
            <h2 onclick="fun(2)"><span class="mspan">+</span>我是主体栏目</h2>
            <div class="box">
            </div>
        </div>

        <script>
            function fun(n) {
                var box = document.getElementsByClassName("box");
                var mspan = document.getElementsByClassName("mspan");
                if(box[n].style.display == "none") {
                    box[n].style.display = "block";
                    mspan[n].innerHTML="-"
                } else {
                    box[n].style.display = "none";
                    mspan[n].innerHTML="+"
                }
            }
        </script>

    </body>
</html>

隔5秒跳转页面

这里写图片描述

<!--秒数可更改-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>隔五秒跳转页面</title>
    </head>

    <body>
        <p id="mp">5秒后跳转新页面
        </p>
        <script>
            var i = 5;
            var t;
            window.onload = function() {
             t = setInterval("fun()", 1000);
            }

            function fun() {
                document.getElementById("mp").innerHTML = (i--) + "秒后跳转新页面";
                if(i == 0) {
                    clearInterval(t);
                    location.href="hello.html";
                }
            }
        </script>
    </body>

</html>

文字域输入字数控制

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文字域输入字数控制</title>
    </head>

    <body>
        <textarea name="" id="conte" cols="30" rows="10" onkeyup="fun()"></textarea>
        <span id="count">还能输入10个字</span>
        <script>
            function fun(){
                var t = document.getElementById("conte").value.length;
                document.getElementById("count").innerHTML="还能输入"+(11-t)+"个字";
                document.getElementById("conte").value=document.getElementById("conte").value.substr(0,10);
            }
        </script>

    </body>

</html>

文字无缝滚动，鼠标放上去停止

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            #box {
                height: 50px;
                overflow-y: hidden;
            }
        </style>
        <!--跑马灯-->
        <!--<marquee direction="up">
            adfasdfasdf
            adfasdfasdf
            </marquee>-->
        <div id="box" onmouseover="stp()" onmouseout="beg()">
            <ol id="ol1">
                <li>1文字无缝滚动</li>
                <li>2文字无缝滚动</li>
                <li>3文字无缝滚动</li>
                <li>4文字无缝滚动</li>
                <li>5文字无缝滚动</li>
                <li>6文字无缝滚动</li>
                <li>7文字无缝滚动</li>
            </ol>
            <ol id="ol2"></ol>

        </div>

        <script>
            t = setInterval("myScroll()", 100);
            var box = document.getElementById("box");
            var ol1 = document.getElementById("ol1");
            var ol2 = document.getElementById("ol2");
            ol2.innerHTML = ol1.innerHTML;

            function myScroll() {
                if(box.scrollTop <= ol1.offsetHeight) {
                    box.scrollTop++;
                } else {
                    box.scrollTop = 0;
                }
            }
            function stp() {
                clearInterval(t);
            }

            function beg() {
                t = setInterval("myScroll()", 100);
            }
        </script>
    </body>

</html>

<!--颜色内容自行更改-->
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }

            li {
                list-style: none;
                float: left;
                height: 35px;
                width: 100px;
                text-align:center;
                line-height: 35px;
                background: mediumaquamarine;
            }
            li:hover{
                background:bisque;
            }
            #box div {
                clear: both;
                height: 200px;
                width: 400px;
                background: bisque;
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="tab">
            <ul>
                <li onmouseover="showDiv(0)">nav_1</li>
                <li onmouseover="showDiv(1)">nav_2</li>
                <li onmouseover="showDiv(2)">nav_3</li>
                <li onmouseover="showDiv(3)">nav_3</li>
            </ul>
        </div>

        <div id="box">
            <div style="display:block">box_1</div>
            <div>box_2</div>
            <div>box_3</div>
            <div>box_4</div>
        </div>

        <script>

            function showDiv(n) {
                var dv = document.getElementById("box").getElementsByTagName("div");
                for(var j = 0; j < dv.length; j++) {
                    dv[j].style.display = "none";
                }
                dv[n].style.display = "block";

                if(n % 2 == 0) {
                    dv[n].style.background = "##FFE4C4";
                }
            }

        </script>
    </body>

</html>

对联广告
可回顶部，点×进行关闭

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                height: 2000px
            }

            #box {
                width: 200px;
                height: 250px;
                background: pink;
                /*  position:fixed;
                top:10px;
                left:20px;
                */
                position: absolute;
                top: 30px;
                left: 20px;
            }

            span {
                position: absolute;
                right: 0px;
                bottom: 以上是关于jS事件之网站常用效果汇总的主要内容，如果未能解决你的问题，请参考以下文章 
 NodeJS入门：常用模块汇总之事件模块
 NodeJS入门：常用模块汇总之事件模块
 外贸建站之自适应网站电脑手机网站不同JS效果区分写法代码分享
 前端之JQuery
 js事件汇总
 汇总js事件相关及事件处理模型