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 相关文章推荐
jquery插件推荐 jquery.cookie
Nov 09 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
关于使用js算总价的问题
Jun 23 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
js实现简易计算器功能
2019/10/18 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
什么是唯一索引
2015/07/05 面试题
内衣营销方案
2014/03/15 职场文书
租赁意向书范本
2014/04/01 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
李开复演讲稿
2014/05/24 职场文书
英语课外活动总结
2014/08/27 职场文书
我的生日感言
2015/08/03 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书