本实例使用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. SQL Server 无法生成 FRunCM 线程。请查看 SQL Server 错误日志和 Windows 事件日志

    1.IP地址配置不正确: 打开 Microsoft SQL Server 2005配置工具下的SQL Server Configuration Manager,选择MSSQLSERVER协议, 然后双 ...

  2. AngularJS之代码风格36条建议【一】（九）

    前言 其实在新学一门知识时,我们应该注意下怎么书写代码更加规范,从开始就注意养成一个良好的习惯无论是对于bug的查找还是走人后别人熟悉代码都是非常好的,利人利己的事情何乐而不为呢,关于AngularJ ...

  3. 使用Ubuntu 12.04作为日常电脑环境

    搜狗输入法出来之后,我觉得有必要写一篇博客说明一下,如何使用Ubuntu作为日常的电脑系统.我使用的Ubuntu版本是12.04,没有使用Ubuntukylin,因为的电脑比较老,使用那个版本,电脑有 ...

  4. 浅谈web语义化

    在前端的编程道路上,是否听过html的结构语义化? 是否觉得自己前端嘛,只要做出炫酷的效果,编写出牛逼的JavaScript代码就ok啦.div+css所向无敌,干嘛要用其他标签呢. 是啊,正如上面所 ...

  5. jQuery架构剖析

    对于jQuery的整体架构,经典之处有三: 1.jQuery的无new构建 2.jQuery的链式调用 3.jQuery的插件接口 想必兄弟姐妹们也觉得这架构不错哈,但有时又畏惧去拜读大量的jQuer ...

  6. 关于在BAE上部署ThinkPHP框架的问题

    现在有点小兴奋,因为在在BAE上部署ThinkPHP框架的问题快折腾一天了,午觉都没睡,不过没白整总算有点结果.不扯淡了,直入正题吧. 之前熟悉ThinkPHP框架,想在BAE上用ThinkPHP做点 ...

  7. es6新特性分享

    1.字符串查找es5使用是indexOf() 返回字符第一次出现的位置int值es6新增了3个方法:includes()/startsWith()/endWith()返回bool值includes = ...

  8. struts2学习笔记--拦截器(Interceptor)和登录权限验证Demo

    理解 Interceptor拦截器类似于我们学过的过滤器,是可以在action执行前后执行的代码.是我们做web开发是经常使用的技术,比如权限控制,日志.我们也可以把多个interceptor连在一起 ...

  9. Bootstrap Navbar应用及源码解析

    目的: 用Bootstrap Navbar component 实现一个响应式导航 理解Bootstrap Navbar component是如何工作的(不包括collepse.js) 清楚自己添加一 ...

  10. CocosStudio文件解析工具CsdAnalysis

    起因 因为工作需要,所以需要使用CocosStudio来制作界面动画什么的.做完了发现需要找里边对象的时候会有很长一串代码,感觉不是很爽.之前写OC代码的时候可以吧程序中的对象指针跟编辑器中的对象相对 ...