Skip to content

Commit e5efa11

Browse files
zhuchaozhuchao
committed
相册
1 parent d79144c commit e5efa11

File tree

9 files changed

+248
-0
lines changed

9 files changed

+248
-0
lines changed

‎xiangce/xiangce_jiaoben17255/css/zzsc.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
body {
2+
background-color: #333333;
3+
}
4+
ul.portfolio {
5+
margin: 50px auto 0;
6+
-ms-transform:rotate(30deg);
7+
-webkit-transform:rotate(30deg);
8+
-moz-transform:rotate(30deg);
9+
width: 200px;
10+
}
11+
ul.portfolio li {
12+
border: 1px solid #999999;
13+
height: 100px;
14+
list-style:none;
15+
margin-left: 0;
16+
opacity: 0.5;
17+
-webkit-transition: all 0.5s ease-in;
18+
-moz-transition: all 0.5s ease-in;
19+
-o-transition: all 0.5s ease-in;
20+
width: 200px;
21+
}
22+
ul.portfolio li img {
23+
height: 100px;
24+
-webkit-transition: all 0.5s ease-in;
25+
-moz-transition: all 0.5s ease-in;
26+
-o-transition: all 0.5s ease-in;
27+
width: 200px;
28+
}
29+
ul.portfolio li.feature {
30+
border: 5px solid #dddddd;
31+
-moz -box-shadow: 3px 3px 4px #222222;
32+
-webkit-box-shadow: 3px 3px 4px #222222;
33+
box-shadow: 3px 3px 4px #222222;
34+
height: 300px;
35+
margin-left: -200px;
36+
opacity: 1;
37+
position: relative;
38+
-ms-transform: rotate(-30deg);
39+
-webkit-transform: rotate(-30deg);
40+
-moz-transform: rotate(-30deg);
41+
width: 600px;
42+
z-index: 100;
43+
}
44+
ul.portfolio li.feature img {
45+
height: 300px;
46+
width: 600px;
47+
}

‎xiangce/xiangce_jiaoben17255/images/portfolio-1.jpg

104 KB
Loading

‎xiangce/xiangce_jiaoben17255/images/portfolio-2.jpg

102 KB
Loading

‎xiangce/xiangce_jiaoben17255/images/portfolio-3.jpg

46.7 KB
Loading

‎xiangce/xiangce_jiaoben17255/images/portfolio-4.jpg

80 KB
Loading

‎xiangce/xiangce_jiaoben17255/images/portfolio-5.jpg

43.9 KB
Loading

‎xiangce/xiangce_jiaoben17255/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title>jquery斜对角相册 - A5下载</title>
6+
<link href="css/zzsc.css" type="text/css" title="default" rel="stylesheet">
7+
</head>
8+
<body>
9+
<ul class="portfolio">
10+
<li><img src="images/portfolio-1.jpg" alt="Image 1"></li>
11+
<li><img src="images/portfolio-2.jpg" alt="Image 2"></li>
12+
<li class="feature"><img src="images/portfolio-3.jpg" alt="Image 3"></li>
13+
<li><img src="images/portfolio-4.jpg" alt="Image 4"></li>
14+
<li><img src="images/portfolio-5.jpg" alt="Image 5"></li>
15+
</ul>
16+
<script src="js/jquery.min.js"></script>
17+
<script src="js/zzsc.js" type="text/javascript"></script>
18+
<!-- Load HTML5 Shiv for Styling in IE < 9 -->
19+
<!--[if lt IE 9]>
20+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
21+
<![endif]-->
22+
<div style="text-align:center;clear:both">
23+
<p>适用浏览器：FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。</p>
24+
</div>
25+
</body>
26+
</html>

‎xiangce/xiangce_jiaoben17255/js/jquery.min.js

Lines changed: 154 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎xiangce/xiangce_jiaoben17255/js/zzsc.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
$(document).ready(function(){
2+
3+
$('.portfolio li').click(function() {
4+
5+
var new_feature = $(this);
6+
7+
if (!new_feature.hasClass('feature')){
8+
9+
$('li.feature').removeClass('feature');
10+
11+
setTimeout(function(){
12+
13+
new_feature.addClass('feature');
14+
15+
}, 500);
16+
17+
}
18+
19+
});
20+
21+
});

0 commit comments

Comments
 (0)