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中ajax方法data参数的用法小结
Feb 12 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
命令行批量截图Node脚本示例代码
Jan 25 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
python针对excel的操作技巧
2018/03/13 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
Android笔试题总结
2014/11/29 面试题
学前教育毕业生自荐信范文
2013/12/24 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
创先争优个人总结
2015/03/04 职场文书
地道战观后感500字
2015/06/04 职场文书
环保建议书作文300字
2015/09/14 职场文书
基于Python实现股票收益率分析
2022/04/02 Python
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript