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

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="http://www.jb51.net/phtml/jqtexiao/index/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://www.jb51.net/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="http://www.jb51.net" target="_blank" style="color:#000">我们</a>（<a href="http://www.jb51.net" style="color:#000" target="_blank">http://www.jb51.net</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;">jb51</div>
<div style="height:500px;"></div>

<div class="bottom_box-keleyi-com">
<div class="bottom">
<p>感谢您访问我们网站！<a href="http://www.jb51.net" target="_blank">http://www.jb51.net</a>，<br/>专门分享实用、常用的技术文章代码资源的网站</p>
<div class="ask"><a href="http://www.jb51.net/">首页</a>
<a href="http://www.jb51.net/ablut/">关于</a>
<a href="http://www.jb51.net/a/bjac/kjsrt3b0.htm">jQuery AJAX</a>
<a href="http://www.jb51.net/a/bjac/182di68b.htm">导航样式</a>
<a href="http://www.jb51.net/a/bjac/mt97p5y9.htm">侧边导航</a>
<a href="http://www.jb51.net/dev/3068696139522ae4.htm">树形菜单</a>
<a href="http://www.jb51.net/game/1/">捕鱼</a>
<a href="http://www.jb51.net/game/3/">打地鼠</a>
<a href="http://www.jb51.net/game/4/">美女拼图</a>
<a href="http://www.jb51.net/phtml/silverlight/">猜数字</a>
</div>
</div>
<div class="close"></div>
</div>
<img class="mini" src="http://www.jb51.net/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>

赞 (0)

相关推荐

  • 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

    效果图 代码部分 复制代码 代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(

  • 基于JS实现EOS隐藏错误提示层代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: //参数为消息提示层对应的对象,通常为表单里的对象 //特别注意:当使用扩展方法里的type=radio或者type=checkbox时,因为当时设置消息提示层的对象为obj.parentElement.parentElement,所以传入的对象也应为其上2级父节点 function hiddenMessageDiv(obj){ var div = obj.Eos_Message; if(div!=null){ //将该对象从消息数组中移除,

  • js实现鼠标移到链接文字弹出一个提示层的方法

    本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法.分享给大家供大家参考.具体分析如下: 这里实现鼠标移动到链接文字上面,弹出一个已定义好的DIV层的效果.在这个层里你可以加入与此链接对应的信息,这样就成了一个信息提示窗,在淘宝.新浪都能看到这种效果,很实用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

  • Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例

    如下所示: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title>Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例</title>    <meta http-equiv=

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

    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-equ

  • jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

    本文实例讲述了jQuery实现鼠标跟随提示层效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层.如以上购评分明细提示.(优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果) jquery.cluetip.css /* global */ #cluetip-close im

  • JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

    复制代码 代码如下: <HTML> <HEAD> <TITLE>JS+CSS制作的DIV层最小化和随意拖拽排序功能</TITLE> <style type="text/css"> body { margin:10px; } #dragHelper { position:absolute;/*重要*/ border:2px dashed #000000; background-color:#FFFFFF; filter: alp

  • Swift仿微信语音通话最小化时后的效果实例代码

    前言 最近碰到个需求,需要仿微信语音通话缩小化后,保持界面最上层有一个悬浮的小View可以一点击就把刚刚缩放掉的界面再放回来,其实本质就是创造了一个新的Window,在这个window上创建了一个rootController并展示他,缩小化时是把controller dismiss掉了,再次点击那个小View之后把这个controller再展示出来便可以了.同理微信小程序其实也是在一个新的Window中做了一套新的逻辑.随着现在手机性能的提升,多Window同时存在并不会造成严重卡顿,而衍生出来

  • jquery实现的超出屏幕时把固定层变为定位层的代码

    jquery实现的超出屏幕时把固定层变为定位层的代码

    非常好的一个用户体验实例.如果不明白的话就看下面的图片吧 淘宝产品列表 http://search1.taobao.com/browse/50010388/- 腾讯财经产业经济 http://finance.qq.com/industry/index.htm如何实现? scrollTop是什么?当元素内部的内容高度超过元素本身的高度时就会出现滚动条,随着拖动滚动条而被隐去的上面部分的高度就是scrollTop值. 这种定位层就是当页面触发onscroll事件时,取得scrollTop值并写入定位

  • 调用jQuery滑出效果时闪烁的解决方法

    问题现象如题所示,在调用jQuery 滑出效果时,层会现次闪烁一下.在网上找了许多解决文案,说要加如下标示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 可问题是现在的 标题头已 为 html4.0 ,如若改为上面的情况,则页面会乱掉.

  • ExtJS Window 最小化的一种方法

    下面是通过重新它的minimize函数来实现的一种最小化方法: HTML: 复制代码 代码如下: <input type="button" id="btn" value="OpenWin" onclick="openWin();" /> <div id="divWin"></div> <a href="javascript:openWin();"

  • JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

    JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

    本文实例讲述了JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码.分享给大家供大家参考.具体如下: 这是一款阿里妈妈网站顶部banner代码,采用滑出的方式,一个经典的工具条代码,可以当作菜单来用,同时还有完善的功能,可以适时关闭工具条,整体效果设计美观,简洁漂亮. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-float-banner-alimama-style-codes/ 具体代码如下: <!DOCTYPE ht

  • jquery京东商城双11焦点图多图广告特效代码分享

    jquery京东商城双11焦点图多图广告特效代码分享

    本文实例讲述了jquery京东商城双11焦点图多图广告特效.分享给大家供大家参考.具体如下: jquery实现的京东商城双11焦点图多图广告滑动及自动切换动画效果源码,是一段模仿京东商城双11的焦点图代码,专业应用于网站的图片展示及重点展示的区域,该段代码实现了鼠标滑过切换图片及自动切换图片两种效果. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jque

  • jquery带有索引按钮且自动轮播切换特效代码分享

    jquery带有索引按钮且自动轮播切换特效代码分享

    本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图:                              -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr

随机推荐