分类：17：javascript

js 代码： 通过js 得到去掉前缀的域名

js 代码如下：

<script>
domain = document.domain;
domain = domain.match(/[^\.]*\.[^.]*$/)[0];
</script>

如果当前域名为http://fancyecommerce.com 返回 fancyecommerce.com

如果当前域名为http://www.fancyecommerce.com 返回 fancyecommerce.com

如果当前域名为http://xxxx.fancyecommerce.com 返回 fancyecommerce.com

随着滚动条滚动的Tab切换 – js例子

在电商网站，我们有一些tab 想要他，随着下拉，tab自动切换的方式，

这样无论对seo还是客户体验都很不错，下面是实现的一个例子，代码如下：

<!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>随着滚动条滚动的Tab切换</title>  
<style>  
*{  
    list-style:none;  
    margin:0;  
    padding:0;  
    text-decoration:none;  
    font-family:'Microsoft YaHei';  
  
}  
li{  
    width:100px;  
    height:50px;  
    line-height:50px;  
    float:left;  
    border-right:2px solid #eee;  
    text-align:center;  
    cursor:pointer;  
}  
ul{  
    width:1200px;     
    margin:0 auto;  
}  
.nav{  
    height:52px;  
    width:100%;  
    background:#f5f5f5;  
}  
.nav .cur{  
    background:#fff;  
    border-top:2px solid #1a92cf;  
    color:#1a92cf;  
}  
.fixed{  
    position:fixed;  
    top:0;  
    left:0;  
}  
a{  
    color:#505050;  
}  
</style>  
</head>  
<body>  
<br/><br/><br/><br/><br/><br/><br/>  
<div class="nav" id="nav-container">  
    <ul id="nav-box">
        <li class="cur">text1-nav</li>  
        <li>text2-nav</li>  
        <li>text3-nav</li>  
    </ul>  
</div>  
<div id="text">  
    <div style="width:100%;height:500px;background:green;text-align:center;">text1</div>  
    <div style="width:100%;height:500px;background:yellow;text-align:center;">text2</div>  
    <div style="width:100%;height:500px;background:blue;text-align:center;">text3</div>   
</div>  
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  
  
<script>  
var navContainer = document.getElementById("nav-container");  
var navBox = document.getElementById("nav-box");  
var text = document.getElementById("text");  
var navBoxChild = navBox.children;  
var textChild = text.children;  
var num = navContainer.offsetTop;  
var a = navContainer.offsetHeight;  
window.onscroll = function(){  
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;  
    if(scrollTop >= num){  
        navContainer.className = "nav fixed";  
        text.style.paddingTop = a +"px";  
    }else{  
        navContainer.className = "nav";  
        text.style.paddingTop = "";  
    }  
    //当导航与相应文档接触的时候自动切换  
    //method1  
    for(var i=0;i<navBoxChild.length;i++){  
        if( scrollTop + a >= textChild[i].offsetTop){  
            for(var j=0;j<navBoxChild.length;j++){  
                navBoxChild[j].className = "";  
            }  
            navBoxChild[i].className = "cur";  
       }  
    }  
};  
for(var i=0;i<navBoxChild.length;i++){  
    var interval;  
    navBoxChild[i].index = i;  
    navBoxChild[i].onclick = function(){  
        var self = this;  
        clearInterval(interval);  
    if(document.body.scrollTop){
      scroll = document.body;
    }else if(document.documentElement.scrollTop){
      scroll = document.documentElement;
    }
        interval = setInterval(function(){  
      if(scroll.scrollTop + a<=textChild[self.index].offsetTop){  
        scroll.scrollTop += 40;  
        if(scroll.scrollTop + a>=textChild[self.index].offsetTop){  
          scroll.scrollTop = textChild[self.index].offsetTop-a;  
          clearInterval(interval);  
        }  
      }else{  
        scroll.scrollTop /= 1.1;  
        if(scroll.scrollTop + a<=textChild[self.index].offsetTop){  
          scroll.scrollTop = textChild[self.index].offsetTop-a;  
          clearInterval(interval);  
        }  
      }  
    },40); 
    };  
}  
</script>    
</body>  
</html>