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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
教师演讲稿范文
2014/01/08 职场文书
小小的船教学反思
2014/02/21 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
劲霸男装广告词
2014/03/21 职场文书
需求分析说明书
2014/05/09 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2015年市场部工作总结
2015/04/30 职场文书
员工给公司的建议书
2019/06/24 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
SQL SERVER触发器详解
2022/02/24 SQL Server