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);