一个简单的响应组合页面过滤和悬停效果

一个简单的响应组合页面过滤和悬停效果?演示

?

?

JavaScript Code

1. <div?class="container">??
2. ??
3. ????????<ul?id="filters"?class="clearfix">??
4. ????????????<li><span?class="filter?active"?data-filter="app?card?icon?logo?web">All</span></li>??
5. ????????????<li><span?class="filter"?data-filter="app">App</span></li>??
6. ????????????<li><span?class="filter"?data-filter="card">Card</span></li>??
7. ????????????<li><span?class="filter"?data-filter="logo">Logo</span></li>??
8. ????????????<li><span?class="filter"?data-filter="web">Web</span></li>??
9. ????????</ul>??
10. ??
11. ????????<div?id="portfoliolist">??
12. ??????????????
13. ????????????<div?class="portfolio?logo"?data-cat="logo">??
14. ????????????????<div?class="portfolio-wrapper">???????????????
15. ????????????????????<img?src="img/portfolios/logo/1.jpg"?alt=""?width="150"?/>??
16. ????????????????????<div?class="label">??
17. ????????????????????????<div?class="label-text">??
18. ????????????????????????????<a?class="text-title">Bird?Document</a>??
19. ????????????????????????????<span?class="text-category">Logo</span>??
20. ????????????????????????</div>??
21. ????????????????????????<div?class="label-bg"></div>??
22. ????????????????????</div>??
23. ????????????????</div>??
24. ????????????</div>????????????????
25. ??
26. ????????????<div?class="portfolio?app"?data-cat="app">??
27. ????????????????<div?class="portfolio-wrapper">???????????
28. ????????????????????<img?src="img/portfolios/app/1.jpg"?alt=""?width="150"?/>??
29. ????????????????????<div?class="label">??
30. ????????????????????????<div?class="label-text">??
31. ????????????????????????????<a?class="text-title">Visual?Infography</a>??
32. ????????????????????????????<span?class="text-category">APP</span>??
33. ????????????????????????</div>??
34. ????????????????????????<div?class="label-bg"></div>??
35. ????????????????????</div>??
36. ????????????????</div>??
37. ????????????</div>????????
38. ??????????????
39. ????????????<div?class="portfolio?web"?data-cat="web">??
40. ????????????????<div?class="portfolio-wrapper">???????????????????????
41. ????????????????????<img?src="img/portfolios/web/1.jpg"?alt=""?width="150"?/>??
42. ????????????????????<div?class="label">??
43. ????????????????????????<div?class="label-text">??
44. ????????????????????????????<a?class="text-title">Sonor's?Design</a>??
45. ????????????????????????????<span?class="text-category">Web?design</span>??
46. ????????????????????????</div>??
47. ????????????????????????<div?class="label-bg"></div>??
48. ????????????????????</div>??
49. ????????????????</div>??
50. ????????????</div>????????????????
51. ??????????????
52. ????????????<div?class="portfolio?card"?data-cat="card">??
53. ????????????????<div?class="portfolio-wrapper">???????????
54. ????????????????????<img?src="img/portfolios/card/3.jpg"?alt=""?width="150"?/>??
55. ????????????????????<div?class="label">??
56. ????????????????????????<div?class="label-text">??
57. ????????????????????????????<a?class="text-title">Typography?Company</a>??
58. ????????????????????????????<span?class="text-category">Business?card</span>??
59. ????????????????????????</div>??
60. ????????????????????????<div?class="label-bg"></div>??
61. ????????????????????</div>??
62. ????????????????</div>??
63. ????????????</div>????
64. ??????????????????????????
65. ????????????<div?class="portfolio?app"?data-cat="app">??
66. ????????????????<div?class="portfolio-wrapper">??
67. ????????????????????<img?src="img/portfolios/app/2.jpg"?alt=""?width="150"?/>??
68. ????????????????????<div?class="label">??
69. ????????????????????????<div?class="label-text">??
70. ????????????????????????????<a?class="text-title">Weatherette</a>??
71. ????????????????????????????<span?class="text-category">APP</span>??
72. ????????????????????????</div>??
73. ????????????????????????<div?class="label-bg"></div>??
74. ????????????????????</div>??
75. ????????????????</div>??
76. ????????????</div>????????????
77. ??????????????
78. ????????????<div?class="portfolio?card"?data-cat="card">??
79. ????????????????<div?class="portfolio-wrapper">???????????
80. ????????????????????<img?src="img/portfolios/card/1.jpg"?alt=""?width="150"?/>??
81. ????????????????????<div?class="label">??
82. ????????????????????????<div?class="label-text">??
83. ????????????????????????????<a?class="text-title">BMF</a>??
84. ????????????????????????????<span?class="text-category">Business?card</span>??
85. ????????????????????????</div>??
86. ????????????????????????<div?class="label-bg"></div>??
87. ????????????????????</div>??
88. ????????????????</div>??
89. ????????????</div>????
90. ??????????????
91. ????????????<div?class="portfolio?card"?data-cat="card">??
92. ????????????????<div?class="portfolio-wrapper">???????????
93. ????????????????????<img?src="img/portfolios/card/2.jpg"?alt=""?width="150"?/>??
94. ????????????????????<div?class="label">??
95. ????????????????????????<div?class="label-text">??
96. ????????????????????????????<a?class="text-title">Techlion</a>??
97. ????????????????????????????<span?class="text-category">Business?card</span>??
98. ????????????????????????</div>??
99. ????????????????????????<div?class="label-bg"></div>??
100. ????????????????????</div>??
101. ????????????????</div>??
102. ????????????</div>????
103. ??????????????
104. ????????????<div?class="portfolio?logo"?data-cat="logo">??
105. ????????????????<div?class="portfolio-wrapper">???????????
106. ????????????????????<img?src="img/portfolios/logo/2.jpg"?alt=""?width="150"?/>??
107. ????????????????????<div?class="label">??
108. ????????????????????????<div?class="label-text">??
109. ????????????????????????????<a?class="text-title">KittyPic</a>??
110. ????????????????????????????<span?class="text-category">Logo</span>??
111. ????????????????????????</div>??
112. ????????????????????????<div?class="label-bg"></div>??
113. ????????????????????</div>??
114. ????????????????</div>??
115. ????????????</div>????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
116. ????</div><!--?container?-->??

?

原文地址:http://www.freejs.net/article_jquerytupiantexiao_126.html