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 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
JS二维数组的定义说明
Mar 03 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
使用Javascript简单计算器
Nov 17 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 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
文件上传的实现
2006/10/09 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
react基本安装与测试示例
2020/04/27 Javascript
python简单分割文件的方法
2015/07/30 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python AES加密模块用法分析
2017/05/22 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Python可迭代对象操作示例
2019/05/07 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
给我一面国旗 python帮你实现
2019/09/30 Python
餐厅考勤管理制度
2014/01/28 职场文书
医药销售自荐书
2014/05/29 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
python中mongodb包操作数据库
2022/04/19 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle