码迷,mamicode.com
首页 > 移动开发 > 详细

点击新闻弹出新闻内容,并且新闻内容根据鼠标移动

时间:2020-05-16 00:47:33      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:color   display   auto   国际   without   技术   mouseover   absolute   length   

点击新闻弹出新闻内容,并且新闻内容根据鼠标移动

技术图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 800px;padding:10px;border: solid 1px black;margin: 40px auto;
        position: relative;}

        .title h2{padding: 5px 0;background: #a9a;}

        .msg p{width: 400px;font-size: 14px;color: #222;border: solid 1px black;background: #efefef;
        margin: 0;
        display: none;
        position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="box">
        <div class="title">
            <h2>全球确诊超409万例!俄罗斯总统新闻秘书确诊,美国副总统有新动作</h2>
            <h2>“无国界医生”派遣团队前往疫情严重的美国原住民社区</h2>
        </div>
        <div class="msg">
            <p>超过100个新冠肺炎疫苗项目正在进行当地时间12日,世卫组织发言人玛格丽特·哈里斯表示,目前已有超过100个新冠肺炎疫苗项目正在进行。但针对冠状病毒的疫苗研发有难度,正在加速进行。疫情最新情况美国确诊病例超过136万例据约翰斯·霍普金斯大学数据,截至美东时间12日17时32分,美国新冠肺炎确诊病例为1366350例,死亡82105例。</p>
            <p>据外媒BGR报道,“无国界医生”(Doctors Without Borders)是一个国际医疗人道主义组织,以在冲突地区和卫生保健系统崩溃的地方开展活动,为受苦受难的民众提供所需的护理而闻名。由于美国一个地区的新冠疫情已经变得非常严重,该组织最近派出了一支队伍,首次在当地开展行动。</p>
        </div>
    </div>

    <div id="box"></div>
</body>
<script>
    var ah2 = document.querySelectorAll(".title h2");
    var ap = document.querySelectorAll(".msg p");

    for(var i=0;i<ah2.length;i++){
        // 给每个h2绑定索引,方便将来在事件中获取
        ah2[i].index = i;
        // 鼠标进入
        ah2[i].onmouseover = function(){
            // 隐藏所有
            for(var j=0;j<ap.length;j++){
                ap[j].style.display = "none";
            }
            // 根据当前事件元素的索引,显示对应的p
            ap[this.index].style.display = "block";
        }
        // 鼠标离开
        ah2[i].onmouseout = function(){
            // 隐藏所有
            for(var j=0;j<ap.length;j++){
                ap[j].style.display = "none";
            }
        }

        ah2[i].onmousemove = function(eve){
            var e = eve || window.event;
            //+10是解决闪的问题
            ap[this.index].style.left = e.offsetX + this.offsetLeft + 10 + "px";
            console.log(e.offsetX)
            console.log(this.offsetLeft)
            ap[this.index].style.top = e.offsetY + this.offsetTop + 10 + "px"
        }
    }
</script>
</html>

点击新闻弹出新闻内容,并且新闻内容根据鼠标移动

标签:color   display   auto   国际   without   技术   mouseover   absolute   length   

原文地址:https://www.cnblogs.com/cupid10/p/12897760.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!