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 全角转半角部分
Oct 28 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
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生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
cdn模式下vue的基本用法详解
2018/10/07 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python生成器的使用方法
2013/11/21 Python
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python多线程使用方法实例详解
2019/12/30 Python
Python如何读取文件中图片格式
2020/01/13 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
HTML5进度条特效
2014/12/18 HTML / CSS
售后服务承诺书范文
2014/03/26 职场文书
仓库文员岗位职责
2014/04/06 职场文书
质量保证书格式模板
2015/02/27 职场文书
2015年推普周活动总结
2015/03/27 职场文书
地道战观后感300字
2015/06/04 职场文书
高一数学教学反思
2016/02/18 职场文书
60句有关成长的名言
2019/09/04 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
MySQL的索引你了解吗
2022/03/13 MySQL