js实现鼠标悬浮框效果

本文实例为大家分享了js实现鼠标悬浮框效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 500px;
            min-height: 400px;
            _height:400px;
            margin: 200px auto;
            background-color: #ccc;
            margin-top: 20px;
            position: relative;
        }
        .follwDiv{
            width: 200px;
            height: 100px;
            background-color: #d64e4e;
            color: black;
            border: solid 1px #9c2c2c;
        }
        .text{
            display: inline;
            width: auto;
            height: 50px;
            line-height: 50px;
            text-align: center;
           /* border: solid 1px red; */
        }
    </style>
</head>
<body>
    <pre>
        跟随鼠标的提示框
    </pre>
    <div id="box">
        <div class="text1  text">中国嫦娥飞天的感想</div><br>
        <div class="text2   text"  >中国是世界上最大的人口大国！</div>
        <div class="follwDiv"></div>
        
    </div>
    <script>
        var ores=document.getElementsByClassName("follwDiv")[0];
        // console.log(ores);
        ores.style.display="none";
        ores.style.position="absolute";
      
        var aText=document.getElementsByClassName("text");
        for(var i=0;i<aText.length;i++){
             var index;
              // aText[i].setAttribute("index",i);  这种直接在网页上显示出HTML的属性
                aText[i].index=i;
            aText[i].onmousemove=function(){
               
                if(this.index===0){
                    ores.innerHTML= "2013年12月14号，嫦娥3号卫星登上了月球，激动人心的时刻终于要到来了 ....";
                }
                if(this.index===1){
                    ores.innerHTML="中国有13亿人口,是世界上最打的人口国家，也是世界上历史四大古国之一.....";
                }

         var s= getMouseCoord();
            ores.style.left=s.X+"px";
            ores.style.top=5+s.Y+"px";
            ores.style.display="block";
        }
        aText[i].onmouseout=function(){
            ores.style.display="none";
        }
        }
      
//获得鼠标对象的坐标
        function getMouseCoord(even){
           //处理兼容：  事件对象
           e=even||window.event;
            var X= e.offsetX;//相对父元素
            var Y=e.offsetY;
             var screenX=e.clientX;//当前可视区域
             var screenY=e.clientY;
             var pageX=e.pageX;//整个页面
             var pageY=e.pageY;
            return {
                X,
                Y,
                screenX,
                screenY,
                 pageX,
                 pageY
            }
        }
     
    </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js和css写一个可以自动隐藏的悬浮框

    js和css写一个可以自动隐藏的悬浮框

    今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态: 左边那一条窄线就是隐藏以后的悬浮框. 显示状态: 当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CSS样式:

  • js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法

  • 基于JS实现页面悬浮框的实例代码

    当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div1 { height:2000px; } .div2 { width:100%; height:35

  • js实现鼠标悬浮框效果

    js实现鼠标悬浮框效果

    本文实例为大家分享了js实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">    

  • vue实现鼠标悬浮框效果

    vue实现鼠标悬浮框效果

    本文实例为大家分享了vue实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 效果: html: <div   @mouseenter="enter"    @mouseleave="leave"    @mousemove="move" > 鼠标触碰元素 </div>   <div v-show="popUpShow" class="hover_con" :style=&

  • JS实现右侧悬浮框效果

    JS实现右侧悬浮框效果

    本文实例为大家分享了JS实现右侧悬浮框效果的具体代码,供大家参考,具体内容如下 让一个div始终悬浮在右下角 <!DOCTYPE html> <html lang="en"> <head>         <meta charset="UTF-8">         <title>Document</title>     <style>             #div1{    

  • Vue实现鼠标经过文字显示悬浮框效果的示例代码

    需求 在所做的Vue项目中,需要在鼠标移动文字框的时候显示一些详细信息.最终实现的效果如下: 鼠标经过button的时候,可以在光标附近显示出一个悬浮框,显示框里面显示时间和值的信息,鼠标移出button元素的时候,这个显示框会消失. 分析 涉及到鼠标的移动事件. 鼠标事件有下面这几种: 1.onclick(鼠标点击事件) box.onclick = function(e){ console.log(e) } 2.onmousedown(鼠标按下事件) box.onmousedown = fun

  • vue实现鼠标经过显示悬浮框效果

    vue实现鼠标经过显示悬浮框效果

    本文实例为大家分享了vue实现鼠标经过显示悬浮框效果的具体代码,供大家参考,具体内容如下 项目架构采用vue-cli脚手架搭建的webpack项目 实现的效果如下: 鼠标经过button 右边显示出一个悬浮框 鼠标移出buttom元素 悬浮框隐藏 并且悬浮框可以随着鼠标的移动而改变位置 全部代码如下: <template>   <div class="hello">     <div id="focus_toolTip" class=&

  • JS实现鼠标框选效果完整实例

    本文实例讲述了JS实现鼠标框选效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; char

  • Android实现通话最小化悬浮框效果

    Android实现通话最小化悬浮框效果

    大家在使用主流的视频软件以及直播软件的时候,经常会看到打开视频最小化以后,不是直接关闭,而是在屏幕右下角一个小窗口的样子,本次小编就给大家带来的是用Android实现在视频或者语音通话的时候,最小化也是出现一个悬浮框的效果. 关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方面也给有需要的人提供一个思路,让大家少走弯路.这里我也是参考了些有关And

  • js实现鼠标拖曳效果

    js实现鼠标拖曳效果

    js实现鼠标的拖曳效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 效果如下: 下面是代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

随机推荐