使用jQuery制作浮动工具栏的实例分享(2)

$(function(){ $(“#toolc”).mouseenter(function(){ //这里使用mouseenter方法来触发,当鼠标移动上去之后,触发这个方法 $(“#toolc”).css({“color”:”#ffffff”,”backgroundColor”:”#000000”}); //先对中部添加背景,并且把文字变成白色 $(“#shareit”).removeClass(“none”).addClass(“inline”); //去掉shareit的none,让它显示出来,但由于宽度不够,无法显示 $(“#toolc”).animate({width:”350px”},200); //使用animate方法,动态的改变宽度,直到显示出来分享按钮 }).mouseleave(function(){ //当鼠标从目标区域中移走,就触发下面这个事件 $(“#toolc”).css({“color”:”#000000”,”backgroundColor”:”#ffffff”}); //同反 $(“#shareit”).removeClass(“inline”).addClass(“none”); //同反 $(“#toolc”).animate({width:”40px”},200); //同反,你懂的 }); $(“#toolt”).click(function(){ $(“html,body”).animate({scrollTop:”-=900px”},200); //每点击一下,就向上滑动900px }); $(“#toolb”).click(function(){ $(“html,body”).animate({scrollTop:”+=900px”},200); //每点击一下,就向下滑动900px }); });

注释我已经写在上面代码中了，仔细耐心看一下。这里,我想说的是向上向下滑动900px。我并没有让它点击直接到顶部或者底部。因为我觉得，如果文章比较长，浏览者并不一定想直接滑动到底部，而是想看看下面的内容。如果他真想滑动到底部，也只需要点两次或者三次按钮即可。这也是一个用户体验的细节。

您可能感兴趣的文章: