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

最新推荐文章于 2022-12-03 09:19:38 发布
最新推荐文章于 2022-12-03 09:19:38 发布
阅读量527 收藏 2
点赞数
分类专栏： javascript原创 文章标签： javascript JavaScript Javascript javaScript JAVASCRIPT 悬浮框 简单原理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coke0/article/details/8549315
版权 
<!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>

coke0
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 网站通用浮框
付博瀚
07-22 860
网站通用的浮框，里面内容可以自己定义。 效果展示，源码下载。
Js实现一键分享效果--悬浮框状态
weixin_34038293的博客
06-28 360
一．html框架/*整个分享区域*/ <divid="share"> /*分享区域的顶端文字描述*/ <h3><imgsrc="../img/chaohao.png">分享到...</h3> /*分享区域的的具体分享网站链接*/ &lt...
jquery/js实现浮窗内容操作
weixin_45747499的博客
12-03 1720
js/jquery实现悬浮窗
原生js 实现鼠标跟随显示悬浮框信息
热门推荐
逆风优雅的博客
08-04 1万+
原生js 实现鼠标跟随显示悬浮框信息
javascript实现循环广告条效果
10-18
主要为大家详细介绍了javascript实现循环广告条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现元素滚动条到达一定位置循环追加内容
10-18
下面小编就为大家分享一篇JavaScript实现元素滚动条到达一定位置循环追加内容，具有很好的参考价值，希望对大家有所帮助
JavaScript正则表达式exec/g实现多次循环用法示例
10-20
主要介绍了JavaScript正则表达式exec/g实现多次循环用法,结合实例形式分析了javascript正则表达式g修饰符相关使用技巧,需要的朋友可以参考下
用javascript实现鼠标框选
10-30
下面是一个简单的示例代码，演示如何使用javascript实现鼠标框选功能： ``` ; charset=gb2312"> 鼠标框选框 ;"> ;base64,..."> ... ``` 在上面的代码中，我们首先创建了一个div元素，并将其样式设置为相应的...
Javascript实现苹果悬浮虚拟按钮
10-22
这个简单的JavaScript实现可以作为一个基础，开发者可以根据实际需求对其进行扩展，比如添加更多的交互功能，或者改变按钮的响应行为。例如，可以添加触摸事件的支持，使其在触摸设备上也能正常工作。还可以考虑添加...
使用JS制作论坛发帖
weixin_63112037的博客
08-29 1406
③单击“发布”按钮，新发布的帖子显示在列表的第一个，新帖子显示头像、标题、版块和发布时间。③使用appendChild ( )把头像、标题、版块、时间插入到页面中。②使用函数floor( )和random( )随机获取发帖者的头像。②在标题框中输入标题，选择所属版块，输入帖子内容。④设置value值为空来清空当前输入框中的内容。⑤使用style属性隐藏发新贴界面。①单击我要发帖，弹出发帖页面。①使用数组保存发帖者的头像。...
JS实现简单悬浮框
seanennn的专栏
01-29 4108
function scall(){  document.getElementById("topdiv").style.top=(document.documentElement.scrollTop)+135+"px";  document.getElementById("topdiv").style.left=(document.documentElement.scrollLeft+docum
JS右侧悬浮框
weixin_43297986的博客
10-22 4409
Js右侧悬浮框 让一个div始终悬浮在右下角 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Documen
html页面悬浮提示框,js实现页面悬浮框
weixin_29248611的博客
06-04 4517
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示..div1 {height:2000px;}.div2 {width:%;height:35px;background-color:#3399FF;margin-top:100px;}.div2_1{position:fixed;wi...
js实现页面悬浮框
weixin_30270889的博客
11-14 1356
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE html> <html> <head> <title></title> <style type="text...
js元素置顶悬浮
brook_的博客
06-21 6091
先展示下,最简短的jquery实现方式 // 获取元素距页面的高 var info_head_top = $("#info_head").offset().top; // 监听页面滚动 $(document).scroll(function(){ // 获取页面滚动距离 var scrtop = $(this).scrollTop() if(scrtop&gt;info_...
利用bootstrap实现悬浮窗口的效果
Try My Best 尽力而为
12-29 4728
大概是2015年最后一篇博客……   【转载请注明出处：http://raising.iteye.com/admin/blogs/2267492   靴靴~~】   经常玩社群网站的想必对这样一种场景很常见，如图：    鼠标停在某个超链接上，然后会出现一个悬浮框，内容时该账号的一些信息。   刚好最近在做一些前端的东东，涉及到类似的需求。——鼠标悬停，出现一个悬浮框，悬浮框描...
基于jQuery实现首页悬浮框
肖帅的博客
07-12 999
基于jQuery实现首页悬浮框，如下图所示 1，在页面中引入jQuery.bay-window.js，jQuery.bay-window.js的代码如下： !function($){ /** * Description: jquery飘窗插件，可自适应浏览器宽高的变化 * Author: ddqre12345 * CreateTime: 2017.5.3 * param: args={startL:default, startT:default, angle:-Math.PI/
vue3 relation-graph 实现线条悬浮框
最新发布
03-30
Vue3 Relation Graph 是一个基于 Vue3 和 D3.js 的关系图谱组件库，可以用于展示和操作复杂的关系网络数据。它提供了丰富的功能和交互效果，其中包括实现线条悬浮框的功能。 要实现线条悬浮框，你可以按照以下步骤进行操作： 1. 安装依赖：首先，在你的 Vue 项目中安装 vue3-relation-graph 组件库。可以使用 npm 或者 yarn 进行安装。 2. 导入组件：在需要使用关系图谱的组件中，导入 vue3-relation-graph 组件。 ```javascript import { RelationGraph } from 'vue3-relation-graph'; ``` 3. 准备数据：准备好你的关系网络数据，包括节点和边的信息。可以根据你的需求，将数据存储在组件的 data 中或者从后端获取。 4. 使用组件：在模板中使用 RelationGraph 组件，并将准备好的数据传递给组件。 ```html <template> <RelationGraph :nodes="nodes" :edges="edges" /> </template> ``` 5. 自定义线条悬浮框：通过配置 RelationGraph 组件的 props，你可以自定义线条悬浮框的内容和样式。可以使用 slot 来自定义线条悬浮框的内容。 ```html <template> <RelationGraph :nodes="nodes" :edges="edges"> <template #edge-tooltip="{ edge }"> <div class="tooltip"> <p>{{ edge.label }}</p> <p>{{ edge.weight }}</p> </div> </template> </RelationGraph> </template> ``` 在上面的例子中，我们使用了一个名为 `edge-tooltip` 的 slot 来自定义线条悬浮框的内容。在这个 slot 中，我们可以访问到当前悬浮的边的信息，并根据需要进行展示。 这样，当用户将鼠标悬停在关系图谱的线条上时，就会显示自定义的线条悬浮框。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值