javascript实现论坛悬浮框 简单原理 循环多条

最新推荐文章于 2024-09-28 02:51:09 发布
最新推荐文章于 2024-09-28 02:51:09 发布
阅读量563 收藏 2
点赞数
分类专栏： javascript原创 文章标签： javascript JavaScript Javascript javaScript JAVASCRIPT 悬浮框 简单原理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/coke0/article/details/8549315
版权
本文展示了一个使用HTML和JavaScript实现鼠标悬停显示用户信息的简单示例。通过DOM操作和事件监听，当用户将鼠标悬停在头像上时，会显示包括账号、昵称等在内的个人信息。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="css/javascript.js" type="text/javascript"></script>-->
<script>
window.onload = function()
{
	var oBody = document.getElementById('body');
	var oDiv = document.getElementsByTagName('div');
	var oImg = [];
	var oUserInfo = [];
	var i=0;
	for(i=0;i<oDiv.length;i++)
	{
		switch(oDiv[i].className)
		{
			case 'userinfohover':
				oUserInfo.push(oDiv[i]);
				break;
			case 'left':
				oImg.push(oDiv[i].getElementsByTagName('img')[0]);
		}
	}
		for(i=0;i<oImg.length;i++)
		{
			oImg[i].index = i;
			oImg[i].onmouseover = function()
			{
				oUserInfo[this.index].style.display = 'block';
			};
			oUserInfo[i].index = i;
			oUserInfo[i].onmouseover = function()
			{
				oUserInfo[this.index].style.display = 'block';
			};
			oUserInfo[i].onmouseout = function()
			{
				var index = this.index;
				oUserInfo[index].style.display = 'none';
			};
			oImg[i].onmouseout = function()
            {
                oUserInfo[this.index].style.display = 'none';
            };
			
		}
};
</script>
<style>
body{
	margin:5 auto;
	padding:0px;
	font-size:12px;}
a{
	text-decoration:none;
	color:#06F;}
a:hover{
	text-decoration:none;
	color:#f00;}
.content{
	width: 940px;
	margin:5px auto;
	border:1px solid #A9CBEE;
	height:210px;}
.content .left{
	float:left;
	width:180px;
	border-right:1px solid #A9CBEE;
	height:210px;
	background:#EFF4FB;}
.content .left dl{
	margin:0 auto;
	text-align:left;
	padding:10px 0px 10px 26px;
	display:block;}
.content .left dl dt,.content .left dl dd{
	margin:0 auto;
	display:block;
	padding:2px 0px;
	outline:none;}
.content .left dl dt{
	position:relative;}
.content .left dl dt img{
	width:120px;
	height:120px;
	border:1px solid #CCC;
	padding:1px;}
.divspace{
	height: 120px;
    left: -40px;
    position: absolute;
    top: 0px;
    width: 50px;
	}
.content .left dl .username a{
	font-weight:900;}
.content .left dl .level{
	background:url(images/003.gif) no-repeat 35px 8px;
}
.content .left dl .username a:hover{
	font-weight:900;}
.content .left dl .userinfohover{
	position:absolute;
	top:0px;
	left:140px;
	z-index:1002;
	width:260px;
	height:200px;
	background:url(images/005.png) repeat;
	padding:3px;
	border-radius:4px;
	display:none;
}
.content .left dl .userinfohover .userinfocontent{
	border:1px solid #CCC;
	padding:10px;
	background:#FFF;
	height:178px;
	position:relative;
	}
.content .left dl .userinfohover .userinfocontent .jiantou{
	background:url(images/006.png) 0 -20px repeat;
	position: absolute;
	top:10px;
	left:-9px;
	width:9px;
	height:17px;
	display:block;}
.content .left dl .userinfohover .userinfocontent dl{
	margin:0px;
	padding:0px;
	position:relative;
	top:-10px;
	}
.content .left dl .userinfohover .userinfocontent dl dt{
	float:left;
	margin-right:10px;
	}
.content .left dl .userinfohover .userinfocontent dl dt img{
	width:75px;
	height:75px;
	}
.content .left dl .userinfohover .userinfocontent dl dd{
	padding:5px 0px;
	}
.content .left dl .userinfohover .userinfocontent .button{
	background:#66AD0C;
	border:1px solid #060;
	border-radius:2px;
	padding:1px 5px;
	margin-right:5px;
	color:#FFF;}
.content .left dl .userinfohover .userinfocontent .add{
	background:url(images/007.png)  no-repeat scroll 3px center #66AD0C;
	padding-left:13px;}
.content .left dl .userinfohover .userinfocontent ol{
	padding:0px 0px 0px 2px;
	margin-top:10px;}
.content .left dl .userinfohover .userinfocontent ol li{
	list-style-type:decimal;
	margin-left:18px;
	padding:2px 0px;}
.content .right{
	float:left;
	width:758px;
	height:210px;
	background:#f5f5f5;}
.content .right .louceng{
	padding:5px 10px;
	border-bottom:1px solid #A9CBEE;
}
.content .right .louceng .loucengright{
	float:right;}
.content .right .write{
	min-height:145px;
	padding:5px 10px;}
.content .right .loucengbottom{
	border-bottom:0px;
	border-top:1px solid #A9CBEE;
	}
.content .right .loucengbottom .loucengright a{
	margin:0px 2px;
	color:#999;
	}
.content .right .loucengbottom .loucengright a:hover{
	margin:0px 2px;
	color:#999;
	text-decoration:underline;
	}
.content .right .loucengbottom .loucengright .aone{
	color:#F00 !important;
}
</style>
</head>

<body id="body">
<div class="content">
    <div class="left">
    	<dl>
        	<dt>
                <a href=""><img src="images/001.jpg" id="image1"></a>
                <div class="userinfohover" id="userinfohover">
                    <div class="userinfocontent">
                    <div class="divspace"></div>
                        <div class="jiantou"></div>
                        <dl>
                            <dt><img src="images/001.jpg"></dt>
                            <dd>账号：coke0</dd>
                            <dd>昵称：coke0</dd>
                            <dd><a href="" class="button add">关注</a><a href="" class="button">博客</a><a href="" class="button">空间</a></dd>
                        </dl>
                        <ol>
                            最近帖子
                            <li><a href="">11</a></li>
                            <li><a href="">22</a></li>
                            <li><a href="">33</a></li>
                        </ol>
                    </div>
                </div>
            </dt>
            <dd class="username"><a href="">coke0</a></dd>
            <dd>coke0</dd>
            <dd class="level">等级：</dd>
        </dl>
    </div>
    <div class="right">
    	<div class="louceng">
        	<div class="loucengright"><a href="">#2</a> 得分：0</div>
            <div>回复于： 2013-01-23 14:05:09 </div>
        </div>
        <div class="write">
        那个大侠帮我看看啊，急着学习 
        </div>
        <div class="louceng loucengbottom">
        	<div class="loucengright"><a href="" class="aone">对我有用[0]</a> <a href="">丢个板砖[0]</a><a href=""> 引用</a> |<a href="" class="aone"> 举报</a> |<a href=""> 管理</a> | <a href="">TOP</a> </div>
            <div><a href="">专访杨刚：移动互联网是孕育下一代高科技企业的土壤</a></div>
        </div>
    </div>
</div>
<div class="content">
    <div class="left">
    	<dl>
        	<dt>
                <a href=""><img src="images/001.jpg" id="image1"></a>
                <div class="userinfohover" id="userinfohover">
                    <div class="userinfocontent">
                    <div class="divspace"></div>
                        <div class="jiantou"></div>
                        <dl>
                            <dt><img src="images/001.jpg"></dt>
                            <dd>账号：coke0</dd>
                            <dd>昵称：coke0</dd>
                            <dd><a href="" class="button add">关注</a><a href="" class="button">博客</a><a href="" class="button">空间</a></dd>
                        </dl>
                        <ol>
                            最近帖子
                            <li><a href="">11</a></li>
                            <li><a href="">22</a></li>
                            <li><a href="">33</a></li>
                        </ol>
                    </div>
                </div>
            </dt>
            <dd class="username"><a href="">coke0</a></dd>
            <dd>coke0</dd>
            <dd class="level">等级：</dd>
        </dl>
    </div>
    <div class="right">
    	<div class="louceng">
        	<div class="loucengright"><a href="">#2</a> 得分：0</div>
            <div>回复于： 2013-01-23 14:05:09 </div>
        </div>
        <div class="write">
        那个大侠帮我看看啊，急着学习 
        </div>
        <div class="louceng loucengbottom">
        	<div class="loucengright"><a href="" class="aone">对我有用[0]</a> <a href="">丢个板砖[0]</a><a href=""> 引用</a> |<a href="" class="aone"> 举报</a> |<a href=""> 管理</a> | <a href="">TOP</a> </div>
            <div><a href="">专访杨刚：移动互联网是孕育下一代高科技企业的土壤</a></div>
        </div>
    </div>
</div>
<div class="content">
    <div class="left">
    	<dl>
        	<dt>
                <a href=""><img src="images/001.jpg" id="image1"></a>
                <div class="userinfohover" id="userinfohover">
                    <div class="userinfocontent">
                    <div class="divspace"></div>
                        <div class="jiantou"></div>
                        <dl>
                            <dt><img src="images/001.jpg"></dt>
                            <dd>账号：coke0</dd>
                            <dd>昵称：coke0</dd>
                            <dd><a href="" class="button add">关注</a><a href="" class="button">博客</a><a href="" class="button">空间</a></dd>
                        </dl>
                        <ol>
                            最近帖子
                            <li><a href="">11</a></li>
                            <li><a href="">22</a></li>
                            <li><a href="">33</a></li>
                        </ol>
                    </div>
                </div>
            </dt>
            <dd class="username"><a href="">coke0</a></dd>
            <dd>coke0</dd>
            <dd class="level">等级：</dd>
        </dl>
    </div>
    <div class="right">
    	<div class="louceng">
        	<div class="loucengright"><a href="">#2</a> 得分：0</div>
            <div>回复于： 2013-01-23 14:05:09 </div>
        </div>
        <div class="write">
        那个大侠帮我看看啊，急着学习 
        </div>
        <div class="louceng loucengbottom">
        	<div class="loucengright"><a href="" class="aone">对我有用[0]</a> <a href="">丢个板砖[0]</a><a href=""> 引用</a> |<a href="" class="aone"> 举报</a> |<a href=""> 管理</a> | <a href="">TOP</a> </div>
            <div><a href="">专访杨刚：移动互联网是孕育下一代高科技企业的土壤</a></div>
        </div>
    </div>
</div>
</body>
</html>

JS实现悬浮画板思路
qq_33172029的博客
05-30 715
1）情况：最近写了一个类似window界面，鼠标左击按下（不放开），然后移动，会出现一个方框的效果（如图一），然后选中虚线框中的td（其实就是td颜色改变），这里的内容，看似简单，但是对于一个我这个前端菜鸡的后端来说，简直就是噩梦，因为需要兼容谷歌，IE11和IE8。。。，好了，实际效果图（如图二，由于系统太旧，前端界面比较丑，不用在意，看思路就好） 2）实现效果： 图一： 图二：...
JavaScript 面试题解析与代码实践
最新发布
唯见青山不见君
12-24 1079
JavaScript 面试题解析与代码实践
javascript实现的固定位置悬浮窗口实例
12-12
本文实例讲述了javascript实现的固定位置悬浮窗口。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <titl
JS实现简单悬浮框
seanennn的专栏
01-29 4150
function scall(){  document.getElementById("topdiv").style.top=(document.documentElement.scrollTop)+135+"px";  document.getElementById("topdiv").style.left=(document.documentElement.scrollLeft+docum
js 网站通用浮框
付博瀚
07-22 894
网站通用的浮框，里面内容可以自己定义。 效果展示，源码下载。
Js实现一键分享效果--悬浮框状态
weixin_34038293的博客
06-28 398
一．html框架/*整个分享区域*/ <divid="share"> /*分享区域的顶端文字描述*/ <h3><imgsrc="../img/chaohao.png">分享到...</h3> /*分享区域的的具体分享网站链接*/ &lt...
js脚本（网页浮动窗口）
m0_58085092的博客
06-05 5076
一个嵌入网页的浮动窗口，你可以学习其中思想，做一个更好的 其它内容的浮动窗口
在线演示常用javascript特效
10-30
1. 图形显示特效：通过JavaScript可以实现鼠标驱动的图片变化，比如当鼠标悬浮在图片上时，图片会根据预设规则进行变换。这种效果可以通过监听`mouseover`和`mouseout`事件来实现，动态修改图片的`src`属性或者改变...
【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享（多文件版本）
小牛itbull的博客
07-22 2405
这个版本的JQuery是对上一个版本的JQuery，使用了require.js进行了二次封装，基本上把前面的每一个框架封装成为一个单独的模块，最终的目录结构如下： 由于代码量和目录比较多，这个封装好的代码和目录已经全部上传到GitHub上面，需要的同学可以前往下载哈。 https://github.com/xiugangzhang/JavaScript-Xframe 【main.js】这...
【vue】实现自动轮播+滚轮控制
cnzzs的博客
07-03 1017
前言 有一个无缝轮播+滚轮控制的需求，找了很多的方法发现都没办法完美的实现这种效果。 用原生的js实现不是无缝滚动 用无缝滚动插件实现，发现pc端无法实现滚轮控制 目标 1 实现表格表无缝循环滚动 2 实现滚轮控制表格表数据滚动 3 掌握vue-seamless-scroll使用方式 一些思考 如何去完美的实现无缝轮播...
当前窗口中漂浮框的js代码-可见效果
weixin_30645617的博客
03-15 143
<style>.div_float img{width:100px;}</style><!--漂浮框--><div class="div_float" id="div_float"></div><script language="javascript">var oTop=0;//当前窗口的顶部var oBottom=...
AutoJs-悬浮窗的移动、控制(源码+解析)
造雾者的博客
09-28 1046
【代码】AutoJs-悬浮窗的移动、控制(源码+解析)
网页页面浮动窗口示例代码（JavaScript Code）
热门推荐
::: 移动互联网时代开发者 :::
01-16 3万+
      这个页面效果比较酷。小窗口浮动于主页面之上，您可以最小化、还原、关闭这些小窗口，或者将其拖动到主页面的任何位置。示例界面如下：            具体使用方法，看下面的这个完整的页面代码应该就知道了。//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover=orange,
一览画面中js控制弹出悬浮窗口
chuge6367的博客
05-26 590
1、jsp页面上弹出层的代码 [html] view plain copy <!--物流详情弹出页面start--> <s:iteratorvalue="lrVo"var="lr...
用JavaScript实现类似于ToolTip的悬浮框
vividboy的专栏
09-14 5299
       在使用ASP.NET的时候，有时候需要鼠标悬停在页面的某各位置的时候，或者说悬停在某个控件上的时候需要出现一个悬浮框。这个悬浮框可以是对此控件内容的详细说明，或者一些其他的信息。比如在页面中可能有一个表格，表格中的一项叫“考核标准”，那么可能你需要当鼠标移到“考核标准”对应的单元格的时候，需要出现一个对“考核标准”详细说明的悬浮框。        你可能马上会想到To
js实现页面悬浮框
weixin_30270889的博客
11-14 1390
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE html> <html> <head> <title></title> <style type="text...
html页面悬浮提示框,js实现页面悬浮框
weixin_29248611的博客
06-04 4632
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示..div1 {height:2000px;}.div2 {width:%;height:35px;background-color:#3399FF;margin-top:100px;}.div2_1{position:fixed;wi...
利用bootstrap实现悬浮窗口的效果
Try My Best 尽力而为
12-29 4875
大概是2015年最后一篇博客……   【转载请注明出处：http://raising.iteye.com/admin/blogs/2267492   靴靴~~】   经常玩社群网站的想必对这样一种场景很常见，如图：    鼠标停在某个超链接上，然后会出现一个悬浮框，内容时该账号的一些信息。   刚好最近在做一些前端的东东，涉及到类似的需求。——鼠标悬停，出现一个悬浮框，悬浮框描...
Vue.js 自定义指令，实现可以拖动的悬浮框
携手天下
07-02 1万+
Vue支持我们自己开发一些使用方法类似内置指令（如v-show、v-for等）的自定义指令，通常用在一些对底层DOM操作的地方。本文简单介绍一下自定义指令的基本用法，并实现一个指令v-drag实现悬浮框拖动功能。 一、基本用法 1）注册     类似组件，指令的注册也可分为全局注册与局部注册。顾名思义，全局注册即在项目下所有Vue组件中都可使用，局部注册则只能在当前Vue组件中使用。自定义组...
打造粒子交叉线条动态效果的Canvas特效
资源摘要信息:"粒子交叉线条Canvas特效是一款使用JavaScript实现的Canvas动画效果，当用户的鼠标移动经过指定的Canvas区域时，会触发一系列圆点连线交叉的动画效果，从而产生一种动态的视觉悬浮感。通过调整代码中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值