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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
学习ExtJS table布局
Oct 08 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 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
php 分库分表hash算法
2009/11/12 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
node中的session的具体使用
2018/09/14 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
Python基于百度云文字识别API
2018/12/13 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
求职自荐信
2013/12/14 职场文书
计算机专业职业规划
2014/02/28 职场文书
表彰大会主持词
2014/03/26 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
企业法人代表证明书
2014/09/27 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
财务部岗位职责
2015/02/03 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
加强党性修养心得体会
2016/01/21 职场文书
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers