js实现右下角可关闭最小化div(可用于展示推荐内容)


Posted in Javascript onJune 24, 2013

本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm
效果图片:
js实现右下角可关闭最小化div(可用于展示推荐内容) 
完整源代码:

<!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()"> </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>
Javascript 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 #Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 #Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 #Javascript
jquery可见性过滤选择器使用示例
Jun 24 #Javascript
jquery子元素过滤选择器使用示例
Jun 24 #Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 #Javascript
通过javascript获取iframe里的值示例代码
Jun 24 #Javascript
You might like
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
linux下进程间通信的方式
2013/01/23 面试题
2015年法制宣传月活动总结
2015/03/26 职场文书
接收函
2019/04/22 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python