作者：淡淡木香coolgirl | 来源：互联网 | 2013-05-15 18:00
Params：一组包含作为动画属性和终值的样式属性和及其值的集合duration(可选)：种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值(如：1000)easing(可选)：要使用的擦除
一、界面预览
鼠标放到右边的Tab按钮上，文字透明度降低，同时一段文字高亮显示，效果如下：
Demo地址：http://5thirtyone.com/sandbox/samples/fadefocus/
很绚丽的效果幺！
二、实现原理
将要高亮显示的文字加上段落标记，class=”mask”的div做为遮罩层，使此遮罩层位于文字内容之上（z-index属性，使用Jquery给段落动态添加样式类。
三、HTML代码
|
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
|
ul>
Avatar (2009 film)h2>
Avatar, also known as James Cameron's Avatar, is an American 3-D science fiction
epic film written and directed by
James Camerona>, and was released on December 16, 2009 by 20th Century Fox.
The film is co-produced by
Lightstorm Entertainmenta>, andfocuses on an epic conflict on Pandoraspan>,
an inhabited Earth-sized moon of Polyphemus, one of three fictional gas giants orbiting
Pandora, human colonists and the sentient humanoid indigenous inhabitants of Pandora,
the Na'vi, engage in a war over the planet's resources and the latter's continued
existence. The film's title refers toan avatar, a representation of
a real person in a virtual worldspan>.p>
The film was released in 2D and 3D formatsspan>, along with an
IMAX 3D release in selected theaters. The film is being touted as a breakthrough
in terms of filmmaking technology, for its development of 3D viewing and stereoscopic
filmmaking with cameras that were specially designed for the film's production.p>
Read the rest of the original
Wikipedia page about Avatara>p>
div>
div>
div>
div>
|
|
entity-results类中显示了Tab按钮，每个按钮控制左边文字的透明度，段落文字的高亮显示。
entity-source类中有三个段落span Calss分别为d1 d2 d3，也就是高亮文字段落。
class=”mask”的空div放到最后，此Div也就是一个遮罩层。
四、CSS关键代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
.entity-source,.entity-sourcespan.show
{
position:relative;
}
.entity-source.mask
{
display:none;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:1;
}
.entity-sourcespan
{
z-index:2;
}
.entity-sourcespan.show
{
background:#ffc;
color:#000;
}
|
|
类mask中的z-index:1使得
”mask”>覆盖在左边文字内容之上。
z-nidex：2又使得span段落覆盖在
”mask”>之上。从而显示实现了段落文字高亮显示。
五、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
|
jQuery(document).ready(function($) {
// mask source控制mask的动画效果
varmaskSource = jQuery('.mask');
jQuery('.entity-results').hover(function() {
maskSource.animate({opacity:0.7},1).fadeIn('750');
},function() {
maskSource.fadeOut('1000');
});
// match hover控制段落的高亮显示
varsample1 = jQuery('span.d1');
varsample2 = jQuery('span.d2');
varsample3 = jQuery('span.d3');
jQuery('a.d1').hover(function() {
sample1.addClass('show');//给段落添加类
},function() {
sample1.removeClass('show');//移除段落类
});
jQuery('a.d2').hover(function() {
sample2.addClass('show');
},function() {
sample2.removeClass('show');
});
jQuery('a.d3').hover(function() {
sample3.addClass('show');
},function() {
sample3.removeClass('show');
});
});
|
|
动画函数animate(params,[duration],[easing],[callback])
Params：一组包含作为动画属性和终值的样式属性和及其值的集合
duration(可选)：种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing(可选)：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear"和"swing".
callback(可选)：在动画完成时执行的函数
淡入效果函数：fadeIn(speed,[callback])
Speed：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback(可选)：(Optional)在动画完成时执行的函数
淡出效果函数：fadeOut解释同fadeIn
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有