本实例使用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. salesforce 零基础学习（四十七） 数据加密简单介绍

    对于一个项目来说,除了稳定性以及健壮性以外,还需要有较好的安全性,此篇博客简单描述salesforce中关于安全性的一点小知识,特别感谢公司中的nate大神和鹏哥让我学到了新得知识. 项目简单背景: ...

  2. [译]AngularJS中DOM操作

    再翻译一篇干货短文,原文:AngularJS jQuery 虽然Angularjs将我们从DOM的操作中解放出来了,但是很多时候我们还是会需要在controller/view加载之后执行一些DOM操作 ...

  3. thinkPHP入门

    什么是框架 框架就是一定结构的代码,框架提供一个开发web程序的基础架构以及常用的功能 代码,PHP框架的web程序开发拜倒了流水线上. php框架就是一定要按别人规定好的架构编写. php开发框架有 ...

  4. Jetty Maven Plugin配置

    官方文档:http://www.eclipse.org/jetty/documentation/current/jetty-maven-plugin.html#maven-config-https 1 ...

  5. IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法

    在 IOS 开发当中经常碰到 whose view is not in the window hierarchy 的错误,该错误简单的说,是由于 "ViewController" ...

  6. java泛型上下限

    前言: java的泛型上下限不是很好理解,尤其像我这种菜鸡.反反复复看了好几遍了...,真是... 一.简单的继承体系 class Person{} class Student extends Per ...

  7. 关于SubSonic3.0插件使用实体进行更新操作时（执行T.Update()或T.Save()），某些列无法进行修改操作的问题处理

    SubSonic3.0插件在创建实体后,对实体进行赋值操作时,为了去除一些不必要更新的字段,减少更新的内容,会将更新内容与默认值进行比较,如果默认值与当前更新的内容相等时,则不提交更新本列,这主要是为 ...

  8. 关于Simple_html_dom的小应用

    今天一同学给我推荐了本书,说是刚出不久,内容还不错,是心灵鸡汤类的书,于是按捺不住就像在网上下一本,可是木有资源肿么办.只有在线看的,作为一个准码农,所以甭废话了,咱得用代码解决问题对吧…… 1.工欲 ...

  9. php对表格进行批量操作如全选反选删除功能

    <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...

  10. JavaWeb路径问题打包总结--小心出门右转404

    话说,培训和自学就不是一个回事,两周讲完java基础,两天讲完jsp,两节课讲完servlet,还真不是一般人能受得了的,这两天学习jsp和servlet频繁被路径问题困扰,倒不是出错,只是各种act ...