使用JQuery使Div居中

作者:admin 日期:2015-05-29

Div居中是一个比较常见的需求。下面介绍一种使用JQuery使Div居中的方法
先假设有这样一个Div，<div id="d">test</div>
首先是要把需要居中的Div进行绝对定位，如：
<style type="text/css">
#d {
position: absolute;
width: 500;
height: 300;
border: 1px solid red;
}
</style>
有了这样的样式定义之后就是使其居中的js代码了。

JavaScript代码

var obj = $("#d");//获得相应的Div对象
var x = ($(window).width()-500)/2;//使用$(window).width()获得显示器的宽，并算出对应的Div离左边的距离
var y = ($(window).height()-300)/2;//使用$(window).height()获得显示器的高，并算出相应的Div离上边的距离
obj.css("top",y).css("left",x);

上面这段代码可以在页面一加载完就执行。

改进后的代码：

JavaScript代码

$(document).ready(function(){
middle();
});
$(window).resize(function(){
middle();
});
function middle(){
var obj = $("#mainbg");//获得相应的Div对象
var x = ($(window).width()-500)/2;//使用$(window).width()获得显示器的宽，并算出对应的Div离左边的距离
var y = ($(window).height()-300)/2;//使用$(window).height()获得显示器的高，并算出相应的Div离上边的距离
obj.css("top",y).css("left",x);
}

上面的代码实现窗口大小变化后始终居中。

Tags: javascript jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2080

css背景颜色渐变

作者:admin 日期:2015-05-29

垂直方向：

CSS代码

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
background: -moz-linear-gradient(top, #FF0000, #F9F900);
background: -o-linear-gradient(top,#FF0000, #F9F900);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));

水平方向：

CSS代码

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1');
background: -moz-linear-gradient(left, #FF0000, #F9F900);
background: -o-linear-gradient(left,#FF0000, #F9F900);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900));

Tags: css

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2124

jQuery禁止鼠标右键

作者:admin 日期:2015-05-29

jQuery屏蔽鼠标右键：
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
--------------------------------------------------------------------------------------------------
JS屏蔽鼠标右键：
<script language="JavaScript">
document.oncontextmenu=new Function("event.returnValue=false;");
document.onselectstart=new Function("event.returnValue=false;");
</script>
--------------------------------------------------------------------------------------------------
jquery禁止右键弹出的突破方法：
如： $(document).bind("contextmenu", function() { return false; }); //这段JS代码将禁止右键弹出
突破方法：
地址栏中输入：javascript:alert($(document).unbind("contextmenu",""));

Tags: javascript jquery

分类:技术文章 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2669

JavaScript获取当前根目录

作者:admin 日期:2015-05-29

主要用到Location 对象，包含有关当前 URL 的信息,是 Window 对象的一个部分，可通过 window.location 属性来访问。

方法一 (window.document.location.href/window.document.location.pathname)

JavaScript代码

function getRootPath_web() {
//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
var curWwwPath = window.document.location.href;
//获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
//获取主机地址，如： http://localhost:8083
var localhostPaht = curWwwPath.substring(0, pos);
//获取带"/"的项目名，如：/uimcardprj
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
return (localhostPaht + projectName);
}

方法二(window.location.pathname/window.location.protocol/window.location.host)

JavaScript代码

function getRootPath_dc() {
var pathName = window.location.pathname.substring(1);
var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
if (webName == "") {
return window.location.protocol + '//' + window.location.host;
}
else {
return window.location.protocol + '//' + window.location.host + '/' + webName;
}
}