Bob SpAce

Be myself！Do myself！

Category: js

JS 获取当前年份

By

On 2019年6月24日

In js

function now(){
var myDate = new Date();
var nowTime = myDate.getFullYear();
document.getElementById(“now”).innerHTML = nowTime;
}
setInterval(“now()”,1000);

js各种获取当前窗口页面宽度、高度的方法

By

On 2019年6月24日

In js

alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin

alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

兼容IE6、7、8和火狐的遮罩层效果实现

By

On 2012年8月8日

In Div+Css, js

.overlay{position: fixed; z-index: 100000;width: 100%;height: 100%;top: 0;left: 0;filter: alpha(opacity=50);opacity: 0.5;overflow: hidden;background-color: #000;}
*html { background:url(*) fixed; }
*html body { margin:0; height:100%; }
*html .overlay{ position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth – this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight – this.offsetHeight); }
遮罩层HTML代码：

<div id=”overlay” class=”overlay” style=”display:none”></div>

将上述代码添加到页面中，通过js函数控制“overlay”层的显示和隐藏来实现遮罩效果

用 Javascript 获取指定页面元素的位置

By

On 2012年7月18日

In js

用 Javascript 获取指定页面元素的位置是一个非常常见的需求，本文介绍的方法能够准确返回一个元素相对于整个文档左上角的坐标，即元素的 top 、left 的位置，而且能够兼容浏览器，相信对新手非常有用。

 

<script language="JavaScript" type="text/javascript">
<!--
 
// 说明：用 Javascript 获取指定页面元素的位置
// 整理：http://www.codebit.cn
// 来源：YUI DOM
 
function getElementPos(elementId) {
 
    var ua = navigator.userAgent.toLowerCase();
    var isOpera = (ua.indexOf('opera') != -1);
    var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
 
    var el = document.getElementById(elementId);
 
    if(el.parentNode === null || el.style.display == 'none')
    {
        return false;
    }
 
    var parent = null;
    var pos = [];
    var box;
 
    if(el.getBoundingClientRect)    //IE
    {
        box = el.getBoundingClientRect();
        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
 
        return {x:box.left + scrollLeft, y:box.top + scrollTop};
    }
    else if(document.getBoxObjectFor)   // gecko
    {
        box = document.getBoxObjectFor(el);
           
        var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
        var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
 
        pos = [box.x - borderLeft, box.y - borderTop];
    }
    else    // safari & opera
    {
        pos = [el.offsetLeft, el.offsetTop];
        parent = el.offsetParent;
        if (parent != el) {
            while (parent) {
                pos[0] += parent.offsetLeft;
                pos[1] += parent.offsetTop;
                parent = parent.offsetParent;
            }
        }
        if (ua.indexOf('opera') != -1
            || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))
        {
                pos[0] -= document.body.offsetLeft;
                pos[1] -= document.body.offsetTop;
        }
    }
        
    if (el.parentNode) { parent = el.parentNode; }
    else { parent = null; }
  
    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
    { // account for any scrolled ancestors
        pos[0] -= parent.scrollLeft;
        pos[1] -= parent.scrollTop;
  
        if (parent.parentNode) { parent = parent.parentNode; }
        else { parent = null; }
    }
    return {x:pos[0], y:pos[1]};
}
 
//-->
</script>

js图片宽高自适应及半透明

By

On 2012年3月28日

In js

图片在onload的时候自动调整宽高,使图片不变形,同时不撑开页面

//改变透明度参数：图片对象，透明度：1-100的值
function setAlpha(imgObj,opacityValue){
imgObj.filters.alpha.opacity=parseInt(opacityValue);
}
//图片的显示大小[以宽度来限制]
function DrawImageW(imgObj,widthValue){
var image=new Image();
image.src=imgObj.src;
if(image.width>0 && image.height>0){
if(image.width>=widthValue){
imgObj.width=widthValue;
imgObj.height=(image.height*widthValue)/image.width;
}else{
imgObj.width=image.width;
imgObj.height=image.height;
}
}
}
//图片的显示大小[以高度来限制]
function DrawImageH(imgObj,heightValue){
var image=new Image();
image.src=imgObj.src;
if(image.width>0 && image.height>0){
if(image.height>=heightValue){
imgObj.height=heightValue;
imgObj.width=(image.width*heightValue)/image.height;
}else{
imgObj.width=image.width;
imgObj.height=image.height;
}
}
}
//图片的显示大小[宽高同时限制]
function DrawImage(imgObj,widthValue,heightValue){
var image=new Image();
image.src=imgObj.src;
if(image.width>0 && image.height>0){
if(image.height>heightValue||image.width>widthValue){
var h=0,w,wflg=false;
if(image.height>heightValue)
wflg=true;
if(wflg){
w=widthValue;
h=(image.height*widthValue)/image.width;
}
if(h==0||h>heightValue){
h=heightValue;
w=(image.width*heightValue)/image.height;
}
//alert(w)
//alert(h)
imgObj.width=w;
imgObj.height=h;
}else{
imgObj.width=image.width;
imgObj.height=image.height;
}
}
}
function zoomImg(imgObj){
var zoom=parseInt(imgObj.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) imgObj.style.zoom=zoom+’%’;
return false;
}
调用时：
<img src=”…” onload=”javascript:DrawImageW(this,100);” style=”filter:alpha(opacity=60)” onMouseOver=”setAlpha(this,100)” onMouseOut=”setAlpha(this,60)”>

js修改class实现导航当前页高亮

By

On 2012年3月28日

In js

经常遇到需要高亮处理的导航按钮,一般情况下可以通JS对比URL中的后半段地址也所有链接的HREF地址比较,还要做字条对比,但这种方法对于导航会自动变换不句灵活.

以下一种方式,通过ID获取navi下的所有a,遍历比对所有HREF与当前URL,匹配刚添加class属性.具体的class属性自行编写.

<script language=”javascript”>
window.onload=function(){
highlightPage();
}
function highlightPage(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(‘navi’)) return false;
var nav = document.getElementById(‘navi’);
var links = nav.getElementsByTagName(‘a’);
for (var i=0;i<links.length;i++){
var linkurl =  links[i].getAttribute(‘href’);
var currenturl = document.location.href;
if(currenturl.indexOf(linkurl)!=-1){
links[i].className = ‘onfocus’;
return true;
}
}
}
</script>

Recent Posts

Powered by WordPress & Theme by Anders Norén