外链地址显示对应的网站标示图标实例页面

回到相关文章 »

代码:

CSS代码:
.demo a {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
}
                
HTML代码:
<div id="shareTo" class="demo">
    <p>...</p>
    <span class="g3">分享到:</span> 
    <a href="//v.t.sina.com.cn/share/share.php?..." target="_blank" title="分享到新浪微博"></a>
    <a href="//v.t.qq.com/share/share.php?..." target="_blank" title="分享到腾讯微博"></a>
    <a href="//www.douban.com/recommend/?..." target="_blank" title="分享到豆瓣"></a>		    
    <a href="//www.kaixin001.com/repaste/share.php?..." target="_blank" title="分享到开心网"></a> 
    <a href="//share.renren.com/share/buttonshare.do?link=..." target="_blank" title="分享到人人网"></a>
</div>
                
JS代码:
var eleShares = document.getElementById("shareTo").getElementsByTagName("a"), lenShare = eleShares.length;

// 显示对应图标地址
var funFavicon = function(api) {
    for (var indexShare = 0; indexShare<lenShare; indexShare+=1) {
        var href = /domain/.test(api)? 
            eleShares[indexShare].hostname.replace("v.t", "www"): 
            eleShares[indexShare].href.replace("v.t", "www");
            
        eleShares[indexShare].style.backgroundImage = "url("+ api + href +")";
    }    
};

// 单选组
var eleRadios = document.getElementById("shareTo").getElementsByTagName("input"), lenRadio = eleRadios.length;
var funApi = function(event) {
    for (var indexRadio = 0; indexRadio<lenRadio; indexRadio+=1) {
        if (event) {
            eleRadios[indexRadio].onclick = function() {
                funApi();    
            };    
        }
        if (eleRadios[indexRadio].checked) {
            funFavicon(eleRadios[indexRadio].value);    
        }
    }        
};

funApi(true);
                

效果:


分享到: