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 相关文章推荐
使用隐藏的new来创建对象
Mar 29 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python 获得13位unix时间戳的方法
2017/10/20 Python
python抓取文件夹的所有文件
2018/02/27 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Python如何发送与接收大型数组
2020/08/07 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
中专毕业生个人职业生涯规划
2014/02/19 职场文书
就业协议书的作用
2014/04/11 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
护林员个人总结
2015/03/04 职场文书
工伤调解协议书
2016/03/21 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python