非常好玩的GO top

2013-06-28 00:00:00 by 【6yang】, 812 visits, 收藏 | 返回

Demo:
http://6yang.net/myjavascriptlib/gotop/

Source:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>GO top</title>
</head>
<script src="../js/jquery-1.8.0.min.js"></script>
<script>
$(function(){
   $('#backtotop').delegate('', 'mouseenter', function(){
       $(this).addClass('showme');
   }).delegate('', 'mouseleave', function(){
       $(this).removeClass('showme');
   })
});
</script>
<style>
body{
   background-color:#ccc;
}
#backtotop {
   width:50px;
   height:50px;
   position:fixed;
   bottom:12px;
   right:-60px;
   z-index:9999;
   /* Firefox */
                   -moz-transition: all 1s ease;
   /* WebKit */
                   -webkit-transition: all 1s ease;
   /* Opera */
                   -o-transition: all 1s ease;
   /* Standard */
                   transition: all 1s ease;
}
#backtotop.showme {
   right: 12px;
   /* Firefox */
                           -moz-transform: scale(1) rotate(-360deg) translate(0px);
   /* WebKit */
                           -webkit-transform: scale(1) rotate(-360deg) translate(0px);
   /* Opera */
                           -o-transform: scale(1) rotate(-360deg) translate(0px);
   /* Standard */
                           transform: scale(1) rotate(-360deg) translate(0px);
}
#backtotop .bttbg {
   width:50px;
   height:50px;
   background:url(img/top_button.png) no-repeat 0px 0px;
}
#backtotop .bttbg:hover {
   background-position: left bottom;
}
</style>
<body>
<h1>非常好玩的GO top, 在右下角点她吧。</h1>
<div class="showme" id="backtotop">
   <div class="bttbg"></div>
</div>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=1290&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

非常好玩的GO top

图片原图