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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
总结js函数相关知识点
Feb 27 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
element form 校验数组每一项实例代码
Oct 10 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:风雨欲来 路在何方?
2006/10/09 PHP
一些PHP写的小东西
2006/12/06 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP制作万年历
2015/01/07 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
简单介绍Python中的JSON使用
2015/04/28 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
解决python 上传图片限制格式问题
2019/10/30 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
大学生应聘求职信
2014/05/26 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
酒店开业主持词
2015/07/02 职场文书
小学教师教学随笔
2015/08/14 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS