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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
JS Array对象入门分析
Oct 30 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
一段实时更新的时间代码
2006/07/07 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python和php通信乱码问题解决方法
2014/04/15 Python
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python如何获取系统iops示例代码
2016/09/06 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python实现简单的购物程序代码实例
2020/03/03 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
工地资料员岗位职责
2013/12/31 职场文书
职工运动会感言
2014/02/07 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL