jquery定时滑出可最小化的底部提示层特效代码


Posted in Javascript onOctober 02, 2013

html源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery定时滑出可最小化的底部提示层</title><base target="_blank" />
<link href="https://3water.com/phtml/jqtexiao/index/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://3water.com/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="width:800px;margin:0px auto">
<span style="font-size:18px; font-weight:bold; text-align:center; line-height:25px; color:#000; width:100%">jquery定时底部滑出可最小化的提示层特效<br />
<a href="https://3water.com" target="_blank" style="color:#000">三水点靠木</a>(<a href="https://3water.com" style="color:#000" target="_blank">https://3water.com</a>)<br />
<br />
</span>
当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层。
</div>
<div style="background-color:Red; width:100%;height:150px;">欢迎。</div>
<div style="height:830px;"></div>
<div style="background-color:Fuchsia; width:100%;height:150px;">3water</div>
<div style="height:500px;"></div>
<div class="bottom_box-keleyi-com">
<div class="bottom">
<p>感谢您访问三水点靠木网站!<a href="https://3water.com" target="_blank">https://3water.com</a>,<br/>专门分享实用、常用的技术文章代码资源的网站</p>
<div class="ask"><a href="https://3water.com/">首页</a>
<a href="https://3water.com/ablut/">关于</a>
<a href="https://3water.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a>
<a href="https://3water.com/a/bjac/182di68b.htm">导航样式</a>
<a href="https://3water.com/a/bjac/mt97p5y9.htm">侧边导航</a>
<a href="https://3water.com/dev/3068696139522ae4.htm">树形菜单</a>
<a href="https://3water.com/game/1/">捕鱼</a>
<a href="https://3water.com/game/3/">打地鼠</a>
<a href="https://3water.com/game/4/">美女拼图</a>
<a href="https://3water.com/phtml/silverlight/">猜数字</a>
</div>
</div>
<div class="close"></div> 
</div>
<img class="mini" src="https://3water.com/phtml/jqtexiao/index/mini.png" width="65" height="37" alt="打开" />
<script type="text/javascript">
$(function(){
setTimeout(function(){
$(".bottom_box-k"+"eleyi-com").slideDown("slow");
},2000);
$(".close").click(function(){
$(".bottom_box-ke"+"leyi-com").hide();    
$(".mini").show(200);    
})
$(".mini").click(function(){
$(this).hide();    
$(".bottom_box-kele"+"yi-com").show();    
})
});
</script>
</body>
</html>
Javascript 相关文章推荐
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
jQuery中extend函数详解
Jul 13 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
Vue数据双向绑定原理实例解析
May 15 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 #Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 #Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 #Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 #Javascript
javascript不可用的问题探究
Oct 01 #Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 #Javascript
js有序数组的连接问题
Oct 01 #Javascript
You might like
php基础知识:类与对象(5) static
2006/12/13 PHP
获取远程文件大小的php函数
2010/01/11 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP对象实例化单例方法
2017/01/19 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
python批量修改文件编码格式的方法
2018/05/31 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python 必须了解的5种高级特征
2020/09/10 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
检举信的格式及范文
2014/04/04 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
python实现高效的遗传算法
2021/04/07 Python
2021年最新用于图像处理的Python库总结
2021/06/15 Python
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
Python实现双向链表基本操作
2022/05/25 Python