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 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
详解Vue router路由
Nov 20 Vue.js
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 图像处理类1
2009/06/15 PHP
php简单的会话类代码
2011/08/08 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP实现添加购物车功能
2017/03/06 PHP
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
详解vue高级特性
2020/06/09 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
python读写文件操作示例程序
2013/12/02 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python输出各行命令详解
2018/02/01 Python
Flask之flask-script模块使用
2018/07/26 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
机电专业大学生求职信
2013/10/04 职场文书
大四学生思想汇报
2014/01/13 职场文书
保证书范文大全
2014/04/28 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书