Jquery 弹出浮动层

原创 2011年01月18日 11:54:00

                                                               浮动层1

                                                               浮动层2

今天做了一个弹出的浮动层,当鼠标移动到控件上时显示,移开时隐藏。代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GOTOJP.WEB.Microblog.WebForm1" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        /*勋章说明*/
        #div0{
         position:absolute;
         display:none;
         width:355px;
            height:150px;
         z-index:9999;
         line-height:140%;
        }

        #div1
        {
            width:355px;
            height:150px;
            border:1px solid #CCCCCC;
            background-color:#FFFFFF;
            }
   
        #div2
        {
            float:left;
            width:240px;
            height:100px;
            margin:10px 5px 5px 0;
             }  
        #em1
        {
         display:block;
            width:0;
            height:0;
            overflow:hidden;
            border-bottom:10px solid #CCCCCC;
            border-left:10px dotted transparent;
            border-right:10px dotted transparent;
            position:relative;
            left:45px;
        } 
    </style>
    <script type="text/javascript" src="JS/jquery-1.4.1.js"></script>
    <script type="text/javascript" language="javascript">
        function showDiv(obj) {
            var content = "<div id=/"div0/"><div id=/"em1/"></div><div id=/"div1/">显示的内容可以写在这里</div></div>";
            $("body").append(content);
            //提示类浮动框最重要的是计算浮动框的位置. 通过事件对象获取到事件源, 使用offset()函数计算事件源相对于document的位置:
            var top = $(obj).offset().top;
            var left = $(obj).offset().left

            $("#div0").css("top", top + 30 + "px").css("left", left - 40 + "px");
            $("#div0").show();
        }

        function removeDiv() {
            $("#div0").remove();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input id="Button1" type="button" value="button" onmouseover="showDiv(this)" onmouseout="removeDiv();"/>
        <input id="Button2" type="button" value="button" onmouseover="showDiv(this)" onmouseout="removeDiv();"/>
        <input id="Button3" type="button" value="button" onmouseover="showDiv(this)" onmouseout="removeDiv();"/>
        <input id="Button4" type="button" value="button" onmouseover="showDiv(this)" onmouseout="removeDiv();"/>
        <input id="Button5" type="button" value="button" onmouseover="showDiv(this)" onmouseout="removeDiv();"/>
    </form>
</body>
</html>

 

 

简单的 jQuery 浮动层随窗口滚动滑动插件实例

写了一个非常简单的 jQuery 插件实例  浮动层随窗口滚动滑动 无标题文档 (function($){ $.fn.floatAutoScroll = function(){ ...
  • zsjangel
  • zsjangel
  • 2014年02月03日 14:36
  • 3608

html弹出浮动层

LSN                   $(function () {      $(".showbtn").click(function () {      ...
  • u014151362
  • u014151362
  • 2016年06月08日 17:53
  • 944

JS弹出一个相对位置的浮动层

需求:点击一个按钮之后在按钮下方显示一个浮出层。#thelayer{ width:300px;height:98px;border:#E4F5FD 1px solid;z-index:2;positi...
  • xinqinglhj
  • xinqinglhj
  • 2010年05月27日 22:36
  • 5135

jquery 弹出浮层(div) + 遮蔽层 方法一

http://www.w3.org/1999/xhtml" >     test                 .pop-box {                z-inde...
  • orichisonic
  • orichisonic
  • 2015年12月16日 12:55
  • 2246

jQuery实现页面滚动时层智能浮动定位

一、应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面...
  • china_skag
  • china_skag
  • 2014年05月22日 13:10
  • 848

点击链接后,弹出另一个浮动窗口,全屏变暗遮罩效果,适用于下载站

效果图 首先,要引入jquery及jquery.imagePreview.1.0.js插件 jquery.js 自己下载 而jquery.imagePreview.1...
  • viqecel
  • viqecel
  • 2016年10月23日 16:55
  • 1219

jQuery实现网页右下角悬浮层提示

最近有同事提到类似网页右下角的消息悬浮提示框的制作。我之前也做过一个类似的例子,很简单。是仿QQ消息。现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子。是D...
  • xmt1139057136
  • xmt1139057136
  • 2015年05月07日 21:19
  • 3188

js 鼠标点击一个按钮显示div的浮动框,点击页面其他任何地方后,隐藏浮动框

在本文为大家介绍两种思路实现点击页面其它地方隐藏该div,第一种是对document的click事件绑定事件处理程序..详情请参考本文 思路一 第一种思路分两步 第一步:对document的c...
  • mingliangniwo
  • mingliangniwo
  • 2015年01月14日 14:48
  • 11163

jquery 弹出浮层(div) + 遮蔽层

.pop-box {               z-index: 9999; /*这个数值要足够大,才能够显示在最上层*/             margin-top: 30px;    ...
  • ntc10095
  • ntc10095
  • 2016年10月21日 16:42
  • 494

js 弹出浮动层

function tanchu(){ document.getElementById("opacitys").style.display='block'; document.getElemen...
  • taolong001
  • taolong001
  • 2014年05月02日 23:36
  • 311
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery 弹出浮动层
举报原因:
原因补充:

(最多只允许输入30个字)