js实现常见的工具条效果

 body{

 background-color:#69C;

 }

 .toolbar{

 position:fixed;

 left:50%;

 bottom:5px;

 margin-left:-26px;

 }

 .toolbar-item{

 position:relative;

 display:block;

 width:52px;

 height:52px;

 background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201703/01/160208u95waa2sfwt27hwh.png);

 background-repeat:no-repeat;

 margin-top:1px;

 -webkit-transition:background-position 1s;

 -moz-transition:background-position 1s;

 -ms-transition:background-position 1s;

 -o-transition:background-position 1s;

 transition:background-position 1s;

 }

 .toolbar-item-wenxin{

 background-position:0 -798px;

 }

 .toolbar-item-wenxin:hover{

 background-position:0 -860px;

 }

 .toolbar-item-feedback{

 background-position:0 -426px;

 }

 .toolbar-item-feedback:hover{

 background-position:0 -488px;

 }

 .toolbar-item-app{

 background-position:0 -550px;

 }

 .toolbar-item-app:hover{

 background-position:0 -612px;

 }

 .toolbar-item-top{

 background-position:0 -674px;

 }

 .toolbar-item-top:hover{

 background-position:0 -736px;

 }

 .toolbar-layer{

 position:absolute;

 right:46px;

 bottom:-10px;

 width:172px;

 background-image:url(http://cdn.attach.qdfuns.com/notes/pics/201703/01/160208u95waa2sfwt27hwh.png);

 background-repeat:no-repeat;

 opacity:0;

 filter:alpha(opacity=0);

 -webkit-transform-origin:95% 95%;

 -moz-transition-origin:95% 95%;

 -ms-transition-origin:95% 95%;

 -o-transition-origin:95% 95%;

 transform-origin:95% 95%;

 -webkit-transition:scale(0.01);

 -moz-transition:scale(0.01);

 -ms-transition:scale(0.01);

 -o-transition:scale(0.01);

 transform:scale(0.01);

 -webkit-transition:all 1s;

 -moz-transition:all 1s;

 -ms-transition:all 1s;

 -o-transition:all 1s;

 transition:all 1s;

 }

 .toolbar-item-wenxin .toolbar-layer{

 height:212px;

 background-position:0 0;

 }

 .toolbar-item-app .toolbar-layer{

 height:194px;

 background-position:0 -222px;

 }

 .toolbar-item:hover .toolbar-layer{

 opacity:1;

 filter:alpha(opacity=100);

 -webkit-transition:scale(1);

 -moz-transition:scale(1);

 -ms-transition:scale(1);

 -o-transition:scale(1);

 transform:scale(1);

 }

 $(window).on('load',function(){

 $('#backTop').on('click',go);

 $(window).on('scroll',function(){

  checkPosition($(window).height());

 });

 checkPosition($(window).height());//防止刚开始刷新页面，返回顶部没有隐藏的问题，先让它执行一次，使其fadeOut

 })

 //到达顶部

 function go(){

 $('html,body').scrollTop(0);

 }

 //检测位置

 function checkPosition(pos){

 if($(window).scrollTop() > pos){

  $('#backTop').fadeIn();//滚动超过一个屏的宽度，就显示

 }else{

  $('#backTop').fadeOut();

 }

 }

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1