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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
js 学习笔记(三)
Dec 29 Javascript
jQuery示例收集
Nov 05 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 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使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
js实现tab切换效果
2017/02/16 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Python实现统计单词出现的个数
2015/05/28 Python
Python生成随机数组的方法小结
2017/04/15 Python
Linux下python3.7.0安装教程
2018/07/30 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python类继承和多态原理解析
2020/02/05 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
旅游管理专业学生求职信
2013/09/28 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
力学专业求职信
2014/07/23 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
见习报告怎么写
2014/10/31 职场文书
法律意见书范本
2015/06/04 职场文书
首都博物馆观后感
2015/06/05 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书