jQuery实现回到顶部 图片渐隐 Fancybox 效果

文章目录

很幸运的保存了一篇blogbus时代的博文。

前两天为了修复疾风博客中的两个bug，由于jQuery特效都不是原创的，所以看了一下jQuery。把bug fix掉了，也顺道学了些效果。尝试了一下，之前不知道为什么js都没添加成功，但是这次没问题了，大致记录下。(碰到没有引入jQuery库的，在单独使用时要自行引入)

#1.回到顶部 转到底部

老生常谈的东西了，记下几个关键点：

1.css中 #回到顶部ID{position:fixed} 不能少，否则位置无法固定；

2.jQuery中要直接实现转到底部，只要 $(’html,body’) 来获取页面高度就可以了。如果是要转到某一个对象，那就替换成该对象ID或类名，也可以很方便的实现。

那么贴上我自己的jQuery部分的代码吧

jQuery(document).ready(function($){
	$('#go-top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
	$('#fall').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});
});

另外也贴上一个个人觉得很不错的代码，带 FadeIn 和 FadeOut 效果。（原文地址：http://my.oss.org.cn/space.php?uid=5499&do=blog&id=87655 ）

CSS部分：

#back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -150px;
}

#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;

    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}

/* arrow icon (span tag) */
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(up-arrow.png) no-repeat center center;

    /* rounded corners */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}

jQuery部分：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();

    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
</script>

HTML部分：

<p id="back-top">
    <a href="#top"><span></span>Back to Top</a>
<p>

#2.图片渐隐 图片渐现

几个要点：

1.图片显示的方式，是在css中使用background而不是直接在html中使用<img />，否则难以实现图片替换；

2.<span class=\”hover\”></span>要嵌入在<a></a>标签中；

3.用jQuery来控制span.hover的透明度。

CSS部分：

#header .nav .sns{
    float:right;
    margin:-10px -20px 0 0;
}
#header .nav .sns a#rss{
    background:url(http://weisay.googlecode.com/files/rss.gif) no-repeat scroll center top transparent;
    float:right;
    display:block;
    cursor:pointer;
    background-position:0 0;
    height:28px;
    width:28px;
    margin: 0 0 0 20px;
}
.sns a#rss span.hover{
    background:url(http://weisay.googlecode.com/files/rss.gif) no-repeat scroll center top transparent;
    float:right;
    display:block;
    cursor:pointer;
    background-position:0 -28px;
    height:28px;
    width:28px;
    margin: 0 0 0 20px;
}

jQuery部分：

<script type="text/javascript">
jQuery(document).ready(function(jQuery){    jQuery('.sns').wrapInner('<span class="hover"></span>').css('textIndent','0').each(function () {
        jQuery('span.hover').css('opacity', 0).hover(function () {
            jQuery(this).stop().fadeTo(350, 1);
        }, function () {
            jQuery(this).stop().fadeTo(350, 0);
        });
    });
});
</script>

HTML部分：

<div class="sns">
    <a id="rss" href="http://feed.feedsky.com/gsgundam" title="订阅我的博客" target="_blank"><span class="hover"></span></a>
</div>

3.FancyBox

插件类的就再简单不过了，直接参照使用说明，有2个要注意的小点：

1.在初始化的时候最好使用一个单独的类来区别使用fancybox效果的图片，例如，$(\’.fancybox\’).fancybox()，以免出现一些不可预见的问题；

2.我是直接引用官方的jQuery文件，有时加载速度会比较慢，有条件还是放在本地比较好，也能保证稳定性。

jQuery部分：

<!-- Add fancyBox -->
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox').fancybox();
    });
</script>

HTML部分：

<img class="fancybox" img="yourimg" />