Acticle 13:javascript特效小分享：鼠标移入移出出现弹框效果

最新推荐文章于 2022-12-13 14:30:05 发布

颜洁

最新推荐文章于 2022-12-13 14:30:05 发布

阅读量509

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/amytun_yu/article/details/52919433

版权

js基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简单的小特效
代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--<link rel="stylesheet" type="text/css" href="css/index.css"/>-->
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                font-family: "微软雅黑";
            }
            .round{
                position: relative;
                float: left;
                width: 150px;
                height: 150px;
                font-size: 16px;
                line-height: 150px;
                border-radius: 50%;
                margin: 100px 25px;
                border: 4px solid #d8d8d8;
                text-align: center;
                color:#fff ;
            }

            .round:nth-of-type(1){
                background: #01457b;
                border: 4px solid #325f83;

            }
            .round:nth-of-type(2){
                background: #3186ca;
                border: 4px solid #1c68a5;
            }
            .round:nth-of-type(3){
                background: #f05851;
                border: 4px solid #c23a34;
            }
            .round:nth-of-type(4){
                background: #ff6600;
                border: 4px solid #f38134;
            }
            .round:nth-of-type(5){
                background: #c0eede;
                color:#5d6365;
                border: 4px solid #66ecbe;
            }
            .round:nth-of-type(6){
                background: #ea4c89;
                border: 4px solid #f88db6;
            }
            .round:hover{
                border: 4px solid #5d6365;
                background-color: #fff;
                color: #5d6365;
            }
            .tankuang{
                font-size: 12px;
                width: 80px;
                height: 40px;
                background: #4c4c4c;
                line-height: 40px;
                color: #fff;
                border: 2px solid #000;
                border-radius: 3px;
                position: absolute;
                top:-80px;
                left: 30px;
                /*z-index: 10;*/
            }
            .tankuang img{
                display: block;
                width: 18px;
                height: 11px;
                position: absolute;
                bottom:-11px;
                left: 22px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var aDiv=document.getElementsByTagName('div');
                var aSpan=document.getElementsByTagName('span');


                for(var i=0;i<aDiv.length;i++){
                    aSpan[i].style.display='none';
                    aDiv[i].index=i;
                    aDiv[i].onmouseover=function(){//鼠标移入的当前这个div的时候，让当前的span弹框显示
                        for(var i=0;i<aSpan.length;i++){
                            aSpan[i].style.display='none';
                        }   
                        aSpan[this.index].style.display='block';
                    }   
                    aDiv[i].onmouseout=function(){
                        for(var i=0;i<aSpan.length;i++){
                            aSpan[i].style.display='none';
                        }   

                    }                   
                }


            }
        </script>
    </head>
    <body>
        <!--给出div跟span-->
        <div class="round">WWW.JS-CSS.CN
            <span class="tankuang">
                <img src="img/thk02.png"/>
                www.js-css.cn
            </span>
        </div>

        <div class="round">JS代码网
            <span class="tankuang">
                <img src="img/thk02.png"/>
                JS代码网
            </span>
        </div>
        <div class="round">JQUERY
            <span class="tankuang">
                <img src="img/thk02.png"/>
                jquery
            </span>
        </div>
        <div class="round">JS代码网
            <span class="tankuang">
                <img src="img/thk02.png"/>
                JS代码网
            </span>
        </div>
        <div class="round">CSS3
            <span class="tankuang">
                <img src="img/thk02.png"/>
                CSS3
            </span>
        </div>
        <div class="round">HTML5
            <span class="tankuang">
                <img src="img/thk02.png"/>
                html5
            </span>
        </div>
    </body>
</html>

这段简单的代码呢，（1）主要是实现的功能就是，当鼠标移入到圆形的时候，显示弹框，当鼠标移出时弹框消失
（2）其次呢，鼠标移出时，圆形里面的背景色、字体颜色，边框的颜色都会发生变化，鼠标移出来时又变回来。

下面是运行结果的截图：

颜洁

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Acticle 13:javascript特效小分享：鼠标移入移出出现弹框效果

简单的小特效代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>  <style type="t
复制链接

扫一扫