css3和js网页制作实例:网页头像展示效果

css3和js网页制作实例:网页头像展示效果
. ^, P  ~& G& N% Q今天就为大家分享一个非常有创意的CSS3头像展示效果，交互性强，是一个基于css3和js来实现的，代码量不多，但是最终的效果却很让人赞叹，所以特别推荐给大家。其中关于本示例的一些css样式呈现，个人认为还有很大的发挥空间，例如鼠标经过的时候而不是切换成一个背景色和文字，而是替换成其他的相关图片（例如改为人物的其他表情），这将会是非常的有意思的。
+ r( M' n2 v- M, `
) m$ [' j5 R% n" h2 J" j
好了，接下来我们一起看看其效果的制作方法。
1 w. }/ u) \& cHTML代码结构

1. <ul class="grid"><li><a href="http://www.jiawin.com/creative-css3-avatar-display"><img src="images/1.jpg" alt="" /><div class="info"><p>1</p></div></a></li></ul>

复制代码

看了上面代码是极其简单的，就一个列表元素，你需要放多少张图片就写多少<li>。<li>里面的结构如上。
CSS样式表
! l$ y! w& G3 M" U4 X( L4 F
接下来就是我们的css样式表了，在这里只是一个示例，大家在这部分可以自由发挥，定义出你们的个性来。
! Y8 z: v. X1 h* U9 ~$ U. O. |

1. body {font-family: Helvetica, Arial, sans-serif;font-size: 16px;-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;font-smoothing: antialiased;margin:0;padding:0;background-color: #E6E6E6;}.grid {margin: 100px auto 80px auto;padding: 0px;width: 100%;height: auto;overflow: hidden;max-width: 1000px;-webkit-box-shadow:0px 40px 50px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 40px 50px rgba(0, 0, 0, 0.3);box-shadow:0px 40px 50px rgba(0, 0, 0, 0.3);}.grid li {width: 10%;background: #000000;float: left;position: relative;overflow: hidden;}.grid img {float: left;width: 100%;height: auto;position: relative;-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;-moz-transform: translate3d(0, 0, 0);transform-style: preserve-3d;backface-visibility: hidden;transform: translate3d(0, 0, 0);}.grid .info {position: absolute;width: 100%;height: 100%;padding: 15px;background: #DC584C;display: none;z-index: 2;-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-moz-transform-style: preserve-3d;-moz-backface-visibility: hidden;-moz-transform: translate3d(0, 0, 0);transform-style: preserve-3d;backface-visibility: hidden;transform: translate3d(0, 0, 0);}.grid p {font-size: 22px;font-weight: bolder;color: #FFF;}

复制代码

JavaScript代码

$ S- @) ~$ e- ^& k4 T* h5 B6 h最后，我们需要借助JavaScript来完成一些特殊的互动（动画效果）。
0 L. J  V: T  t( H( Y(function() {
0 `  Z5 c9 ~' E. i! y: M7 v$(function() {
, A) x/ i) F1 K& y* @var columns, current, easing, grid, hideItem, showItem, time,
0 X1 F7 ]" M4 F3 n$ H5 w_this = this;
grid = $(".grid");
current = {
" a9 J; b( D! {# N% Y( Windex: -1,
column: 0,
line: 0
};
% p/ P# g) J' F3 }7 ]4 ~, h% V+ Fcolumns = 10;
& n+ h6 h8 _3 m; u1 ?easing = "cubic-bezier(0.165, 0.840, 0.440, 1.000)";
time = 400;
6 X0 l6 e3 I+ G$ ogrid.on("mouseenter", "a", function(e) {
var column, el, image, index, info, item, line;
el = $(e.currentTarget);
info = el.find(".info");
image = el.find("img");
: M: }/ c% \# M& g$ U( Pindex = el.parent().index();
6 U4 w2 N. |2 c2 Rcolumn = index % columns;
line = Math.floor(index / columns);
console.log(index, column, line);
) a  g& G! z) [item = {
el: el,
index: index,
column: column,
! p: u( ~" c8 [# }2 D! Nline: line,
/ G1 M% Z9 ]! b/ [$ r9 Jinfo: info,
image: image
};
: @4 @3 u4 i# v4 X" T  O4 pif (current.el && current.index === index) return;
if (line === current.line && column > current.column) {
. R! E8 \. T3 ]& ]- {showItem(item, "-100%", 0, "25%", 0);
' _2 @& y1 @2 K& e/ O9 |5 M& {% ]hideItem(current, "100%", 0, "-25%", 0);
1 ]& H  q" g$ _} else if (line === current.line && column < current.column) { showItem(item, "100%", 0, "-25%", 0); hideItem(current, "-100%", 0, "25%", 0); } else if (line > current.line && column === current.column) {
- }; C3 P* f! P6 RshowItem(item, 0, "-100%", 0, "25%");
hideItem(current, 0, "100%", 0, "-25%");
} else {
. g# F2 O* l! cshowItem(item, 0, "100%", 0, "-25%");
hideItem(current, 0, "-100%", 0, "25%");
}
* i- u4 e" m3 creturn current = item;
: g. E4 V8 f" K- U' ^" ]});
showItem = function(item, infoX, infoY, imageX, imageY) {
item.info.stop().css({
' C  b; M& Y3 ]; ~( Px: infoX,
: T/ h, h/ {( E$ O8 \# Z! d# Wy: infoY,
display: "block"
  w8 A7 F+ c6 V; S& f* q/ v  b}).transition({
  j) ~. u& e- G7 ^x: 0,
1 U2 C3 N9 j$ {: t/ s! w* iy: 0,
duration: time,
easing: easing
});
3 K3 Z  x: N2 ^8 O/ g, Vreturn item.image.stop().transition({
x: imageX,
/ [! d$ i5 `) u- ry: imageY,
opacity: .5,
duration: time,
1 m6 \1 Q  @& T. E/ Ieasing: easing
0 M( y5 R# P) i1 {4 K6 r% u});
};
return hideItem = function(item, infoX, infoY, imageX, imageY) {
if (!item.el) return;
/ ]3 t, p" J) d9 xitem.info.stop().transition({
1 @' a+ m" \2 t+ s/ ^" cx: infoX,
y: infoY,
duration: time,
) e; z- K7 i* @2 W# K  Reasing: easing
4 V) g4 S8 [& |: L7 m});
return item.image.stop().css({
( u! W: F6 A: @8 V" i3 wx: imageX,
y: imageY,
opacity: .5
}).transition({
. g5 q# j1 ^2 Fx: 0,
y: 0,
3 B9 U4 v- y* k) \% Hopacity: 1,
6 m9 N, @8 X6 ^; vduration: time,
easing: easing
});
};
});
" v- [/ P# H7 `+ v" H7 k9 {  N}).call(this);
1 q% a/ p& {7 l: l

1. 到这里，我们的示例基本上就完成了，但是按照上面几步来，最终是没效果的，那是因为我们还没引入jQuery库和一个jQuery插件（jQuery Transit）。

复制代码

1. <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>

复制代码

jQuery Transit是一个利用了CSS3的过渡和转换特性来实现动画特效的 jQuery插件，与jQuery的animate方法有着同样的语法。此插件支持这个特性所提供的大部分方法，同时增加了 jQuery 独有的技术：回调(callbacks)、自动增加浏览器CSS前缀、链盒(chaining)等。由于此插件使用了真正的CSS3规则，所以它不能兼容旧版本的浏览器。

下载附件：http://www.webjx.com/files/soft/1_130711103319.rar
8 ]; G# P3 ^& s- }; U- e2 H/ j2 a) i今天的示例就到这里了，希望大家喜欢，如果有问题可以在下方留言，一起探讨研究。

楼主说的是什么？我是小白，好像还没看明白！

教教我怎么seo

终于看完了~~~

这是怎么了啊??

哈哈 ok ~~~

为了不让帖子沉得太快！！！为了人人知道这个~！！ 我不是原创~！！但是我要把他发扬广大~！！！

假如我们把自己力所能及的事都完成了，我们会真的令自己大吃一惊。

呵呵 大家好奇嘛 来观看下~~~~

说嘛1~~~想说什么就说什么嘛~~

下次有人骂我了...我给他还回去..

晕倒`````不要造我的谣言哦~~小心我打你pp~~嘿嘿~~~~

教教我怎么seo

貌似我真的很笨????哎

老天不公啊.....