search

BestACE / fed

旨为锤炼前端开发工程师的前端开发基础课程，重点学习利用html和css实现页面布局，利用JS实现交互开发。:thumbsup:
207 stars 137 forks source link

【签到帖】移应161 复习课签到帖 #386

Open zptcsoft opened 6 years ago

zptcsoft commented 6 years ago

请大家在本贴签到。 格式如下： 00 王海庆 今天实现如下代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复习</title>
        <!--
            开发的时候，建议大家用本地文件，最好用没有压缩过的文件
            上线的时候，建议使用压缩过的文件，或使用cdn的方式
        -->
        <!--<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .container .closeBtn{
                position: absolute;
                right: 5px;
                top: 5px;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
        </style>
    </head>
    <body>
        <!--
            交互开发，做交互，事件
        -->
        <div class="container">
            <div class="content">示例内容</div>
            <a class="closeBtn" href="javascript:">
                <i class="fa fa-close"></i>
            </a>
        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-list"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接2</a>
        <script>
            var oModal=document.querySelectorAll(".modal");
            var oContainer=document.querySelector(".container");
            var oClose=document.querySelector(".container .closeBtn");
            for (var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click",function(event){
                    //console.log(event.target.innerHTML,event.target.dataset.title,event.target.getAttribute("data-title"));
                    oContainer.classList.add('animated');
                    oContainer.classList.add('bounceIn');
                    oContainer.style.display="block";
                })
            }
            oClose.addEventListener("click",function(){
                oContainer.classList.remove('bounceIn');
                oContainer.classList.add('fadeOut');

                setTimeout(function(){
                    if(oContainer.style.opacity==0){
                        oContainer.style.display="none";
                    }
                },1000);
            })
        </script>
    </body>
</html>
FullOfVigour commented 6 years ago

10 徐晗 今天代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .container{
                transform: translate(50px);
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
            .close{
                position: absolute;
                right: 5px;
                top: 0;
            }
            .close i:hover{
                color: red;
            }
        </style>
    </head>
    <body>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接2</a>
        <script type="text/javascript">
            var oModal=document.querySelectorAll(".modal");
            var oDiv=document.createElement("div");
            oDiv.setAttribute("class","container");
            document.body.appendChild(oDiv);
            var oDiv2=document.createElement("div");
            oDiv2.setAttribute("class","content");
            oDiv.appendChild(oDiv2);
            var oClose=document.createElement("div");
            oClose.setAttribute("class","close");
            oI=document.createElement("i");
            oI.setAttribute("class","fa fa-close");
            oClose.appendChild(oI);
            oDiv.appendChild(oClose);                   
            var newContent = document.createTextNode('示例内容');
            oDiv2.appendChild(newContent);
            for(var i=0;i<oModal.length;i++){
                oModal[i].addEventListener("click",function(event){
                    oDiv.style.display="block";
                    oDiv.setAttribute("class","container animated bounceInDown");
                });
            }
            oI.addEventListener("click",function(event){
                oDiv.setAttribute("class","container animated bounceOut");
//              oDiv.style.display="none";
            });
        </script>
    </body>

</html>
2016wk commented 6 years ago

32王锟 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                    position: relative;
            }
            .newTip{
                width: 200px;
                height: 30px;
                margin-top:50px ;
                /*border: 1px solid #000;*/
                /*position: absolute;
                top: 700px;
                bottom: 0;
                left: 0;
                right: 30px;
                margin: auto;*/
                color: #000;
            }
            #spanTip{
                border-radius:10px ;
                display: inline-block;
                position: relative;
                top: -55px;
                left: 0;
                right: 0;
                margin: auto;
                /*width: 100px;*/
                text-align: center;
                background-color: #000;
                color: #fff;
            }
            #delta{
                width: 0;
                height: 0;
                border: 10px solid;
                border-color: #000 transparent transparent transparent; 
                position: relative;
                top: -55px;
                left: 55px;
            }
        </style>
    </head>
    <body>
        <div class="newTip" data-content="">
            这里显示提示内容
        </div>
        <div class="newTip" data-content="">
            这里显示提示内容1
        </div>
        <div class="newTip" data-content="">
            这里显示提示内容2
        </div>
        <div class="newTip" data-content="">
            这里显示提示内容3
        </div>
        <script type="text/javascript">
        (function(){
            var spanObj,deltaObj;
            var Tip=document.querySelectorAll(".newTip");
            var spanObj;
//          console.log(Tip[0].innerHTML);
            for(var i = 0; i < Tip.length; i++) {
                Tip[i].addEventListener('mouseenter', (function(n) {
                    return function() {
                        for (var j=0;j<Tip.length;j++) {
                            if(j==n){
                            spanObj=document.createElement("span");
                            spanObj.innerHTML=Tip[j].innerHTML;
                            spanObj.id="spanTip";
                            Tip[j].appendChild(spanObj);

                            deltaObj=document.createElement("div");
                            deltaObj.id="delta";
                            Tip[j].appendChild(deltaObj);
                        }
                        }

                    };
                })(i));
            }
            for(var i = 0; i < Tip.length; i++) {
                Tip[i].addEventListener('mouseleave', (function(n) {
                    return function() {
                        for (var j=0;j<Tip.length;j++) {
                            if(j==n){
                            spanObj.remove();
                            deltaObj.remove();
                        }
                        }

                    };
                })(i));
            }
//          Tip.addEventListener("mouseenter",enter);
//          Tip.addEventListener("mouseleave",leave);
//          function enter(){
//              
//          }

        })();

        </script>
    </body>
</html>
ghost commented 6 years ago

02 张振栋 今天实现如下代码


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复习</title>
        <!--
            开发的时候，建议大家用本地文件，最好用没有压缩过的文件
            上线的时候，建议使用压缩过的文件，或使用cdn的方式
        -->
        <!--<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;

            }

            .modal i{
                font-size: 24px;
                color: green;
            }

            .container .close{
                cursor: pointer;
                position: absolute;
                top: 5px;
                right: 5px;
                z-index: 1000;
            }
        </style>
    </head>
    <body>
        <!--
            交互开发，做交互，事件
        -->
        <div class="container animated bounceIn">
            <div class="content">示例内容</div>
            <!--<a href="javascript:" class="clossebtn"></a>-->
            <a href="javascript:" class="close" ><i class="fa fa-close"></i></a>

        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接2</a>
        <script>
            var oModal=document.querySelectorAll(".modal");
            var oContainer=document.querySelector(".container");
//          var oClose=document.querySelector(".animated .clossebtn");
            var oClose=document.querySelector(".close");
            for (var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click",function(event){
                    //console.log(event.target.innerHTML,event.target.dataset.title,event.target.getAttribute("data-title"));
                    oContainer.style.display="block";
                    console.log(oClose);
                })
            }
            oClose.addEventListener("click",function(event){
                event.preventDefault();

//              oClose.className="clossebtn";
                oContainer.classList.remove("bounceIn");
                oContainer.classList.add("fadeOut");

                setTimeout(function(){

                    oContainer.classList.remove("fadeOut");
                    oContainer.classList.add("bounceIn");
                    oContainer.style.display="none";

                },1000);
            })

//console.log(oClose)

        </script>
    </body>
</html>

···
zh1741287533 commented 6 years ago

39 张桦 


<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
            button{

            }
            </style>
    </head>
    <body>
            <div class="container animated bounceIn">
            <div class="content"><img src="img/h1_small.jpg"/></div>
            <input type="button" name="" id="anniu" value="关闭" class="anniu"/>
        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接2</a>
        <script>
            var oModal=document.querySelectorAll(".modal");
            var oContainer=document.querySelector(".container");
            var oanniu = document.querySelector(".anniu")
            for (var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click",function(event){
                oContainer.style.display="block";
                oContainer.classList.add("animated");
                oContainer.classList.add("bounceIn");
                oContainer.style.display="block";
//              oContainer.style.display=""
//oContainer.classList.add("animate.css");

                })
            }

                oanniu.addEventListener("click",function(event){
                    oContainer.style.display="none";
                })

//          oModal.addEventListener("click"function(event){
//              oContainer.classList.add("animate");
//              oContainer.classList.add("fadeOut");
//              
//              
//          })

        </script>
    </body>
</html>
```html
Extkai commented 6 years ago

08 韩浩浩 今天代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <style type="text/css">
            .container{
                margin-top: -250px;
                margin-left: 520px;
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="container ">
            <div class="content">2018年1月9日10:08:24</div>
            <i class="fa fa-close" style="position: absolute; right: 10px; top: 10px;"></i>

        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a> 

        <script>
            var oModal=document.querySelectorAll(".modal");
            var oContainer=document.querySelector(".container");
            var oClose=document.querySelector('.fa-close');
            for (var i = 0; i < oModal.length; i++) {               
                oModal[i].addEventListener("click",function(event){
                    oContainer.style.display="block";
                    oContainer.classList.add("animated");
                    oContainer.classList.add("bounceIn");
                })
                oClose.addEventListener('click',function(event){
                    oContainer.style.display="none";
                })

            }
        </script>
    </body>
</html>
EthanChen95 commented 6 years ago

34 陈耀泽 <!DOCTYPE html>

示例内容
link link2
Kylin6 commented 6 years ago

42 鄢滟麟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .conter{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 200px;
                height: 200px;
                border: 1px solid #000;
            }
            .remove{
                position: absolute;
                right: 20px;
                top: 10px;
            }
            img{
                width: 400px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <a href="javascript:" class="mo" data-title="123">连接</a>
        <a href="javascript:" class="mo" data-title="123"><i class="fa fa-user"></i></a>
        <!--<div class="conter">
            <div class="content animated flash" >内容 </div>
        </div>-->
        <img src="img/u=1244693497,3491935706&fm=27&gp=0.jpg"/>
        <script type="text/javascript">
            var oMo= document.querySelectorAll(".mo");
            if(oMo.length<1){
                console.log("没有元素");
            }else{
                var oConter =document.createElement("div");
                oConter.setAttribute("class","conter animated");
                document.body.appendChild(oConter);

                var oContent = document.createElement("div");
                oContent.setAttribute("class","content");
                oConter.appendChild(oContent);

                oContent.innerHTML="内容";

                var oi = document.createElement("i");
                oi.setAttribute("class","remove fa fa-remove");
                oContent.appendChild(oi);
            }
            for (var i = 0; i < oMo.length; i++) {
                oMo[i].addEventListener("click",function(event){
                    oConter.style.display="block";
                    oConter.classList.add("flip");
                });
            }
            oi.addEventListener("click",function(){

                oConter.classList.remove("flip");
                oConter.classList.add("bounceOut");
                setTimeout(function(){
                    oConter.classList.remove("bounceOut");
                    oConter.style.display="none";
                },1000)
            })

        </script>
    </body>
</html>
chenbo666 commented 6 years ago

19 陈波 今天做的如下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>...</title>
        <style type="text/css">
            .test{
            margin: auto;

            }

            .container{
                position: fixed;
                top: 400px;
                bottom: 0;
                right: 0;
                left: 700px;
                width: 200px;
                height: 100px;
                display: none;

            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    </head>
    <body>
        <div class="test">
             <div class="container">
                实例显示
             </div>
        </div>
        <a href="javascript:"><i class="fa fa-address-card"></i>打開</a>
    </body>
    <script type="text/javascript">var oBtn=document.querySelector("a");
var otxt=document.querySelector('.container');
var i=1;
oBtn.addEventListener("click", function() {
    otxt.style.display="block";
    otxt.style.border="1px dashed #000";
    otxt.classList.add("animated");
    otxt.classList.add("bounceInUp");
    if(i==1) {
        closelogo=document.createElement("i");
        closelogo.classList.add("fa");
        closelogo.classList.add("fa-close");
        closelogo.style.marginLeft="108px";
        otxt.appendChild(closelogo);
        i=2;
    }
    closelogo.addEventListener("click", function() {
        console.log("ok");
        otxt.classList.remove("bounceInUp");
        otxt.classList.add("animated");
        otxt.classList.add("bounceOutUp");

        setTimeout(function() {
            otxt.style.display="none"
        }, 1000);}); 

}

)</script>
</html>

感谢 庆哥的大力支持 和指导

1997baojie commented 6 years ago

22 包捷 今天做的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="container animated bounceIn">
            <div class="content">示例内容</div>
            <a href="javascript:" class="closebtn">
                <b class="fa fa-close"></b>
            </a>    

        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-arrows"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接</a>
        <script>
            var oModal=document.querySelectorAll(".modal");
            var oContainer=document.querySelector(".container");
            var oClose=document.querySelector(".container .closebtn")
            for (var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click",function(event){
                    oContainer.style.display="block";

                })
            }
            oClose.addEventListener("click",function(event){
                oContainer.classList.remove("bounceIn");
                oContainer.classList.add("fadeOut");

                setTimeout(function(){
                    oContainer.style.display="none";
                    oContainer.classList.remove("fadeOut");
                    oContainer.classList.add("bounceIn");
                },1000);

            })
        </script>
    </body>
</html>
maonii commented 6 years ago

16 袁健苗 今天实现如下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height:200px;
                border: 1px solid #000;
            }
            .mobil i{
                font-size:24px;
                color: red;
            }
            .content i{
                position: absolute;
                right: 10px;
                top: 10px;

            }
        </style>
    </head>
    <body>
         <div class="container animated">
            <div class="content">示例内容
            <i class="fa fa-close"></i>
            </div>

         </div>
         <a href="javascript:" data-title = "内容" class="mobil"><i class="fa fa-table"></i></a>
         <script>
            var oMobil=document.querySelectorAll(".mobil");
            var oContainer=document.querySelector(".container");
            var oAnniu=document.querySelector(".fa-close");
            for (var i = 0; i < oMobil.length; i++){
                oMobil[i].addEventListener("click",function(event){
                    oContainer.removeAttribute("class","container animated fadeOut");
                    oContainer.setAttribute("class","container animated fadeIn");
                    oContainer.style.display="block";
                })
                oAnniu.addEventListener("click",function(event){
                    oContainer.removeAttribute("class","container animated fadeIn");
                    oContainer.setAttribute("class","container animated fadeOut");
                    oContainer.style.display="none";
                })
            }
         </script>
    </body>
</html>
zjzsh commented 6 years ago

33 朱善鸿

<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
        <link rel="stylesheet" type="text/css" href="css/animate.css" />
        <style type="text/css">
            .a{
                width: 100px;
                height: 100px;
                border: 1px solid #000;
                position: fixed;
                top: 500px;
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="a animated bounce">
            <i class="fa fa-close guan"></i> 点击事例
        </div>
        <i class="fa fa-address-book "></i>
        <a href="#" class="b">点击</a>
    </body>
    <script type="text/javascript">
        var ob=document.querySelector(".b");
        var oa=document.querySelector(".a");
        var oguan=document.querySelector(".guan");
        ob.addEventListener("click",function() {
            oa.style.display="block";
            oa.classList.remove('fadeOut');
        });
        oguan.addEventListener("click",function() {

            setTimeout(function() {
                oa.classList.add('fadeOut');
//              oa.style.display="none";
            },1000);

        });
    </script>

</html>
shoucaishuai commented 6 years ago

01 朱浩然 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
        <link rel="stylesheet" type="text/css" href="css/animate.css" />
        <style type="text/css">
            .container {
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                height: 200px;
                width: 400px;
                border: 1px solid #000;
            }

            .modal i {
                font-size: 24px;
                color: green;
            }
            .container .close{
                cursor: pointer;
                position: absolute;
                top: 5px;
                right: 5px;
                z-index: 1000;
            }
        </style>
    </head>

    <body>
        <div class="container animated bounceIn">
            <div class="content">事例内容</div>
            <a href="javascript:" class="close"><i class="fa fa-close"></i></a>

        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接2</a>
        <script>
            var oModal = document.querySelectorAll(".modal");
            var oContainer = document.querySelector(".container");
            var oClose=document.querySelector(".close");
            //var oClose = document.querySelectorAll(".animated .clossebtn")
            for(var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click", function(event) {
                    oContainer.style.display = "block";
                    console.log(oClose)
                })
            }
            oClose.addEventListener("click", function(event) {
                event.preventDefault();
                oContainer.classList.remove("bounceIn");
                oContainer.classList.add("fadeOut");
                setTimeout(function() {

                    oContainer.classList.remove("fadeOut");
                    oContainer.classList.add("bounceIn");
                    oContainer.style.display = "none";
                },1000);
            })
        </script>
    </body>

</html>
ckhang commented 6 years ago

07 陈克行 今天代码实现如下


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <style type="text/css">
            .conter{
                border: 1px solid #FFA500;
                width: 200px;
                height: 100px;
                display: none;
                position: fixed;
                left: 20px;
                bottom: 100px;

            }
            .one i{
                color: orange;
            }
            .conter div i{
                color: orange;
                position: absolute;
                right: 10px;
                top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="conter ">
            nice
            <div >
                <a href="javascript:"><i class="fa fa-close close"></i></a>
            </div>
        </div>
        <a href="javascript:" class="one"><i class="fa fa-2x fa-qq"></i></a>
        <a href="javascript:" class="one"><i class="fa fa-2x fa-wechat"></i></a>
        <script type="text/javascript">
            var One=document.querySelectorAll(".one");
            var Con=document.querySelector(".conter");
            var Close=document.querySelector(".close");
            for (var i = 0; i < One.length; i++) {
            One[i].addEventListener("click",function(){
                Con.style.display="block";
                Con.classList.add("animated");
                Con.classList.add("bounceIn");
            });
            }
            Close.addEventListener("click",function(){
                Con.classList.remove("bounceIn");
                Con.classList.add("fadeOut");
                setTimeout(function(){
                    if(Con.style.opacity==0){
                        Con.style.display="none"
                    }

                },1000)

            })
        </script>
    </body>
</html>
Jitianhao commented 6 years ago

36 季天浩 今天实现如下代码 ···html <!DOCTYPE html>

1111111
链接 链接

...

FFFmark commented 6 years ago

35 黄书琛 今天实现如下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <style type="text/css">
            .content{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 200px;
                width: 300px;
                height: 200px;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <div class="content" id="content">
            <div class="a" id="a">内容</div>
            <i class="fa-apple"></i>
        </div>
        <a href="#" data-title = "emmmm....1"><i class="fa-apple"></i></a>
        <a href="#" data-title = "emmmm....2">link</a>
        <script type="text/javascript">
            var oArray = document.querySelectorAll("a");
            var oDiv = document.getElementById("content");
            var oa = document.getElementById("a");
            var oi = document.querySelector("i");
            for (var i = 0; i < oArray.length; i++) {
                oArray[i].addEventListener("click",function () {
                    oDiv.setAttribute('class',"content animated bounce");
                    oDiv.style.display="block";
                })
            }
            oi.addEventListener('click',function () {
                oDiv.setAttribute('class',"content animated fadeOut");
                setTimeout("oDiv.style.display='none'",2000);
            });
        </script>
    </body>
</html>
zhengwenhan commented 6 years ago

44 郑文汉 今天代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/animate.css"/>
        <style type="text/css">
            .container{
                display:none;
                position: fixed;
                left:20px;
                bottom:20px;

                border: 1px solid #000;
            }
            .container a i{
                position: absolute;
                right: 5px;
                top: 5px;

            }
            .modal i{
                font-size: 24px;
                color: deepskyblue;
            }
        </style>
    </head>
    <body>

    <div class="container animated bounceIn">
    <div class="content">示例内容</div>
    <a href="javascript:">
        <i class="fa fa-close"></i>
        <img src="img/img.jpg"/>
    </a>

    </div>
    <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-camera"></i></a>
    <a href="javascript:" data-title="内容" class="modal">链接2</a>
    <script>
    var oModal=document.querySelectorAll(".modal");
    var oContainer=document.querySelector(".container");
    var oClose=document.querySelector("a i");
    var oimg=document.querySelector(".container img");
    oContainer.appendChild(oimg);
    for (var i = 0; i < oModal.length;i++){
        oModal[i].addEventListener("click",function(event){
            oContainer.classList.add('animated');
            oContainer.classList.add('bounceIn');

            oContainer.style.display="block";

        })
    }
    oClose.addEventListener("click", function(){
        oContainer.classList.remove('bounceIn');
        oContainer.classList.add('fadeOut');

        oContainer.style.display="none";
    })

    </script>
    </body>
</html>
ghost commented 6 years ago

45 杨志谦

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>案列</title>
        <link rel="shortcut icon" type="text/css" href="img/icon.ico"/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>

    </head>
    <style type="text/css">
        .container{
            display: none;
            position: fixed;

            border: 1px solid #000;
            z-index: 1000;
            bottom: 250px;
            left: 50px;
            overflow: hidden;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .ocont{

            display: none;
        }
        .container a i{
            position: absolute;
            right: 5px;
            top: 5px;
        }

    </style>
    <body>
        <div class="container">
            <div class="content">示列内容</div>
            <a href="javascript:">
                <i class="fa fa-close"></i>
            </a>
            <img src="img/timg (1).jpg"/>
        </div>

        <a href="javascript:" class="fa fa-android"></a>
        <a href="javascript:" data-title="连接5" class="fa fa-car"></a>
        <script type="text/javascript">
            var windith=window.innerWidth;
            var winheight=window.innerHeight;
            var olink=document.querySelectorAll("a");
            var ocontainer=document.querySelector(".container");
            var oa=document.querySelector("a");
            var ocont=document.createElement("div");
            var h1=document.createElement("h1");
            var oimg=document.querySelector(".container img");

            ocontainer.appendChild(ocont);
                   ocont.appendChild(h1);
                    h1.innerHTML="www";
                    ocont.className="ocont";
                    ocont.appendChild(oimg);
            for (var i=0;i<olink.length;i++) {
                olink[i].addEventListener("click",function (event) {
//                  alert(event.target.getAttribute('data-title'));
                    console.log("ok");
                    oimg.style.width=56+'px';
                    oimg.style.height=56+'px';

                        console.log(windith);
                    ocontainer.style.display="block";
                     ocontainer.classList.add("animated");
                   ocontainer.classList.add("bounceIn"); 
                  ocont.style.display="block";

                })
            }
            oimg.addEventListener("click",function () {
                oimg.style.width=windith+'px';
                oimg.style.height=winheight+'px';
                oimg.style.top=0+'px';
                oimg.style.left=0+'px';
                ocontainer.style.top=0+'px';
                ocontainer

                .style.left=0+'px';
            })
            oa.addEventListener("click",function () {
//              ocontainer.classList.remove("bounceIn")
                ocontainer.classList.add("animated");
                ocontainer.classList.add("bounceOut");
                setTimeout(function () {
                    if(ocontainer.style.opacity==0){

                        ocontainer.classList.remove("fadeOut");
                        ocontainer.classList.remove("animated");
                        ocontainer.classList.remove("bounceIn"); 
                        ocontainer.style.display="none";
                    }

                },1000)
            })

        </script>
    </body>
</html>
Panchengbin commented 6 years ago

15 潘承彬 今天实现代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>复习</title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left:20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid rgba(100,150,180,.5);
            }
            .modal i{
                font-size: 24px;
            }
            .close i{
                position: absolute;
                right: 5px;
                top: 5px;
            }
        </style>
    </head>
    <body>

        <div class="container animated">
            <div class="content">
             <h1>这里的是标题</h1>
             <p>这里是段落</p>
             <div class="close"> <a href="avascript:"><i class="fa fa-close"></i></a></div>
            </div>
        </div>
        <a href="javascript:" data-title = "示例内容" class="modal"> <i class="fa fa-id-card"></i></a>
        <a href="javascript:" data-title = "示例内容" class="close"> <i class="fa fa-table"></i></a>
        <script  >
            var oModal=document.querySelectorAll(".modal");
            var oContainer=document.querySelector(".container");
            var oClose=document.querySelector(".close");
            for(var i=0;i<oModal.length;i++){
                oModal[i].addEventListener("click",function(event) {
                    oContainer.removeAttribute("class","container animated fadeOut");
                    oContainer.setAttribute("class","container animated fadeIn");
                    oContainer.style.display="block"; 
                })
            }
            oClose.addEventListener("click",function(event) {
                oContainer.removeAttribute("class","container animated fadeIn");
                oContainer.setAttribute("class","container animated fadeOut");
                setTimeout(function () {
                    oContainer.style.display="none";
                },1000);
            })
        </script>
    </body>
</html>
Airjt commented 6 years ago

20 邵家栋 今天实现如下代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    </head>
    <style type="text/css">
        .container{
            display: none;
            position: fixed;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            left: 50px;
            bottom: 250px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .ocont{
            width: 100px;
            height: 100px;
            background: #f00;
            display: none;
        }
        .container a i{
            position: absolute;
            right: 5px;
            top: 5px;
        }
    </style>
    <body>
        <div class="container">
            <div class="content">内容</div>
            <a href="javascript:">
                <i class="fa fa-close"></i>
            </a>
        </div>

        <a href="javascript:" class="fa fa-android"></a>
        <a href="javascript:" data-title="连接5" class="fa fa-car"></a>
        <script type="text/javascript">
            var olink=document.querySelectorAll("a");
            var ocontainer=document.querySelector(".container");
            var oa=document.querySelector("a");
            var ocont=document.createElement("div");
            var h1=document.createElement("h1");

            ocontainer.appendChild(ocont);
                   ocont.appendChild(h1);
                    h1.innerHTML="www";
                    ocont.className="ocont";
            for (var i=0;i<olink.length;i++) {
                olink[i].addEventListener("click",function (event) {
//                  alert(event.target.getAttribute('data-title'));
                    console.log("ok");
                    ocontainer.style.display="block";
                   ocontainer.classList.add("animated");
                   ocontainer.classList.add("bounceIn"); 
                  ocont.style.display="block";

                })
            }
            oa.addEventListener("click",function () {
//              ocontainer.classList.remove("bounceIn")
                ocontainer.classList.add("animated");
                ocontainer.classList.add("fadeOut");
                setTimeout(function () {
                    if(ocontainer.style.opacity==0){

                        ocontainer.classList.remove("fadeOut");
                        ocontainer.classList.remove("animated");
                        ocontainer.classList.remove("bounceIn"); 
                        ocontainer.style.display="none";
                    }

                },1000)
            })

        </script>
    </body>
</html>
1998tlf commented 6 years ago

23 屠林锋

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>hi</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css"/>
     <link rel="stylesheet"  href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/>
     <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    <style type="text/css">
        .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .a i{
                font-size: 24px;
                color: green;
            }
            b{
                position: absolute;
                right: 5px;
                top: 5px;
            }

    </style>
    </head>

    <body>
        <div class="container animated bounceIn">

            <div class="content ">示例内容</div>
            <a href="javascript:" class="closebtn ">
                <b class="fa fa-close"></b>
            </a>
        </div>
        <a href="javascript:" data_title="122"class="a" ><i class=" fa fa-music"></i></a>
        <a href="javascript:" data_title="122"class="a" >链接2</a>
        <script type="text/javascript">
            var oa=document.querySelectorAll(".a");
            var oContainer=document.querySelector(".container");
            var oclose=document.querySelector(".container .closebtn");
            for(var i=0;i<oa.length;i++){
                oa[i].addEventListener("click",function(event){
                    oContainer.style.display="block";
                    oContainer.classList.add('bounceIn');
                    oContainer.classList.remove('fadeOut');

                })
            }

            oclose.addEventListener("click",function(event){
                oContainer.classList.add('fadeOut');
                setTimeout("oContainer.style.display='none';",1000);

            })
        </script>
    </body>
</html>
zhangchiheng commented 6 years ago

12 章驰恒

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <title></title>
        <style type="text/css">
            .container{

                left: 200px;
               bottom: 200px;
               width: 400px;
               height: 200px;
               border: 1px solid #f333;
            }
        .modal{
            font-size:20px ;
            color: deepskyblue;
        }

        </style>
    </head>
    <body>
        <div class="container ">
        <div class="content animated bounce">示例内容</div>
        </div>
        <a href="javascript:" data-title = "内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title = "内容" class="modal">链接</a>
        <script type="text/javascript">
            var oModal=document。querySelectorAll(".modal");

            var oContainer=document.querySelector(".container");
            for(var i=0;i<oModal.length;i++){
                oModal[i].addEventListener("click",function(event){
                    oContainer.style.display="block";
                })
            }
        </script>
    </body>
</html>
Stealth2 commented 6 years ago

37 王成铠 今天实现如下代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .close i{
                position: absolute;
                right: 5px;
                top: 5px;
            }
        </style>
    </head>
    <body>
        <a class="link" data-title="abc" href="jacascript:">连接</a>
        <a class="link" data-title="def" href="jacascript:">连接1</a>
        <script type="text/javascript">
            var olink=document.querySelectorAll(".link");
            var ocontent=document.createElement("div");
            ocontent.className="container";
            document.body.appendChild(ocontent);

            var ocon=document.createElement("div");
            ocon.innerHTML="实例内容";
            ocontent.appendChild(ocon);

            var oclose=document.createElement("div");
            oclose.className="close";
            ocontent.appendChild(oclose);

            var oA=document.createElement("a");
            oA.href="javascript:";
            oclose.appendChild(oA);

            var oI=document.createElement("i");
            oI.className="fa fa-close";
            oA.appendChild(oI);

            for (var i = 0; i < olink.length; i++) {

                olink[i].addEventListener("click",function(event) {
                    ocontent.style.display="block";
                    ocontent.setAttribute("class","container animated bounce");
                });
            }
            oclose.addEventListener("click",function() {
                ocontent.setAttribute("class","container animated bounceOut");
                setTimeout(function() {
                ocontent.style.display="none";
                },1000);
            });
        </script>
    </body>
</html>
lkkzxc commented 6 years ago 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="animate.css"/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
            .a i{
                position: absolute;
                margin-left: 300px;
                margin-top: 20px;
                 cocolor: #green;
            }

        </style>
    </head>
    <body>

        <div class="a.animated bounceIn">
            <div class="b" style="width;100px">CHEN</div>
            <a href="javascript" class="f">
                <i class="fa fa-close"></i>
            </a>
        </div>

        <div class="container">
            <div class="content">示例内容</div>
        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接2</a>
        <script>
        var.oC=document.querySelectorAll(".c");
        var.oA=document.querySelector(".a");
        var.oF=document.querySelector(".f");    
            for (var i = 0; i < oModal.length; i++) {
                oC[i].addEventListener("click",function(event){
                    oA.style.display="block";
                    oA.classList.remove("bounceOut");
                    oA.classList.add("bounceOut");
                })
            }  
            oF.addEventListener("click",function(e){
            oA.style.display="none"
            oA.classList.add("bounceOut");
            setTimeout("oA.style.display='none';",1000)
            })
        </script>
    </body>
</html>
tuxinbo158 commented 6 years ago

21 屠鑫波

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .a{
                margin: 10px;
                border: 1px solid sandybrown;
                width: 300px;

                height: 300px;
                position: fixed;
                bottom: 0;
                display: none;

            }
            i{
                position: absolute;
                right: 5px;
                top: 5px;

            }
        </style>
    </head>
    <body>
        <div class="a animated bounceIn">           

            <a href="javascript:">
                <i class="guan fa fa-close"></i>
            </a>
        </div>

        <a href="javascript:" class="b fa fa-music">点</a>
        <script type="text/javascript">
            var oa=document.getElementsByClassName("a");
            var ob=document.getElementsByClassName("b");
            var of=document.querySelector("h1");
            var ofa=document.querySelector("i");
            for (var i=0;i<ob.length;i++) {
                ob[i].addEventListener("click",function(event){
                oa[0].style.display="block";
                oa[0].classList.remove('fadeOut');
                oa[0].classList.add('bounceIn');
            })
            }
            ofa.addEventListener("click",function(event){
                oa[0].classList.remove('bounceIn');
                oa[0].classList.add('fadeOut');
                setTimeout("oa[0].style.display='none';",1000);
            })
        </script>
    </body>
</html>
DreamTwinkle commented 6 years ago

38 娄明磊

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>复习</title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
        <link rel="stylesheet" type="text/css" href="css/animate.css" />
        <style type="text/css">
            .container {
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
            }

            .modal i {
                font-size: 24px;
                color: green;
            }

            .close {
                position: absolute;
                right: 4px;
                top: 4px;
            }

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

    <body>
        <div class="container animated bounceInLeft">
            <div id="picture" class="content"><img class="img" src="img/u=460555328,3074397162&fm=27&gp=0.jpg" /></div>
            <a href="javascript:" class="close">
                <i class="fa fa-close"></i>
            </a>
        </div>

        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data_title="内容" class="modal">链接2</a>
        <script type="text/javascript">
            var oModal = document.querySelectorAll(".modal");
            var oContainer = document.querySelector(".container");
            var oClose = document.querySelector(".close");
            for(var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click", function(event) {
                    oContainer.style.display = "block";
                })
            }
            oClose.addEventListener("click", function() {
                oContainer.style.display = "none";
            })
            var opicture = document.getElementById("picture");
            var oimg = document.querySelector(".img");
            opicture.addEventListener("click", function() {
                console.log(oimg.width, window.innerWidth);
                var width=oimg.width;
                var height=oimg.width;
                (function Larger(){
                    console.log(oimg.width, window.innerWidth);
                    if( width<= window.innerWidth)
                        oimg.style.width =width  + "px";
                    if(oimg.height <= window.innerHeight)
                        oimg.style.height =height  + "px";
                    if(width <= window.innerWidth||height <= window.innerHeight)
                        setTimeout(Larger,10);
                    height+=window.innerHeight/window.innerWidth*15;
                    width+=window.innerWidth/window.innerHeight*13;
                    oContainer.style.top = 0;
                    oContainer.style.left = 0;
                }());
            })
        </script>
    </body>

</html>
zjxbh commented 6 years ago

13 夏彬慧 今天实现如下代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>复习</title>
        <link rel="stylesheet" type="text/css" href="css/animate.css" />
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
        <style type="text/css">
            .container {
                display: none;
                position: fixed;
                left: 100px;
                bottom: 360px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }

            .container i {
                position: absolute;
                right: 8px;
                top: 3px;
            }

            .modal i {
                font-size: 24px;
                color: green;
            }
        </style>
    </head>

    <body>
        <div class="container animated bounceIn">
            <div class="content">示例内容</div>
            <i class="fa fa-close close"></i>
        </div>
        <a href="javascript:" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" class="modal">点击</a>
        <script>
            var oModal = document.querySelectorAll(".modal");
            var oContainer = document.querySelector(".container");
            var oclose = document.querySelector(".close");
            for(var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click", function(event) {
                    oContainer.classList.remove("fadeOut");
                    oContainer.style.display = "block";
                });
            }
            oclose.addEventListener("click", function() {
                oContainer.classList.add("fadeOut");
                setTimeout(function() {
                    if(oContainer.style.opacity == 0) {
                        oContainer.style.display = "none";
                    }
                }, 800);
            });
        </script>
    </body>

</html>
Lanbabaa commented 6 years ago

31 兰庆锋

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/>
        <style type="text/css">
            body{
                padding: 0;
                margin: 0;
            }
            .aaa{
                margin: auto;top:200px;
                border: 1px solid #000;

                width: 500px;
                height: 400px;
                display: none;background-color: #00FF00;
                position: relative; 
            }
            i{
                color: #f0f0f0;
            }
            .cha{
                text-decoration: none;
                position: absolute;
                right: 10px;
            }
            .mban{
                width: 1600px;
                height: 793px;
                background-color: rgba(333,0,0,.3);
            }
        </style>
    </head>
    <body>
        <div class="ccc">
            <a href="javascript:" class="mmm"><i class="fa fa-window-restore"></i></a>
            <a href="javascript:"  id="lj" class="mmm">链接</a>
            <div class="aaa">
                <a href="javascript:" class="cha">×</a>
                    <div class="bbb">
                        aaaaaaa 
                    </div>
            </div>
        </div>
        <script type="text/javascript">
            var oA=document.querySelectorAll(".mmm");
            var oP=document.querySelector(".aaa")
            var oC=document.querySelector(".cha");
            var oD=document.querySelector(".ccc")
            for(i=0;i<oA.length;i++){
                    oA[i].addEventListener("click",function(event){
                    oP.style.display="block";
                    oD.setAttribute("class","ccc mban");

                });
            }
            oC.addEventListener("click",function(event){
                oP.style.display="none";
                oD.setAttribute("class","ccc");
            });

        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        .tu{

            widows: 800px;
            height: 300px;
        }
        .tuxiaoshi{
            display: none;
        }

        .tu11{
            width: 100%;
            height: 100%;
        }
        .tu1{
            width: 350px;
            height: 250px;
            overflow: hidden;
            display: inline-block;
        }.tu2{
            width: 350px;
            height: 250px;
            overflow: hidden;
            display: inline-block;
        }
        .tu2 img{
            width: 100%;
            height: 100%;
        }.tu1 img{
            width: 100%;
            height: 100%;
        }
    </style>
    <body>
        <div id="tu">
            <div id="tu1" class="tu1">
                <img src="img/001.png"/>
            </div>
            <div id="tu2" class="tu2">
                <img src="img/002.jpg"/>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var oT1=document.querySelector("#tu1");
        var oT2=document.querySelector("#tu2");
        var tup=document.querySelectorAll("img");
        var k=0;
        var j=0;
        oT1.addEventListener("click",function(event){
            if(k==0)
            {
                oT1.setAttribute("class","tu11");
                oT2.setAttribute("class","tuxiaoshi");
                k=1;

            }else{
                oT1.setAttribute("class","tu1");
                oT2.setAttribute("class","tu2");
                k=0;
            }
//          
        });
//                  

        oT2.addEventListener("click",function(event){
            if(j==0)
            {
                oT2.setAttribute("class","tu22");
                oT1.setAttribute("class","tuxiaoshi");
                j=1;
            }else{
                oT2.setAttribute("class","tu2");
                oT1.setAttribute("class","tu1");
                j=0;
            }
        });
    </script>
</html>
lwy19971203 commented 6 years ago

25 娄文依

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复习</title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .container .closeBtn{
                position: absolute;
                top: 5px;
                right: 5px;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="container animated bounceIn">
            <div class="content">示例内容</div>
            <a href="javascript:" class="closeBtn"><i class="fa fa-close"></i></a>
        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接2</a>
        <script>
            var oModal=document.querySelectorAll(".modal");
            var oContainer=document.querySelector(".container");
            var oClose=document.querySelector(".container .closeBtn")
            for (var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click",function(event){
                    event.target.style.fontSize="30px";
                    event.target.style.color="green";
                    //console.log(event.target.innerHTML,event.target.dataset.title,event.target.getAttribute("data-title"));
                    oContainer.style.display="block";
//                  oContainer.classList.add('animated');
//                  oContainer.classList.add('bounceIn');
                })
            }
            oClose.addEventListener("click",function(){
                oContainer.classList.remove('bounceIn');
                oContainer.classList.add('fadeOut');
                setTimeout(function(){
                    if(oContainer.style.opacity==0){
                        oContainer.style.display="none";
                    }
                },1000);
            })
        </script>
    </body>
</html>
shixijie commented 6 years ago

11 施希杰 今天代码如下： ···html

复习
示例内容
链接2 ···
qinfengyang commented 6 years ago

40 杨钦沨

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.css" />
    <style type="text/css">
        .container {
            display: none;
            position: fixed;
            left: 20px;
            bottom: 20px;
            height: 200px;
            width: 400px;
            border: 1px solid #000;
        }

        .modal i {
            font-size: 24px;
            color: green;
        }
        .container .close{
            cursor: pointer;
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 1000;
        }
    </style>
</head>

<body>
    <div class="container animated bounceIn">
        <div class="content">事例内容</div>
        <a href="javascript:" class="close"><i class="fa fa-close"></i></a>

    </div>
    <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
    <a href="javascript:" data-title="内容" class="modal">链接2</a>
    <script>
        var oModal = document.querySelectorAll(".modal");
        var oContainer = document.querySelector(".container");
        var oClose=document.querySelector(".close");
        //var oClose = document.querySelectorAll(".animated .clossebtn")
        for(var i = 0; i < oModal.length; i++) {
            oModal[i].addEventListener("click", function(event) {
                oContainer.style.display = "block";
                console.log(oClose)
            })
        }
        oClose.addEventListener("click", function(event) {
            event.preventDefault();
            oContainer.classList.remove("bounceIn");
            oContainer.classList.add("fadeOut");
            setTimeout(function() {

                oContainer.classList.remove("fadeOut");
                oContainer.classList.add("bounceIn");
                oContainer.style.display = "none";
            },1000);
        })
    </script>
</body>
wangzhaojin66 commented 6 years ago

46 王昭锦

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>复习</title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>

        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;  
                border: 1px solid #000;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
            .container a i{
                position: absolute;
                right: 5px;
                top: 5px;   
            }
        </style>
    </head>
    <body>      
        <div class="container animated bounceIn">
            <div class="content">示例内容</div>

            <a href="javascript:"><i class="fa fa-close"></i></a>
        </div>
        <a href="javascript:" data-title"内容" class="modal" ><i class="fa fa-stop"></i></a>
        <a href="javascript:" data-title"内容" class="modal" >链接2</a>
    <script>
        var oModal=document.querySelectorAll(".modal");
        var oContainer=document.querySelector(".container");
        var oa=document.querySelector("a");
        for (var i=0;i<oModal.length;i++) {
            oModal[i].addEventListener("click",function(event){
                oContainer.style.display="block";
            })

        }
        oa.addEventListener("click",function () {
            oContainer.style.display="none";
        })
    </script>
    </body>
</html>
youdady commented 6 years ago

29 丁磊


  | <!DOCTYPE
-- | --
  | <!DOCTYPE html>
  | <html>
  | <head>
  | <meta charset="UTF-8">
  | <title></title>
  | </head>
  | <style type="text/css">
  | .menuContainer{
  | border: 1px solid #333;
  | width: 400px;
  | padding: 2px 2px 2px 2px;
  | margin-left: 38%;
  | margin-top: 5%;
  | background: #00ffff;
  | text-align: center;
  | }
  | .menu{
  | padding: 0;
  | margin: 0;
  | overflow: hidden;
  | }
  | .menu li{
  | list-style-type: none;
  | font-size: 12px;
  | line-height: 18px;
  | }
  | .menu li a{
  | text-decoration: none;
  | color: #333;
  | }
  | </style>
  | <body>
  | <div class="menuContainer">
  | <ul class="menu">
  | <li><a href="index2.html">小托马斯望眼欲穿2018-01-01 16:29视频-NBA2017年度50大关键球</a></li>
  | <li><a href="index2.html">威少超远三分2018-01-01 09:20视频-哈登2017年十佳球 全场奔袭绝杀</li>
  | <li><a href="index2.html">9日勇士将主场迎战掘金，库里能否再取30+？</li>
  | <li><a href="index2.html">库兹玛发声力挺主教练：我愿意为沃顿打球</li>
  | </ul>
  | </div>
  | <script type="text/javascript">
  | var omenu=document.querySelector(".menu");
  | var omenuitem=document.querySelectorAll(".menu li");
  |  
  | var itemheight=omenuitem[0].offsetHeight;
  | //设置单个li高度为可显示高度
  | var n=2;
  | var totalheight=itemheight*n;
  | //可以显示两个li的高度
  | var runflag=true;
  | //定义runflage为true
  | for (var i=0;i<omenuitem.length;i++) {
  | omenuitem[i].innerHTML=(i+1)+"."+omenuitem[i].innerHTML;
  | }
  | //为每个li前面增加序号与.
  | omenu.style.height=totalheight+"px";
  | //设置一个可以显示两个li的窗口
  | omenu.innerHTML+=omenu.innerHTML;
  | //俩个menu的高
  | omenu.addEventListener("mouseover",function() {
  | runflag=false;
  | //鼠标进入停止运行
  | });
  | omenu.addEventListener("mouseout",function() {
  | runflag=true;
  | //鼠标退出   滚动
  | });
  |  
  | function run () {
  | var stop=runflag==false;
  | //定义stop停止滚动
  | if(!stop){
  | //                  omenu.scrollTop++;
  | //                   omenu.scrollTop++;只能循环两次
  |  
  | omenu.scrollTop==omenu.scrollHeight/2?omenu.scrollTop=0:omenu.scrollTop++;
  | //条件表达式，活动到底复原(=0)，否则继续滚动(++)
  | //omenu.scrollTop 是一个整数，即omenu的内容向上滚动的像素数。
  | }
  | //  如果 omenu.scrollTop 等于 omenu.scrollHeight/2算出来这个值，
  | //那么omenu.scrollTop等于 0，否则omenu.scrollTop++滚动
  | setTimeout(run,omenu.scrollTop%totalheight==0?1000:10);
  | console.log("scrollTop:"+omenu.scrollTop);
  | console.log("totalheight:"+totalheight);
  |  
  |  
  | //可视窗口除余两个li的窗口是否为0，为0设置每1000运行一次，不是设置为10
  | }
  | setTimeout(run,1000);
  | // 设置没1000运行一次run
  | </script>
  | </body>
  | </html>
flxKing commented 6 years ago

03傅禄翔

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .b{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: rgba(11,11,11,.2);
                display: none;
            }
            .c{
                width: 300px;
                height: 300px;
                margin: auto;
                margin-top: 250px;
                background-color: #eee;
                display: none;
            }
            .d{
                display: block;
            }
        </style>
        <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
    </head>

    <body>
        <div class="a">
            <a href="javascript:" data-title="内容" class="a"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title="内容" class="a">链接2</a>
        </div>
        <div class="b">
            <div class="c">
                <i class='fa fa-close' id="aa"></i>
            </div>
        </div>
        <script type="text/javascript">
            oA=document.querySelector(".a");
            oB=document.querySelector(".b");
            oC=document.querySelector(".c");
            oAA=document.getElementById("aa")
            oA.onclick=function(){
                oB.className="d b";
                oC.className="d c";
            }
            oAA.onclick=function(){
                oB.className="b";
                oC.className="c";
            }
        </script>
    </body>

</html>
wuweierzhi commented 6 years ago

09 邬远峰


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
          <link rel="stylesheet" href="fonts/animate.css" />

        <style type="text/css">
        .container{
            display: none;
            position: fixed;
            left: 20px;
            bottom: 20px;
            width: 400px;
            height: 200px;
            border: 1px solid #000;
        }
        .modal i{
            font-size: 24px;
            color: green;       
        }
        </style>        
    </head>
    <body>

            <div class="container"> 

        <div class="animated rubberBand"    >
        <div class="content">示例内容</div>

            </div>
        </div>
        <a href="javascript:" data-title = "内容" class="modal"><i class="fa fa-table"></i> </a>
        <a href="javascript:" data-title = "内容" class="modal">链接2</a>
        <script>
            var oModal=document.querySelectorAll(".modal");
            var oContainer=document.querySelector(".container");
            for (var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click",function(event){
                    //console.log(event.target.innerHTML,event.target.dataset.title,event.target.getAttribute("data-title"));
                    oContainer.style.display="block";
                })
            }
    </script>

    </body>
</html>
yanjianhuai commented 6 years ago

04 严建淮 今天代码如下 


 <title>复习</title>
 <style type="text/css">
 .container 
{ 
display: none; 
position: fixed;
 left: 20px;
 bottom: 20px; 
width: 400px; 
height: 200px;
 }
        .modal i {
            font-size: 24px;
            color: green;
        }

        .close {
            position: absolute;
            right: 4px;
            top: 4px;
        }

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

<body>
    <div class="container animated bounceInLeft">
        <div id="picture" class="content"><img class="img" src="img/u=460555328,3074397162&fm=27&gp=0.jpg" /></div>
        <a href="javascript:" class="close">
            <i class="fa fa-close"></i>
        </a>
    </div>

    <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
    <a href="javascript:" data_title="内容" class="modal">链接2</a>
    <script type="text/javascript">
        var oModal = document.querySelectorAll(".modal");
        var oContainer = document.querySelector(".container");
        var oClose = document.querySelector(".close");
        for(var i = 0; i < oModal.length; i++) {
            oModal[i].addEventListener("click", function(event) {
                oContainer.style.display = "block";
            })
        }
        oClose.addEventListener("click", function() {
            oContainer.style.display = "none";
        })
        var opicture = document.getElementById("picture");
        var oimg = document.querySelector(".img");
        opicture.addEventListener("click", function() {
            console.log(oimg.width, window.innerWidth);
            var width=oimg.width;
            var height=oimg.width;
            (function Larger(){
                console.log(oimg.width, window.innerWidth);
                if( width<= window.innerWidth)
                    oimg.style.width =width  + "px";
                if(oimg.height <= window.innerHeight)
                    oimg.style.height =height  + "px";
                if(width <= window.innerWidth||height <= window.innerHeight)
                    setTimeout(Larger,10);
                height+=window.innerHeight/window.innerWidth*15;
                width+=window.innerWidth/window.innerHeight*13;
                oContainer.style.top = 0;
                oContainer.style.left = 0;
            }());
        })
    </script>
</body>
wtzjyd commented 6 years ago

17 王挺 今天实现代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom:500px;
                width: 400px;
                height: 200px;
                border: 5px solid #000;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">示例</div>
            </div>
            <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-address-card"></i></a>
            <a href="javascript:" data-title="内容" class="modal">链接2</a>
            <script type="text/javascript">
                var oModal=document.querySelectorAll(".modal");
                var oContainer=document.querySelector(".container");
                for (var i = 0;i < oModal.length;i++){
                    oModal[i].addEventListener("click",function(event){
                        oContainer.style.display="block";
                        oguan.addEventListener("click",function() {

                    })
                }
            </script>
    </body>
</html>
jian10 commented 6 years ago

24 杨熔倪

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .figure{
                width: 500px;
                height: auto;
                overflow: hidden;
                cursor: pointer;
            }
            .figure img{
                width: 100%;
            }
            .div{
                cursor: pointer;
                position: fixed;
                left: 0;
                top: 0;
                width: 100px;
                height: 600px;
                background-image: url(img/tu.jpg);
                background-size: cover;
                display: none;
            }
        </style>
    </head>
    <body>
        <figure class="figure">
            <img src="img/tu.jpg"/>
            <figcaption>tu</figcaption>
        </figure>
        <div class="div">

        </div>
        <script type="text/javascript">
            var ofigure=document.getElementsByClassName('figure');
            var odiv=document.getElementsByClassName('div');
            var oimg=document.querySelector("img");
            var x=0,y=0,x1=0,y1=0;
            ofigure[0].addEventListener("click",function(event){
                odiv[0].style.height=window.innerHeight+"px";
                console.log(odiv[0].style.height);
                odiv[0].style.width=oimg.naturalWidth*window.innerHeight/oimg.naturalHeight +"px";
                console.log(odiv[0].style.width);
                odiv[0].style.display="block";

            });
            odiv[0].addEventListener("click",function(event){
                odiv[0].style.display="none";
            });
            odiv[0].addEventListener("mousemove",function(event){
                x=event.screenX;
                y=event.screenY;
                console.log(x,y);
                var le=odiv[0].offsetLeft;

                    odiv[0].style.left=(le+x1-x)+"px";

                x1=x;
                y1=y;

            })

        </script>
    </body>
</html>
zmthappy commented 6 years ago

28 郑檬涛


<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/csb.css" />
        <style>
            #test{
                  border:2px solid blue;
                 padding:15px; 
                 background:#FF34B3; 
                 width:80px; 
                 position:absolute;
                }
        </style>
    </head>

    <body>
        <p id="test" style="font-size:14px; color:#000;padding-top:5px;">内容</p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <input type="button" value="变大" />
        <br />

        <script>
                var aInput = document.getElementsByTagName('input');
                var oTest = document.getElementById('test');
                var zzz = 14;
                aInput[0].addEventListener("click", function(event) {
                    setInterval("zmt()",100);
                    //      oFontSize++;
                    //      oTest.style.fontSize=oFontSize+'px';
                });

                function zmt() {
                    if(zzz<40){
                        zzz = zzz + 1;
                    }
                    oTest.style.fontSize = zzz +"px";
                }
        </script>
    </body>
</html>
```
zyxswh commented 6 years ago

18 周伊翔 今天代码实现如下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
        <link rel="stylesheet" type="text/css" href="css/animate.css" />
        <style type="text/css">
            .container {
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                height: 200px;
                width: 400px;
                border: 1px solid #000;
            }

            .modal i {
                font-size: 24px;
                color: green;
            }
            .container .close{
                cursor: pointer;
                position: absolute;
                top: 5px;
                right: 5px;
                z-index: 1000;
            }
        </style>
    </head>

    <body>
        <div class="container animated bounceIn">
            <div class="content">事例内容</div>
            <a href="javascript:" class="close"><i class="fa fa-close"></i></a>

        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接2</a>
        <script>
            var oModal = document.querySelectorAll(".modal");
            var oContainer = document.querySelector(".container");
            var oClose=document.querySelector(".close");
            //var oClose = document.querySelectorAll(".animated .clossebtn")
            for(var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click", function(event) {
                    oContainer.style.display = "block";
                    console.log(oClose)
                })
            }
            oClose.addEventListener("click", function(event) {
                event.preventDefault();
                oContainer.classList.remove("bounceIn");
                oContainer.classList.add("fadeOut");
                setTimeout(function() {

                    oContainer.classList.remove("fadeOut");
                    oContainer.classList.add("bounceIn");
                    oContainer.style.display = "none";
                },1000);
            })
        </script>
    </body>

</html>
EightPercent commented 6 years ago

05 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <style type="text/css">
            .a{
                display: none;
                position: fixed;
                margin-left: 20px;
                margin-top: 50px;   
                width: 300px;
                height: 300px;  
                border: 1px solid black;
            }
            .a i{
                position: absolute;
                margin-left: 285px;
                margin-top: -20px;
                color:#000000;
            }
            .modal i{
                font-size: 24px;
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="a animated bounceIn" >
            <div class="b" style="width: 100px;">123456789</div>
            <a href="javascript:" class="f" >
                <i class="fa fa-close"></i>
            </a>
        </div>
        <a href="javascript:" data-title="内容" class="c"><i class="fa fa-list"></i></a>
        <a href="javascript:" data-title="内容" class="c">链接</a>
        <script type="text/javascript">
            var oC=document.querySelectorAll(".c");
            var oA=document.querySelector(".a");
            var oF=document.querySelector(".f");
            for (var i = 0; i < oC.length; i++) {
                oC[i].addEventListener("click",function(event) {
                    oA.style.display="block";
                    oA.classList.remove("bounceOut");
                    oA.classList.add("bounceIn");
                })
            }
            oF.addEventListener("click",function (e) {
                oA.classList.add("bounceOut");
                setTimeout("oA.style.display='none';",1000);            
            })
        </script>
    </body>
</html>
RubinTry commented 6 years ago

43 卢孙仲 今天实现代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复习</title>
        <!--
            开发的时候，建议大家用本地文件，最好用没有压缩过的文件
            上线的时候，建议使用压缩过的文件，或使用cdn的方式
        -->
        <!--<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .container{
                display: none;
                position: fixed;
                left: 20px;
                bottom: 20px;
                width: 400px;
                height: 200px;
                border: 1px solid #000;
            }
            .container .closeBtn{
                position: absolute;
                top: 5px;
                right: 5px;
            }
            .modal i{
                font-size: 24px;
                color: #ff0;
            }
        </style>
    </head>
    <body>
        <!--
            交互开发，做交互，事件
        -->
        <div class="container animated bounceIn">
            <div class="content">示例内容</div>
            <a href="javascript:" class="closeBtn"><i class="fa fa-close"></i></a>
        </div>
        <a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
        <a href="javascript:" data-title="内容" class="modal">链接2</a>
        <script>
            var oModal=document.querySelectorAll(".modal");
            var oContainer=document.querySelector(".container");
            var oClose=document.querySelector(".container .closeBtn")
            for (var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click",function(event){
                    event.target.style.fontSize="50px";
                    event.target.style.color="#ff8866";
                    //console.log(event.target.innerHTML,event.target.dataset.title,event.target.getAttribute("data-title"));
                    oContainer.style.display="block";
//                  oContainer.classList.add('animated');
//                  oContainer.classList.add('bounceIn');
                })
            }
            oClose.addEventListener("click",function(){
                oContainer.classList.remove('bounceIn');
                oContainer.classList.add('fadeOut');
                setTimeout(function(){
                    if(oContainer.style.opacity==0){
                        event.target.style.fontSize="24px";
                        oContainer.style.display="none";
                    }
                },500);
            })
        </script>
    </body>
</html>
zseqsc commented 6 years ago

27 王志豪


<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
    </head>
    <style type="text/css">
        .a{
            width: 200px;
            height: 200px;
            position: fixed;
            bottom: 5%;
            left: 5%;
            border: 1px solid #000;
            display: none;
        }
        .c{
            float: right;
            margin-top:10px ;
            margin-right:10px ;
        }
        .b a{
            color: black;
            font-size:24px ;
        }
    </style>
    <body>
        <div class="a">
            <a href="#"><i class="c fa fa-close"></i></a>
            <p>aaaaaaaaaaaaaaaaa</p>
        </div>
        <div class="a">
            <a href="#"><i class="c fa fa-close"></i></a>
            <p>aaaass</p>
        </div>
        <div class="b">
            <a class="zzz" href="#"><i class="fa fa-table"></i></a>
            <a class="zzz" href="#">zzz</a>
        </div>
        <script type="text/javascript">
            var oa=document.getElementsByClassName("a");
            var ozzz=document.getElementsByClassName("zzz");
            var i=24;
            var zxc;
//          for(i=0;i<ozzz.length;i++){
                ozzz[0].addEventListener("click",function (event) {
                    zxc=setInterval("ziti()",100);

                })
//          }
            function ziti () {
                if(i<40){
                    i=i+1;
                }
                else{
                    clearInterval(zxc);
                }
                console.log(i);
                ozzz[0].style.fontSize=i+"px";
            }

        </script>
    </body>
</html>```