您的位置：首页 > Web前端 > JQuery

在用JQuery做简单弹出层效果时遇到的问题及解决办法

2013-05-05 18:12 429 查看

1.如何让网页水平居中显示？

设置body的margin属性为auto，并设置body的宽度:
body{ margin:auto;width:1000px;}


2.如何让两个或多个div并排显示？

设置要并排显示的div的样式的display为inline：
<div style="float:left;;">左</div>
<div style="float:left;;">右</div>


3.弹出层之后背景变灰，并且不可操作。

在body下放置一div，作为遮罩层。当弹出层之后，给遮罩层添加样式：
/*设置遮罩层的样式*/
.bgGray{ position:absolute; background-color:#fff; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; top:0px;left:0px;width:100%; height:100%;}


4.可拖动弹出层。

定义一个拖动状态_move，默认为false，当mousedown时将该状态设置为true，mouseup时设置为false。使用document的onmousemove方法，当_move为true时，根据鼠标坐标设置弹出层的新坐标。简单实现如下：
$("#title").mousedown(function (e) {
_move = true;
//计算鼠标与弹出层的坐标差值
_x = e.clientX - $(this).offset().left;
_y = e.clientY - $(this).offset().top;
});

$("#title").mouseup(function (e) {
_move = false;
});
//调用此方法，若_move为true则设置弹出层的位置
document.onmousemove = function (e) {
if (_move) {
var x = e.clientX - _x;
var y = e.clientY - _y;
$("#title").css({ "left": x + "px", "top": y + "px" });
}
};
<body>
<div id="title" style="width:300px;height:200px:background-color:Grat;"></div>
</body>

5.div中文本不可选中。

设置div的-moz-user-select属性为none：
<div id="title" style="-moz-user-select: none;"></div>

6.screenX,clientX,pageX的区别

详见：screenX，clientX，pageX的区别

7.offset()与position()的区别

详见：offset()与position()的区别
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  弹出层 jQuery
相关文章推荐
新的分享
章节导航