隐藏在左侧的jquery弹性弹出菜单

隐藏在左侧的弹性弹出菜单,从淘宝扣下来的,也可作为JAvaScript缓冲动画的典型教程。本弹性菜单可扩展性强,实际上不光可以做成菜单,也可布局一些图文混排的内容或一段视频,总之被弹出的内容是在一段Div内,怎么布置就看你的了。

<!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>
    <script type="text/javascript" src="/images/jquery1.3.2.js"></script>
    <script language="javascript">
    $(function(){
    $("#clickopen").click(function(){
    var offset=$("#clickopen").offset().top;
    $("#page").css("top",offset+"px");
    $("#clickopen").hide();
    $("#page").animate({
    width: "400px",
    height: "400px",
    left: ($("body").width()/2-200)+"px",
    top: (offset-100)+"px",
    opacity: ‘toggle‘
    }, 300 );
    return false;
    })
    $("#closepage").click(function(){
    var offset=$("#page").offset().top;
    $("#page").animate({
    width: "0px",
    height: "0px",
    left: "0px",
    top: (offset+100)+"px",
    opacity: ‘toggle‘
    }, 300 );
    $("#clickopen").show();
    return false;
    })
    })
    </script>
    <style>
    body{text-align:center;font-size:12px;color:#333;font-family:"宋体";background:#fff;margin:0 auto;padding:0;}
    body > div{text-align:center;margin-right:auto;margin-left:auto;}
    div,form,ul,ol,li,span,p,dt,dd,dl{border:0;margin:0;padding:0;}
    img,a img{border:0;margin:0;padding:0;}
    h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:400;margin:0;padding:0;}
    ul,ol,li{list-style:none;}
    td{word-break:break-all;}
    a{color:#003cc8;text-decoration:none;}
    a:hover{text-decoration:underline;color:blue;}
    .f_tahoma{font-family:Tahoma;}
    em,i{font-style:normal;}
    .ask{overflow:hidden;position:fixed;left:0px;top:200px;z-index:2}
    .leftButton{background:red;width:20px;height:80px;text-align:center;line-height:20px;display:block;color:#fff; }
    .content{background:#999;width:800px;height:2000px;margin:0 auto}
    * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
    .ask{_position:absolute;_bottom:auto;_left:0;_top: expression(documentElement.scrollTop + 200 + "px");}
    .page{width:0px; position:absolute;height:0px;left:0;top:0px;z-index:1;overflow:hidden;display:none}
    .page div{border:1px solid #000;overflow:hidden;width:398px}
    .page h1{height:40px;text-align:center;font-size:20px;color:#fff;background:red;line-height:40px}
    .page h1 a{float:right;color:#000;margin-top:-15px}
    .page p{padding:10px;line-height:22px;font-size:14px;text-align:left;background:#fff;height:400px;width:378px}
    </style>
    </head>
    <body>
    <div class="ask">
    <a  class="leftButton" href="#" id="clickopen">点击弹出</a>
    </div>
    <div class="content">如果不显示效果,菜单弹不出来请刷新一下页面,谢谢~~~~~~~~~~   </p>
    </div>
    <div class="page" id="page">
    <div>
    <h1><a href="#" id="closepage">×</a>欢迎光临www.chenxuzl.com/</h1>

    </div>
    </div>
    </body>
    </html>
时间: 2024-11-05 04:57:44

隐藏在左侧的jquery弹性弹出菜单的相关文章

js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

js简单显示和隐藏div 01.<!DOCTYPE html> 02.<html> 03.<head> 04.<meta charset="UTF-8"> 05.<title>Insert title here</title> 06.<script type="text/javascript"> 07. window.onload=function(){ 08. document.g

jQuery渐变弹出层

css: [css]#race{display:block;width:200px;height:50px;line-height:50px;text-align:center;background:#CCC;border:#555 1px solid;} .raceShow{border:solid 1px #ccc;position:absolute;display:none;width:300px;height:100px;padding:5px;font-size:12px;}[/css

jQuery Dialog弹出层对话框插件

Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js 1 /** 2 * jQuery的Dialog插件. 3 * 4 * @param object content 5 * @param object options 选项. 6 * @return 7 */ 8 function Dialog(content, options) 9 { 10 var defaults = { // 默认值. 11 title:'标题', // 标

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> <title></title> <sc

jQuery.reveal弹出层

jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现的,非常小,插件本身只有3K多一点,用起来也算简单明了. 废话不说了.上Demo 首先是引用部分: Html->head: <head> <meta charset="utf-8" /> <title>Reve

jquery实现弹出可移动层代码

iframe.html页面 <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弹窗显示</title></head><body><div id="container" style="overflow:hidden;"

jquery 简单弹出层

预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* width height is defined by javascript */ position: absolute; top:0; left: 0; z-index: 1000; background-color: #000; opacity: 0.2; *filter:alpha(opacity=2

jquery 简单弹出层(转)

预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* width height is defined by javascript */ position: absolute; top:0; left: 0; z-index: 1000; background-color: #000; opacity: 0.2; *filter:alpha(opacity=2

用jQuery解决弹出层的问题

在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3,ie6下,div层与下拉框的优先级问题. 下面这个例子就是解决这些问题的,大家可以参考参考,有什么更好的解决方案,请留言. 超级简单版 演示:http://cssrain.cn/demo/popDiv/easyPopDiv.html 实例版 演示:http://cssrain.cn/demo/pop