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 相关文章推荐
最新28个很棒的jQuery 教程
May 28 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 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与SQL注入攻击[一]
2007/04/17 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
Python下载指定页面上图片的方法
2016/05/12 Python
python中os模块详解
2016/10/14 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
python空元组在all中返回结果详解
2020/12/15 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
JAVA软件工程师测试题
2014/07/25 面试题
年会主持词结束语
2014/03/27 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
信访维稳工作汇报
2014/10/27 职场文书
软件项目经理岗位职责
2015/04/01 职场文书