jQuery 右下角滑动弹出可关闭重现层完整代码

效果图：

完整代码如下：

jquery右下角滑动弹出可关闭重现层 博客园 计划 教程

*{ margin:0px; padding:0px;}
#jihuaslide{ width:300px; height:200px; border:1px solid #000; position:fixed; bottom:2px; right:2px; display:none; background-color:White;}
#jihuaslide a{ position:absolute; top:8px; right:8px; font-size:12px; text-decoration:none; color:Blue;}
#jihuaslide h2{ font-size:24px; text-align:center;font-family:"微软雅黑";}
#reshow{position:fixed;right:2px;bottom:2px;font-size:12px; display:none;background-color:White; cursor:pointer;border:1px solid #000;}

我们

欢迎

hi

计划

博客园

jihua

jb51.net

cnblogs

欢迎光临

A

baidu.com

B

hello

Jihua

你快回来

关闭
右下角滑动弹出可重现层
www.jb51.net

我们 jquery教程

function Jihua_Cnblogs_Com() { $("#jihuaslide").slideDown("slow"); $("#reshow").hide(); }
$(document).ready(function () {
setTimeout(function () {
Jihua_Cnblogs_Com();
}, 1000)
$("#close").click(function () {
$("#jihuaslide").slideUp("slow"); $("#reshow").show();
})
$("#reshow").mouseover(function () {
Jihua_Cnblogs_Com(); //www.jb51.net
})
})

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jquery右下角弹出提示框示例代码

    复制代码 代码如下: <!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=&qu

  • 基于jQuery的message插件实现右下角弹出消息框

    1.$.messager.lays(width, height); 该方法主要用来定义弹出窗口的宽度和高度. 2.$.messager.anim(type,speed); 该方法主要定义窗口以什么样的方式和速度呈现. $.messager.anim("fade",1000); //以fadeIn的动画方式显示 $.messager.anim("show",1000); //以show的动画方式显示 3.$.messager.show(title,text,time)

  • 基于jQuery的网页右下角弹出广告(IE7,firefox)

    演示代码: 测试 .divCss{ bottom:0; display:block; height:25px; overflow:hidden; padding:0; position:fixed; right:20px; } .contentCss{ background:#666; height:200px; width:200px; } .contentCssHeight{ } .titleCss{ width:200px; height:25px; line-height:25px; t

  • jquery右下角自动弹出可关闭的广告层

    右下角弹出层后,会在一定时间后自动隐藏. html代码: <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>jquery右下角自动弹出关闭层</title><base target="_blank"/> <scrip

  • JQUERY实现网页右下角固定位置展开关闭特效的方法

    本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法.分享给大家供大家参考.具体如下: html代码: <div class="tagbox"> <div class="tag"> <span>热门标签...</span> <ul> <li><a href='/tag/js展开收起_1.html' target="_blank">js展开收起<

  • jquery实现浮动在网页右下角的彩票开奖公告窗口代码

    jquery实现浮动在网页右下角的彩票开奖公告窗口代码

    本文实例讲述了jquery实现浮动在网页右下角的彩票开奖公告窗口.分享给大家供大家参考.具体如下: 这是一个浮动在网页右下角的彩票开奖公告窗口,完全可当作一个右下角广告的代码来使用,而且效果中加入了简洁的动画功能,浮动窗口是从下往上滑出的,避免单调:另外本浮动窗口带有"关闭"功能,用户可以关闭它. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-buttom-alert-dlg-codes/ 具体代码如下: &

  • jQuery实现右下角可缩放大小的层完整实例

    本文实例讲述了jQuery实现右下角可缩放大小的层.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;

  • Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)

    复制代码 代码如下: setTimeout("document.getElementById('qq_dd').style.display='block'; ",5000);// JavaScript Document$(function(){    if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("h

  • jQuery实现的网页右下角tab样式在线客服效果代码

    jQuery实现的网页右下角tab样式在线客服效果代码

    本文实例讲述了jQuery实现的网页右下角tab样式在线客服效果代码.分享给大家供大家参考,具体如下: 这是一款网页右下角tab样式的在线客服代码,若在火狐或chrome浏览器下,客服是带边框阴影的,IE8下好像没边框效果,整体不如在Chrome.火狐.Opera浏览器下.这款在线客服代码的底部使用了TAB选项卡的样式,鼠标点击可切换客服的内容,还是挺新颖的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-buttom

  • jQuery实现的右下角广告窗体跟随效果示例

    本文实例讲述了jQuery实现的右下角广告窗体跟随效果.分享给大家供大家参考.具体如下: <!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"> &l

随机推荐