文章目录

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

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

#1.回到顶部 转到底部

老生常谈的东西了,记下几个关键点:

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

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

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

1
2
3
4
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部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#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部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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部分:
1
2
3
<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部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#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部分:
1
2
3
4
5
6
7
8
9
10
<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部分:
1
2
3
<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部分:

1
2
3
4
5
6
7
8
<!-- 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部分:
1
<img class="fancybox" img="yourimg" />

♦ 本文固定连接:http://gsgundam.com/2012-04-05-jquery-totop-picture-fade-fancybox/

♦ 转载请注明:GSGundam 2012年04月05日发布于 GSGUNDAM砍柴工

友荐云推荐