此作品是一款超可爱的星空火箭置顶Jquery特效,功能跟一般的置顶效果一样,只是觉得素材比较可爱,于是就把它做成一个特效与大家分享,代码既简单又简洁,网友一看便理解,很实用。。。
效果代码如下:
body {
background:url(images/blog7year_videobg.png);
}
.actGotop {
position:fixed;
_position:absolute;
bottom:100px;
right:50px;
width:150px;
height:195px;
display:none;
}
.actGotop a,.actGotop a:link {
width:150px;
height:195px;
display:inline-block;
background:url(images/blog7year_gotop.png) no-repeat;
_background:url(images/blog7year_gotop.gif) no-repeat;
outline:none;
}
.actGotop a:hover {
width:150px;
height:195px;
background:url(images/blog7year_gotopd.gif) no-repeat;
outline:none;
}
JS代码如下:
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100){
$('.actGotop').fadeIn(300);
}else{
$('.actGotop').fadeOut(300);
}
});
$('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
});
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
置顶特效 返回顶部 滑动插件 悬浮停靠底部 动画插件Flash效果