本实例使用Javascript实现右下角可关闭最小化div，可以用于展示推荐内容，效果预览网址：http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm
效果图片：

完整源代码：

 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <title>js实现右下角可关闭最小化div--柯乐义</title>

 <script src="http://keleyi.com/keleyi/phtml/xuanfudiv/3/msg.js" type="text/javascript"></script>

 <style type="text/css" media="screen">

 /* 右下角跳出的广告 */

 #downmsg_emessage{POSITION: fixed;_position:absolute; z-index:100; bottom:0;right:0; background:url(http://keleyi.com/keleyi/phtml/xuanfudiv/3/down_msg_bg.gif) no-repeat left top;width:225px;}

 #donwmsg_head{float:left; display:inline; font-size:12px;color:#FFFFFF;margin-left: 26px;margin-top: 6px;}

 #downmsgBar .close{float:right;width:11px;height:11px;margin-top:6px;display:block;margin-right:5px;}

 #downmsgBar{height:25px;}

 #donwmsg_content{height:162px;overflow:hidden;}

 #donwmsg_content ul{font-size:12px;color:#007cc1;    top: 0px;padding:0px 2px 0 6px;left: 6px;line-height:180%; height:110px; overflow:hidden;}

 #donwmsg_content ul li{background:url(http://keleyi.com/keleyi/phtml/xuanfudiv/3/down_msg_bg.gif) no-repeat -100px -245px;text-indent:13px;}

 #donwmsg_content ul li a{color:#007cc1;}

 #donwmsg_content ul .ll a{color:#a10000;font-weight:bold;}

 #donwmsg_content p{position:absolute;left: 13px;top: 157px;}

 #donwmsg_content .lb{padding:0px; text-align:center;}

 #donwmsg_content .lb a{font-size:12px;color:Blue}

 a.msg-hidden-btn-2{width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;background:url(http://keleyi.com/keleyi/phtml/xuanfudiv/3/down_msg_bg.gif) no-repeat -0px -250px;}

 a.msg-hidden-btn-1{ width:11px; height:11px;overflow:hidden;float:right;display:block;margin-right:5px;margin-top:6px;background:url(http://keleyi.com/keleyi/phtml/xuanfudiv/3/down_msg_bg.gif) no-repeat -50px -250px;}

 </style>

 </head>

 <body>

 <div id="downmsg_emessage" style="DISPLAY: block">

 <div id="downmsgBar">

 <div id="donwmsg_head">柯乐义推荐内容</div><a class="close" href="javascript:closeDiv()"></a><a class="msg-hidden-btn-1" id="msg_hidden_btn" href="javascript:showHideDiv()">&nbsp;</a></div>

 <div id="donwmsg_content" style="DISPLAY: block; HEIGHT: 162px">

 <ul>

 <li class="ll"><a href="http://keleyi.com/a/bjac/768f469b95b61487.htm" >单行文字间歇向上滚动</a></li>

 <li><a href="http://keleyi.com/a/bjac/a6d651710217f7a0.htm" >jQuery UI修饰title气泡</a></li>

 <li><a href="http://keleyi.com/a/bjac/bf0eb8c02085b10d.htm" >jquery清空textarea等输入框</a></li>

 <li><a href="http://keleyi.com/a/bjac/939631bb07adb4dc.htm" >jquery关灯特效</a></li>

 <li><a href="http://keleyi.com/a/bjac/7e8897e5ec0849e9.htm" >可改变大小DIV层</a></li>

 </ul>

 <div class="lb"><a href="http://keleyi.com/menu/jquery/" target="_blank">jQuery</a> 　 <a href="http://keleyi.com/menu/javascript/" target="_blank">Javascript</a> 　 <a href="http://keleyi.com/menu/cms/" target="_blank">CMS</a> </div>

 </div>

 </div>

 </body>

 </html>

文本转载自柯乐义： http://keleyi.com/a/bjac/4r5tcg7v.htm

js实现右下角可关闭最小化div的更多相关文章

  1. 2017年11月20日 WinForm窗体 窗口无边框可移动&&窗口阴影 控制窗口关闭/最小化

    弹框 MessageBox.Show(); 清空 clear() 字符串拼接 string 公共控件 button 按钮 checkbox 复选框 checklistbox 多个复选框 combobo ...

  2. JS网站右下角悬浮视窗可关闭广告

    效果体验:http://hovertree.com/texiao/js/4.htm 网站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chro ...

  3. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  4. C# 设置程序最小化到任务栏右下角，鼠标左键单击还原，右键提示关闭程序

    首先设置程序最小化到任务栏右下角 先给窗口添加一个notifyIcon控件 为notifyIcon控件设置ICO图标(不设置图标将无法在任务栏显示) 给notifyIcon控件添加点击事件 然后是最小 ...

  5. 转 原生js canvas实现苹果电脑mac OS窗口最小化效果

    http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458  很多资料 ,前 ...

  6. js写的数码时钟，在“最小化”浏览器 或者 “切换网页”是动画效果好像不对

    一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...

  7. iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. nw.js自定义最小化图标的click事件

    选择frameless时,最小化和关闭按钮的点击事件需要自己来做,办法是: /* * 下面两个模块一定要引入到js文件中 */ var gui = require('nw.gui'); var win ...

  9. IE6及以上版本fixed问题解决方案，页面右下角固定页面，可以最大化、最小化、正规显示

    在窗口固定位置显示内容使用fixed,但是 IE 6 不支持,后来我搜了很多方法,都没有作用,后来类比着一个网站的代码,使用absolute .z-index解决了问题. 页面div结构: <d ...

随机推荐

  1. Uiautomator 2.0之UiDevice新增API学习小记

    1. InstrumentationRegistry类 1.1. 类说明: 一个暴露的注册实例,持有instrumentation运行的进程和参数,还提供了一种简便的方法调用instrumentati ...

  2. C#设计模式系列：建造者模式（Builder）

    1.建造者模式简介 1.1>.定义 建造者模式(Builder)将复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 1.2>.使用频率 中低 1.3>.原型模式应用 ...

  3. Android调用Jni,非常简单的一个Demo

    step1:创建一个android项目       Project Name:jnitest       Build Target: Android 1.6       Application Nam ...

  4. Ubuntu杂记——Ubuntu自带拼音输入发杂乱不堪

    打开终端,用管理员权限输入ibus-daemon -drx,重启即可

  5. 软件工程 Android小游戏 猜拳大战

    一.前言 最近学校举办的大学生程序设计竞赛,自己利用课余时间写了一个小游戏,最近一直在忙这个写这个小游戏,参加比赛,最终是老师说自己写的简单,可以做的更复杂的点的.加油 二.内容简介 自己玩过Andr ...

  6. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. C#运用ThoughtWorks生成二维码

    在现在的项目中,较多的使用到二维码,前面介绍过一篇使用Gma生成二维码的操作,现在介绍一个第三方组件,主要介绍生成二维码,二维码的解析,以及对二维码的相关信息的选择,现在介绍ThoughtWorks用 ...

  9. java枚举类型学习

    用的不多,但用的时候仅仅简单的使用,不太明白原理,今天就系统的学一下枚举.参考:java编程思想. Update: 枚举可以当做数据字典来存储,通常只要一个字段即instance本身,toString ...

  10. 【UWP开发】一个简单的Toast实现

    Toast简介 在安卓里Toast是内置原生支持,它是Android中用来显示显示信息的一种机制.它主要用于向用户显示提示消息,没有焦点,显示的时间有限,过一定的时间就会自动消失.在UWP中虽然没有原 ...