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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于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和css写一个可以自动隐藏的悬浮框
今天写一个小实例,用js和css写一个可以自动隐藏的悬浮框.css肯定是用来控制样式的,js用来控制器显示与隐藏的.显示与隐藏通常有两种方法实现:1,用js控制其显示属性:2,用js控制其大小. 今天要说的就是通过控制其大小来实现元素的显隐,原理:为其注册鼠标移入.移出的事件,当鼠标移出对象范围,将其宽度设为1,当鼠标再次移入该对象,将其宽度还原.很简单,我们一起看看吧! 隐藏状态: 左边那一条窄线就是隐藏以后的悬浮框. 显示状态: 当鼠标滑到左边的悬浮框上,悬浮框就又显示出来了. CSS样式:
-
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息? 文字在超出长度时,如何实现用省略号代替? 用CSS实现超长字段用省略号表示的方法:所有浏览器兼容! html代码如下: <div style="width:150px;overflow:hidden; white-space:nowrap; text-overflow:ellipsis"> 用CSS实现超长字段被省略的简单方法
-
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实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 效果: html: <div @mouseenter="enter" @mouseleave="leave" @mousemove="move" > 鼠标触碰元素 </div> <div v-show="popUpShow" class="hover_con" :style=&
-
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-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实现在视频或者语音通话的时候,最小化也是出现一个悬浮框的效果. 关于音视频通话过程中最小化成悬浮框这个功能的实现,网络上类似的文章很多,但是好像还没看到解释的较为清晰的,这里因为项目需要实现了这样的一个功能,今天我把它记录下来,一方面为了以后用到便于自己查阅,一方面也给有需要的人提供一个思路,让大家少走弯路.这里我也是参考了些有关And
-
js实现鼠标拖曳效果
js实现鼠标的拖曳效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 效果如下: 下面是代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1