如何制作弹出层

cjfriends 2010-11-16 04:29:17
就想csdn回复的帖子一样，在鼠标移到每个回复者的头像上时会弹出一个层，上面显示一些信息？弹出层很好做，但如何定位才能使层始终出现在头像的旁边？
请各位高手指点一下或者给个例子，不胜感激！
...全文
177 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
cjfriends 2010-11-16
  • 打赏
  • 举报
 回复
下班了，结贴了
cjfriends 2010-11-16
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 snowwinner 的回复:]
我晕倒了为什么我那么实用的东西没人用汗颜
[/Quote]

呵呵，不是我不用，而是主管不用，我说了不算
snowwinner 2010-11-16
  • 打赏
  • 举报
 回复
我晕倒了为什么我那么实用的东西没人用汗颜
TearsStoneJava 2010-11-16
  • 打赏
  • 举报
 回复
====1、将以下的代码加入到HEML的<head></head>之间：

<!-- 以下代码是设定smile的代码 -->
<script LANGUAGE="JavaScript">
var newtop=0
var newleft=0
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
function doMouseMove() {
layerName = 'iit'
eval('var curElement='+layerRef+'["'+layerName+'"]')
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')
eval('curElement'+styleSwitch+'.visibility="visible"')
eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth')
eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight')
eval('height=curElement'+styleSwitch+'.height')
eval('width=curElement'+styleSwitch+'.width')
width=parseInt(width)
height=parseInt(height)
if (event.clientX > (document.body.clientWidth - 5 - width))
{
newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width
}
else
{
newleft=document.body.scrollLeft + event.clientX
}
eval('curElement'+styleSwitch+'.pixelLeft=newleft')
if (event.clientY > (document.body.clientHeight - 5 - height))
{
newtop=document.body.clientHeight + document.body.scrollTop - 5 - height
}
else
{
newtop=document.body.scrollTop + event.clientY
}
eval('curElement'+styleSwitch+'.pixelTop=newtop')
}
document.onmousemove = doMouseMove;
</script>

====2、将以下代码加入到HEML的<body></body>之间：

<!-- 以下代码是设定此页的鼠标样式代码 -->
<script language="javascript">
if (navigator.appName == "Netscape") {
}
else
{
document.write('<div ID=OuterDiv>')
document.write('<img ID=iit src="想要显示的图片.gif" STYLE="position:absolute;TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;">')
document.write('</div>')
}
</script>
cjfriends 2010-11-16
  • 打赏
  • 举报
 回复
谢谢 muheye，谢谢 yhtapmys，在你们的基础上载略加修改就是我要的效果了，感谢所有回帖的兄弟姐妹
cjfriends 2010-11-16
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 tcwsyt 的回复:]
http://topic.csdn.net/u/20100223/17/edb27cb3-24ff-461d-9cff-eb8b8816b6bf.html
[/Quote]

这个我用过，它默认的是click事件，改成mouseover 事件之后不好使，所以来这儿求教了
yhtapmys 2010-11-16
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 cjfriends 的回复:]
谢谢 muheye ，你的代码我看了，很好，但有一点问题，当我的鼠标移动到其中一个div上时，在这个div的左边 弹出层，这个弹出层是固定的，不随鼠标移动。JS很弱，不知如何修改你的代码
[/Quote]



<!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>无标题文档</title>

    <style type="text/css">

        .divArr{

            width:100px;

            height:100px;

            background:#CCC;

            margin:20px;

        }

        #divShow{

            width:200px;

            height:200px;

            background:#999;

            position:absolute;

            display:none;

        }

    </style>

    <script type="text/javascript">

        function show(mydiv){

            var divShow = document.getElementById('divShow');

            divShow.style.top = mydiv.offsetTop + 50 + "px";

            divShow.style.left = mydiv.offsetLeft + 50 + "px";

            

            divShow.style.display = "block";

        }



        function hidden(){

            var divShow = document.getElementById('divShow');

            divShow.style.display = "none";

        }

    </script>

</head>

<body>

    <div class="divArr" id="div1" onmouseover="show(this)" onmouseout="hidden()">这是第一个DIV</div>

    <div class="divArr" id="div1" onmouseover="show(this)" onmouseout="hidden()">这是第二个DIV</div>

    <div class="divArr" id="div1" onmouseover="show(this)" onmouseout="hidden()">这是第三个DIV</div>

    <div id="divShow">这是浮动的DIV</div>

</body>

</html>
snowwinner 2010-11-16
  • 打赏
  • 举报
 回复
最实用的方法：给你那个头像上加个title属性不就可以了
灬上海爽爷 2010-11-16
  • 打赏
  • 举报
 回复
http://topic.csdn.net/u/20100223/17/edb27cb3-24ff-461d-9cff-eb8b8816b6bf.html
cjfriends 2010-11-16
  • 打赏
  • 举报
 回复
谢谢 muheye ，你的代码我看了，很好，但有一点问题，当我的鼠标移动到其中一个div上时，在这个div的左边 弹出层，这个弹出层是固定的，不随鼠标移动。JS很弱，不知如何修改你的代码
tang871015 2010-11-16
  • 打赏
  • 举报
 回复
关键你是要获得当前鼠标移动的位置，在鼠标移动到图像上时则获取该鼠标的位置，并弹出一个div，让这个div的left和top等于你鼠标停留的那个位置
muheye 2010-11-16
  • 打赏
  • 举报
 回复
刚做了一尝试，代码如下，希望能给楼主一点启发：


<!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>无标题文档</title>

	<style type="text/css">

    	.divArr{

			width:100px;

			height:100px;

			background:#CCC;

			margin:20px;

		}

		#divShow{

			width:200px;

			height:200px;

			background:#999;

			position:absolute;

			display:none;

		}

    </style>

	<script type="text/javascript">

    	function show(event){

			var evt = event || window.event;

			var divShow = document.getElementById('divShow');

			divShow.style.top = evt.clientY + 10 + "px";

			divShow.style.left = evt.clientX + 10 + "px";

			

			divShow.style.display = "block";

		}

		function move(event){

			show(event);

		}

		function hidden(){

			var divShow = document.getElementById('divShow');

			divShow.style.display = "none";

		}

    </script>

</head>

<body>

	<div class="divArr" id="div1" onmouseover="show(event)" onmousemove="move(event)" onmouseout="hidden()">这是第一个DIV</div>

    <div class="divArr" id="div1" onmouseover="show(event)" onmousemove="move(event)" onmouseout="hidden()">这是第二个DIV</div>

    <div class="divArr" id="div1" onmouseover="show(event)" onmousemove="move(event)" onmouseout="hidden()">这是第三个DIV</div>

    <div id="divShow">这是浮动的DIV</div>

</body>

</html>
CSS3网页设计与制作(12-18)：缓动/变形/动画/弹性盒/多列/响应式
CSS3规范并不是独立的，它重复了CSS的部分内容，但在其基础上进行了很多的增补与修改。CSS3与之前的几个版本相比，其变化是革命性的，让我们看到网页样式发展的前景，让我们更具有方向感、使命感。本课程是《CSS3网页设计与制作》系列课程的12-18章内容，主要包含缓动、变形、动画、弹性盒、多列布局、响应式布局等知识点
Vue自定义弹出层（信息提示）组件
弹出层（不需要的可以在数据中注掉）效果如下： 弹出层（信息提示）组件： <template> <div class="PopLayerBg"> <div class="PopLayer"> <div class="popTitle" v-if="popData.title != '' && popData.title != undefined">{{popData.title}}</div> <div class=.
WordPress 教程：在 WordPress 后台使用 ThickBox 制作弹出层
最近在项目中进行 WordPress 后台开发的时候，需要制作弹出层，经过一轮测试，发现还是 WordPress 原生支持的 ThickBox 比较方便。 WordPress 的 ThickBox jQuery 库 WordPress 后台自带的 ThickBox jQuery 库是经过 WordPress 修改的，比如目前插件更新提示的详情链接就是使用 ThickBox 做的。
微信小程序——实现简单弹出层
在制作小程序项目时想要弄一个有遮罩层的弹出框，但是写一个这个就弄一个组件比较麻烦，就简单手写一个，本人手拙，要是那点写错了，大家多多指点。
01.cocos2d-x制作弹出层（Layer）
//1.点击后直接在当前页面添加Layerauto layer = SetLayer::create(); this->addChild(layer);2.设置弹窗界面SetLayer.h #ifndef __SET_LAYER_H__ #define __SET_LAYER_H__#include "cocos2d.h" #include "cocostudio/CocoStudio.h" #in
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章