html中setAttribute属性给控件赋予新属性

最新推荐文章于 2022-06-09 18:30:42 发布

user_app

最新推荐文章于 2022-06-09 18:30:42 发布

阅读量2k

点赞数

分类专栏： Android 文章标签： html

本文链接：https://blog.csdn.net/user_app/article/details/78948578

版权

Android 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>



    </head>
    <style>
        body{
            background: url(img/abc.jpg) no-repeat ;
            background-size: cover;
            }

            #no1{
                width: 100%; height: 100px; 
                margin: 0 auto;
            }



            #text{
                width: 400px; height: 40px; background: url(img/small.png) no-repeat right; margin-right: 5px;
                background-color: white;
            }
            #text:hover{
                transform: scale(1.5, 1.5);

            }

            #btn{
                background:#3366FF ;width: 100px; height: 40px; margin-top: 5px;
                font-size: 20px; color: white;
                border: none;
                border-radius: 2px 2px 2px 2px;
            }
            #btn:hover{
                transform: scale(2, 2);
                color: black;
            }

            #imgs1{width: 100px; height: 100px;}#imgs6{width: 100px; height: 100px;}#imgs7{width: 100px; height: 100px;}
            #imgs3{width: 100px; height: 100px;}#imgs4{width: 100px; height: 100px;}#imgs5{width: 100px; height: 100px;}
            #imgs8{width: 100px; height: 100px;}#imgs9{width: 100px; height: 100px;}#imgs0{width: 100px; height: 100px;}
            #imgs2{width: 100px; height: 100px;}

            .no1{

            animation: 1s name;
        }



        #imgs3:hover{
            transform: scale(2.5);
        }

        #imgs8:hover{
            transform: scale(0.5);
        }

        #imgs5:hover{

            transform: skew(50deg);
        }

        #imgs0:hover{

            transform: skew(-50deg);
        }

        #small{
            position: relative;
            top: 13px;
            right: 159px;
        }

        #small:hover {
            transform: scale(1.5, 1.5);
        }

        /*rotate()旋转
         skew()倾斜
         scale()比例放大缩小
         translate()位移
         * */

            @-webkit-keyframes name {
            from {
                transform: rotate(0deg);
            }
            10% {
                transform: rotate(36deg);
            }
            20% {
                transform: rotate(72deg);
            }
            30% {
                transform: rotate(108deg);
            }
            40% {
                transform: rotate(144deg);
            }
            50% {
                transform: rotate(180deg);
            }
            60% {
                transform: rotate(216deg);
            }
            70% {
                transform: rotate(252deg);
            }
            80% {
                transform: rotate(288deg);
            }
            90% {
                transform: rotate(324deg);
            }
            to {
                transform: rotate(360deg);
            }
        }




.no2{

            animation: 1s nn;
        }

        @-webkit-keyframes nn{
            from {
                transform: rotate(360deg);
            }
            10% {
                transform: rotate(324deg);
            }
            20% {
                transform: rotate(288deg);
            }
            30% {
                transform: rotate(252deg);
            }
            40% {
                transform: rotate(216deg);
            }
            50% {
                transform: rotate(180deg);
            }
            60% {
                transform: rotate(144deg);
            }
            70% {
                transform: rotate(108deg);
            }
            80% {
                transform: rotate(72deg);
            }
            90% {
                transform: rotate(36deg);
            }
            to {
                transform: rotate(0deg);
            }
        }

    </style>
    <body>
        <center>

                <img src="img/baidu.jpg" style="margin-top: 150px;"  />

                <div id="no1">

                        <input type="search" id="text" />

                        <input type="button" id="btn"  value="百度一下" />


                </div>

                <table>
                <tr id="tr1">
                    <td><img id="imgs1" src="img/b.jpg" onmouseover="clic()" onmouseout="stop()" ></td>
                    <td><img id="imgs2" src="img/b1.jpg"></td>
                    <td><img id="imgs3" src="img/b2.jpg"></td>
                    <td><img id="imgs4" src="img/b3.jpg"></td>
                    <td><img id="imgs5" src="img/b4.jpg"></td>
                </tr>
                <tr id="tr2">
                    <td><img id="imgs6" src="img/b5.jpg" onmousemove="clic2()" onmouseout="stop()"></td>
                    <td><img id="imgs7" src="img/b6.jpg"></td>
                    <td><img id="imgs8" src="img/b7.jpg"></td>
                    <td><img id="imgs9" src="img/b8.jpg"></td>
                    <td><img id="imgs0" src="img/b9.jpg"></td>
                </tr>
                </table>


        </center>


        <script>

                function clic(){
                    var img1 = document.getElementById("imgs1");
                    var img2 = document.getElementById("imgs2");
                    var img3 = document.getElementById("imgs3");
                    var img4 = document.getElementById("imgs4");
                    var img5 = document.getElementById("imgs5");


                    img1.setAttribute("class","no1");
                    img2.setAttribute("class","no1");
                    img3.setAttribute("class","no1");
                    img4.setAttribute("class","no1");
                    img5.setAttribute("class","no1");

                }

                function clic2(){
                    var img6 = document.getElementById("imgs6");
                    var img7 = document.getElementById("imgs7");
                    var img8 = document.getElementById("imgs8");
                    var img9 = document.getElementById("imgs9");
                    var img0 = document.getElementById("imgs0");


                    img6.setAttribute("class","no2");
                    img7.setAttribute("class","no2");
                    img8.setAttribute("class","no2");
                    img9.setAttribute("class","no2");
                    img0.setAttribute("class","no2");

                }

                function stop(){
                    history.go(0);
                }

        </script>

    </body>
</html>