jquery实现隐藏在左侧的弹性弹出菜单效果

本文实例讲述了jquery实现隐藏在左侧的弹性弹出菜单效果。分享给大家供大家参考。具体如下：

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-左侧-隐藏-警报-adv-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title隐藏在左侧的弹性弹出菜单/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本语言=' JavaScript ' $(function(){ $(' #单击打开')).click(function(){ var offset=$(' # click open ').偏移量()。顶部；$('#page ').css('top '，偏移量px’)；$(“# click open”).hide()；$('#page ').动画({ width: '400px '，height: '400px '，left: ($('body ').width()/2-200) 'px '，top: (offset-100) 'px '，opacity: ' toggle ' }，300)；返回false}) $('#closepage ').单击(函数(){ var offset=$('#page ')).偏移量()。顶部；$('#page ').动画({ width: '0px '，height: '0px '，left: '0px '，top:(偏移量100) 'px '，opacity: ' toggle ' }，300)；$(“# click open”).show()；返回false })})/脚本样式正文{ text-align : centerfont-size :12 px颜色： # 333字体系列： '宋体；背景# fffmargin:0 auto划水：0;} body div { text-align : center；右边距：汽车；左边距left:auto}div、form、ul、ol、li、span、p、dt、dd、dl { border:0margin:0划水：0;}img，a img { border:0margin:0划水：0;}h1、h2、h3、h4、h5、h6 { font-size :12 px字体粗细：400；余量：0划水：0;}ul、ol、李{列表式：无；} TD { word-break : break-all；} a { color: # 003cc8文本装饰：无；} a :悬停{ text-decoration :下划线；颜色：蓝色；}.f _ Tahoma { font-family : Tahoma；}em，I { font-style : normal；}.询问{ overflow:hidden位置：固定；left :0 pxtop :200 pxz-index :2 } .左键{ background:red宽度：20 px高度：80 px文本对齐：居中；线高：20 px显示：块；color: # fff}。内容{ background: # 999宽度宽度：800像素高度height :2000 pxmargin :0 auto } * html，* html正文/*修正IE6振动bug */{background-image:url(约：空白)；背景-附件：固定；}.ask { _ position : absolute _ bottom : auto _ left :0 _ top :表达式(文档元素。滚动顶部200 ' px ')；}.页面{宽度：0像素位置：绝对；高度：0pxleft:0top:0pxz索引：1;飞越：隐藏；display:none} .page div { border :1 px solid # 000；飞越：隐藏；宽度：398px} .第氕页{高：40像素文本对齐：居中；font-size :20 pxcolor: # fff背景：红色；线高：40px} .第氕页a { float : right color : # 000页边距-top:-15px} .第p页{ padding:10px线高：22 pxfont-size :14 px向左文本对齐：背景# fff高度：400 pxwidth :378 px }/style/head dydiv class=' ask ' a class=' left button ' href=' # ' id=' click open '点击弹出/a/div class=' content '/div div class=' page ' id=' page ' div h1a href=' # ' id=' closepage ' x/a您好，欢迎光临！/h1 p我们是国内专业的网站建设资源、脚本编程学习类网站，提供最新的网络编程、脚本编程、网页制作、网页设计、网页特效，为站长与网络编程从业者提供学习资料/p /div/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。