热门关键字:
jquery > jquery插件 > jquery置顶特效 > 超可爱的星空火箭置顶jquery特效

超可爱的星空火箭置顶jquery特效

8906
所属分类:jquery置顶特效
发布时间:2013/7/20 2:48:11
下载量:1693
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=284

此作品是一款超可爱的星空火箭置顶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);});	
});


效果如下:

超可爱的星空火箭置顶jquery特效







如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:置顶特效 返回顶部 滑动插件 悬浮停靠底部 动画插件Flash效果
  • 超可爱的星空火箭置顶jquery特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 超可爱的星空火箭置顶jquery特效
  • 超可爱的星空火箭置顶jquery特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐