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实现可拖拽弹出层特效
Jan 04 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
JS实现音量控制拖动
Jan 15 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
php学习之 循环结构实现代码
2011/06/09 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP children()函数讲解
2019/02/03 PHP
非常好的js代码
2006/06/27 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
Python循环语句中else的用法总结
2016/09/11 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
蒂娜商店:Tiina the Store
2019/12/07 全球购物
六十大寿答谢词
2014/01/12 职场文书
军训自我鉴定
2014/01/22 职场文书
庆六一活动总结
2014/08/29 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
节约用电倡议书
2015/04/28 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis