`
zpball
  • 浏览: 899442 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一个简单的动态关闭DIV框的效果,带关闭按钮

阅读更多
jquery设置获取div位置


var top=obj.offset().top;
var left=obj.offset().left;
$("#mapDiv").css({'top':top-20,'left':left+50});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<script type="text/javascript" src="http://www.mizuan.net/js/jquery.min.js"></script>
<script type="text/javascript">
function closereception(){
$("#reception").slideUp("normal");
}
</script>
<style type="text/css">
#reception{clear:left;width:843px;height:23px;line-height:23px;vertical-align:middle;padding:10px 0 10px 5px;position:relative;margin-bottom:10px;border:1px solid #ddd;background:#f8f8f8 url('http://www.mizuan.net/image/reception.gif') no-repeat}
#reception img{vertical-align:middle;border:0}
</style>
</HEAD>
<BODY>
<div id="reception">
<div id="closeb" style="position:absolute;right:4px;top:4px">
<a href="javascript:;" onclick="closereception();" title="关闭"><img src="http://www.mizuan.net/image/closes.gif" /></a>
</div>
<div style="padding-left:130px">
<a href="http://www.mizuan.net/about/contact.asp?#msn" title="MSN在线通—网页客服"><img src="http://www.mizuan.net/image/msnonline.gif" /></a>
</div>
</div>
</BODY>
</HTML>


分享到:
评论

相关推荐

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...

    《程序天下:JavaScript实例自学手册》光盘源码

    12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 ...

    程序天下:JavaScript实例自学手册

    12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 ...

    javascript实现遮罩层动态效果实例

    我这里实现的效果是:点击按钮弹出遮罩层,遮罩层下的内容不可选,并且登录框随着鼠标滚轮的下滑,动态的浮动到页面某个位置,点击关闭按钮关闭遮罩层。 这是鼠标滚动下滑到页面中间某部分时画面。虽然界面简单颜色...

    JS实现动态移动层及拖动浮层关闭的方法

    本文实例讲述了JS实现动态移动层及拖动浮层关闭的方法。分享给大家供大家参考。具体实现方法如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;动态移动的层&lt;/title&gt; &lt;body bgcolor="#ADBAC9"&gt; &lt;div ...

    jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

    代码如下: $(document).ready(function(){ $(‘#tabs’).tabs({add:addEventHandler}); //给tabs块绑定addEventHandler事件 $(‘#newtabs’).... } $(‘&lt;div id=”new-tab-‘+tabCounter+&gt;’+’New tab’+tabCounter+

    jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    主要介绍了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法,涉及jQuery响应鼠标事件动态改变页面元素样式的功能,需要的朋友可以参考下

    JavaScript网页特效范例宝典源码

    实例007 为弹出的窗口加入关闭按钮 11 实例008 关闭弹出窗口时刷新父窗口 12 实例009 关闭IE主窗口时,不弹出询问对话框 13 1.2 弹出网页对话框 14 实例010 弹出网页模式对话框 14 实例011 弹出全屏显示的网页模式...

    dreamweaver的各种组件

    History Go 2.0 这个Behavior的作用是在网页中增加一个“History Go”的javascri pt,从而可以实现类似于浏览器中的“前进”和“后退”按钮的功能。 Print 3.0 在网页中加入一个打印目标页面的功能,能够呼出打印...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    --我们做了优化,现在要使一个Asp.net的按钮能够AJAX提交,你不需要做任何设置(PageManager的属性EnableAjax为true即可,这是默认属性)。 +PageManager的实例方法AddAjaxUpdateControl改名为...

    根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z

    根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽

    基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

    1. 测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 1.2. 实践 ... &lt;div class=container-fluid&gt; &lt;div class=row&gt; ...&lt;div class=col-xs-2&gt; &lt;div class=pannel-group id=accordion&gt; ...div class=panel-he

    delphi 开发经验技巧宝典源码

    0256 取消窗体标题栏的关闭按钮 172 0257 如何实现闪动的标题栏文字 172 0258 怎样动态修改窗体图标 172 8.2 窗体的动态显示 173 0259 如何实现QQ窗体 173 0260 实现窗体的淡入淡出 173 0261 实现窗体...

    如何使用jquery easyui创建标签组件

    标签一次只能显示一个面板,每个面板都有标题、图表和关闭按钮。当标签被选中之后,会显示相应面板的内容。 使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板。 &lt; div class=easyui-tabs xss=removed&gt; &lt...

    史上最强JavaScript日历控件正式版(无偿的永久的提供给大家免费使用,含全部源代码)

    当日期框中的值不符合格式时,系统会尝试自动修复,如果修复失败会根据您设置的纠错处理模式进行处理,错误判断功能非常智能它可以保证用户输入的值是一个合法的值 为编程带来方便 如果el的值是this,可省略,即所有的...

    delphi 开发经验技巧宝典源码06

    0256 取消窗体标题栏的关闭按钮 172 0257 如何实现闪动的标题栏文字 172 0258 怎样动态修改窗体图标 172 8.2 窗体的动态显示 173 0259 如何实现QQ窗体 173 0260 实现窗体的淡入淡出 173 0261 实现窗体...

    精通javascript

    2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....

    精通JavaScript

    1.本书附源代码共计381个,其运行环境如下: IE 5或更高版本 Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看...

Global site tag (gtag.js) - Google Analytics