Jquery和CSS3实现图片鱼眼显示效果
?
记得在Flex中实现鱼眼效果的图片展示功能非常容易，对于JS而言，则略显复杂。但如今jquery和CSS3的组合，使得这种功能变得异常容易。今天我们就学习如何利用jquery和CSS3来实现各种不同的鱼眼效果。
作者：夜飞羽?来源：www.mxria.com ?时间：2012-02-27
?基本效果：鼠标移动到图片上时，放大图片同时将该图片周围的图片适当放大，形成一个鱼眼效果，图片依次高亮显示。我们可以参看http://porscheeveryday.com/?这个swf的显示效果。为了用jquery实现该效果，我们将使用一个插件 jQuery Proximity plugin?作者 James Padolsey.
现在让我们一步步学习如何实现类似的鱼眼效果。首先我们构建主容器展示图片。采用ul无序列表方式来组织图片，代码如下
<ul id="pe-thumbs" class="pe-thumbs">
???? <li><a href="#"><img src="images/thumbs/1.jpg" />
???????????? <div class="pe-description"><h3>鱼眼效果</h3><p>美瑞网www.mxria.com</p></div></a></li>
???? <li><!-- ... --></li>
</ul>
主容器构建好后，我们接下来定义样式。CSS3代码如下，背景采用透明处理，同时给容器加上了阴影效果。
.pe-thumbs:before {???? content: "";
???? display: block;
???? position: absolute;
???? top: 0px;
???? left: 0px;
???? width: 100%;
???? height: 100%;
???? background: rgba(255,102,0,0.2);
?}
为了增加更好的效果，我们使用：before伪元素增添了对比效应。这里出现了一个很特别的伪元素：rgba，这里对其简要说明。background在CSS3中得到了大力增强，背景透明效果如上面的代码中有用到，而rgba它的效果类似opacity，可以取得很风骚的半透明的效果，如果应用到合适的配色，效果很赞。最主要的区别是，它不会将该区块里头含有的文字也变成半透明，只是改变容器区块。
?? .pe-thumbs:before {
??? content: "";
??? display: block;
??? position: absolute;
??? top: 0px;
??? left: 0px;
??? width: 100%;
??? height: 100%;
??? background: rgba(255,102,0,0.2);
}
为每个图片项设置相应的样式，定义其位置、透明度。
?
.pe-thumbs li{ ????float: left;
????position: relative;
} .pe-thumbs li a, .pe-thumbs li a img{ ????display: block;
????position: relative;
}其他部分略过，大家可以看源代码中的内容。下面来看看Javascript部分。
JS部分主要的思路就是当鼠标接近图片后，对利用hover效果来触发，对光标悬停的图片进行位置计算，并将其相连的图片进行对应的样式转换，其中核心的内容就是识别出主容器边缘的图片，并进行相应处理。代码如下：
|
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
????// list of thumbs
var $list?????? = $('#pe-thumbs'),
????// list's width and offset left.
????// this will be used to know the position of the description container
????listW?????? = $list.width(),
????listL?????? = $list.offset().left,
????// the images
????$elems????? = $list.find('img'),
????// the description containers
????$descrp???? = $list.find('div.pe-description'),
????// maxScale : maximum scale value the image will have
????// minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
????settings??? = {
????????maxScale??? : 1.3,
????????maxOpacity? : 0.9,
????????minOpacity? : Number( $elems.css('opacity') )
????},
????init??????? = function() {
???????????// minScale will be set in the CSS
????????settings.minScale = _getScaleVal() || 1;
????????// preload the images (thumbs)
????????_loadImages( function() {
???????????????_calcDescrp();
????????????_initEvents();
???????????});
???????},
????// Get Value of CSS Scale through JavaScript:
????// http://css-tricks.com/get-value-of-css-rotation-through-javascript/
????_getScaleVal= function() {
???????????var st = window.getComputedStyle($elems.get(0), null),
????????????tr = st.getPropertyValue("-webkit-transform") ||
?????????????????st.getPropertyValue("-moz-transform") ||
?????????????????st.getPropertyValue("-ms-transform") ||
?????????????????st.getPropertyValue("-o-transform") ||
?????????????????st.getPropertyValue("transform") ||
?????????????????"fail...";
???????????if( tr !== 'none' ) {????
???????????????var values = tr.split('(')[1].split(')')[0].split(','),
????????????????a = values[0],
????????????????b = values[1],
????????????????c = values[2],
????????????????d = values[3];
???????????????return Math.sqrt( a * a + b * b );
???????????}
???????},
????// calculates the style values for the description containers,
????// based on the settings variable
????_calcDescrp = function() {
???????????$descrp.each( function(i) {
???????????????var $el???? = $(this),
????????????????$img??? = $el.prev(),
????????????????img_w?? = $img.width(),
????????????????img_h?? = $img.height(),
????????????????img_n_w = settings.maxScale * img_w,
????????????????img_n_h = settings.maxScale * img_h,
????????????????space_t = ( img_n_h - img_h ) / 2,
????????????????space_l = ( img_n_w - img_w ) / 2;
???????????????$el.data( 'space_l', space_l ).css({
????????????????height? : settings.maxScale * $el.height(),
????????????????top???? : -space_t,
????????????????left??? : img_n_w - space_l
????????????});
???????????});
???????},
????_initEvents = function() {
???????????$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {
???????????????var $el???????? = $(this),
????????????????$li???????? = $el.closest('li'),
????????????????$desc?????? = $el.next(),
????????????????scaleVal??? = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
????????????????scaleExp??? = 'scale(' + scaleVal + ')';
???????????????// change the z-index of the element once
????????????// it reaches the maximum scale value
????????????// also, show the description container
????????????if( scaleVal === settings.maxScale ) {
???????????????????$li.css( 'z-index', 1000 );
???????????????????if( $desc.offset().left + $desc.width() > listL + listW ) {
???????????????????????$desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );
???????????????????}
???????????????????$desc.fadeIn( 800 );
???????????????}
????????????else {
???????????????????$li.css( 'z-index', 1 );
???????????????????$desc.stop(true,true).hide();
???????????????}???
???????????????$el.css({
????????????????'-webkit-transform' : scaleExp,
????????????????'-moz-transform'??? : scaleExp,
????????????????'-o-transform'????? : scaleExp,
????????????????'-ms-transform'???? : scaleExp,
????????????????'transform'???????? : scaleExp,
????????????????'opacity'?????????? : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
????????????});
???????????});
???????},
????_loadImages = function( callback ) {
???????????var loaded? = 0,
????????????total?? = $elems.length;
???????????$elems.each( function(i) {
???????????????var $el = $(this);
???????????????$('<IMG>').load( function() {
???????????????????++loaded;
????????????????if( loaded === total )
????????????????????callback.call();
???????????????}).attr( 'src', $el.attr('src') );
???????????});
???????};
???return {
????init??? : init
}; |
参考英文原文http://tympanus.net/codrops/2012/01/04/thumbnail-proximity-effect/?翻译时非直译，加入了自己的理解。 DEMO? 源代码下载?
作者：夜飞羽?来源：www.mxria.com ?时间：2012-02-27