当前位置：首页 → 问答吧 → 请教各位高手,能说下jquery 里show的用法吗

请教各位高手,能说下jquery 里show的用法吗

时间：2010-05-26

来源：互联网

本人不懂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="Content-Type" content="text/html;charset=utf-8" /> <title>渐变弹出层</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <link type="text/css" rel="stylesheet" href="common/common.css" /> <style> /* 渐变弹出层 */ #race{display:block;width:50px;height:50px;line-height:30px;text-align:center;background:#CCC;border:#555 1px solid;} .raceShow{background-color:#f1f1f1;border:solid 1px #ccc;position:absolute;display:none;width:570px;height:338px;padding:5px;font-size:12px;} #UpLayer span{border:#fff 1px solid; width:80px; padding:0 5px; line-height:20px; display:block;} #UpLayer ul{display:none;position:absolute;border:#ccc 1px solid;width:80px; padding:5px; line-height:20px; background:#f1f1f1; margin:-1px 0 0 0;} #UpLayer ul li{ border-bottom:#ccc 1px dashed;} .input_close{float:right} </style> </head> <body> <script type="text/javascript"> // 渐变弹出层 $(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.stopPropagation(); var offset = $(event.target).offset();//取消事件冒泡 $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left});//设置弹出层位置 $("#racePop").show(speed);//动画显示 }); $("#racePop_1").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自身隐藏 var objStr = "#UpLayer"; $(objStr).mouseover(function(){$(objStr + " ul").show();}); $(objStr).mouseout(function(){$(objStr + " ul").hide();}); }); </script>  <div id="race"><a href="#">点击</a></div> <div id="racePop" class="raceShow"> 新页面<input type="button" id="racePop_1" value="close" class="input_close"/> </div> </body> </html>
提示：您可以先修改部分代码再运行

以上是一个点出弹出页面的jquery 代码,问题是,弹出层是从左上角开始显示的,能否,修改一下,( 我猜是修改show()),让它从右上角开始显示!

[ 本帖最后由 littlesouth123 于 2010-5-26 17:21 编辑 ]

作者: littlesouth123 发布时间: 2010-05-26

不能从右的吧？！没看到过 show里面是控制速度 ╮(╯▽╰)╭

作者: cwq2jxl 发布时间: 2010-05-26

郁闷

作者: littlesouth123 发布时间: 2010-05-26

图像渲染和尺寸计算一般都是从左到右，从上到下，不管是HTML还是PS，都是锚住一个左上角（0,0），更改宽度和高度就是向右下角延伸，非要实现从右上角也不是步行，但show不行，你得用animate，然后自己定义函数，其实就是不断更改宽高同时还要更改位置。。。

作者: aolu11 发布时间: 2010-05-26

感谢回复，我也是做设计的，不管做网页还是其它东西，如flash，也知道注册点是在左上角，问题是我的按钮刚好在页面的右边，所以想它从右上角开始，这样就更直观了。你说用animate，能否提供源码，以供学习！

作者: littlesouth123 发布时间: 2010-05-27

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> $(function(){$("#my").show(3000);}); </script> </head> <body> <div style="background:red;width:300px;height:300px;position:relative;"> <div style="background:green;position:absolute;top:0;right:50px;width:200px;height:200px;display:none" id="my"> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

其实漏了一种情况，如果你的层可以用绝对定位锚住右上角，那么用show是可以实现的

* 如果没效果刷新下，从Google加载的jQuery

[ 本帖最后由 aolu11 于 2010-5-27 09:21 编辑 ]

作者: aolu11 发布时间: 2010-05-27

show()是改变width/height/opacity，right:0px可以，float:right;也可以。欢迎补充

作者: kubau0 发布时间: 2010-05-27