skype:nbhengshen?chat
http://wpa.qq.com/msgrd?v=3&uin=987109406&site=qq&menu=yes 替换账号即可,其余像facebook、YouTube、Twitter等添加对应的公司企业页面链接
首先,在footer标签内添加一段html
<div class="side">
<ul>
<li><a href="#" target="_blank"><div class="sidebox"><i class="fa fa-skype" aria-hidden="true"></i>Skype</div></a></li>
<li><a href="#" target="_blank"><div class="sidebox"><i class="fa fa-qq" aria-hidden="true"></i>QQ</div></a></li>
<li><a href="#" target="_blank"><div class="sidebox"><i class="fa fa-facebook-square" aria-hidden="true"></i>Facebook</div></a></li>
<li><a href="#" target="_blank"><div class="sidebox"><i class="fa fa-youtube" aria-hidden="true"></i>YouTuBe</div></a></li>
<li style="border:none;"><a href="javascript:goTop();" class="sidetop"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a></li>
</ul>
</div>
然后再style样式表内添加一段css样式,只需改动颜色,适合网站主色调就行
/*悬浮窗*/
.side {
position: fixed;
width: 54px;
height: 275px;
right: 40px;
top: 214px;
z-index: 100;
}
.side ul li {
width: 54px;
height: 54px;
float: left;
position: relative;
border-bottom: 1px solid #444;
list-style: none;
}
.side ul li .sidebox {
position: absolute;
width: 54px;
height: 54px;
top: 0;
right: 0;
transition: all 0.3s;
background: #16062e;
opacity: 0.8;
filter: Alpha(opacity=80);
color: #fff;
font: 14px/54px "微软雅黑";
overflow: hidden;
}
.side ul li .sidetop {
width: 54px;
height: 54px;
line-height: 54px;
display: inline-block;
background: #16062e;
opacity: 0.8;
filter: Alpha(opacity=80);
transition: all 0.3s;
}
.side ul li .sidetop:hover {
background: #ae1c1c;
opacity: 1;
filter: Alpha(opacity=100);
}
.side ul li img {
float: left;
}
.side .fa{
font-size: 29px;
width: 54px;
text-align: center;
line-height: inherit;
}
.side ul li .sidetop .fa{
color: #fff;
}
最后添加一段jquery
$(document).ready(function(){
$(".side ul li").hover(function(){
$(this).find(".sidebox").stop().animate({"width":"124px"},200).css({"opacity":"1","filter":"Alpha(opacity=100)","background":"#ae1c1c"})
},function(){
$(this).find(".sidebox").stop().animate({"width":"54px"},200).css({"opacity":"0.8","filter":"Alpha(opacity=80)","background":"#16062e"})
});
});
//回到顶部
function goTop(){
$('html,body').animate({'scrollTop':0},600);
}