首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 移动开发 > 移动开发 >

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

2014-01-03 
一个简单的响应组合页面过滤和悬停效果一个简单的响应组合页面过滤和悬停效果?演示??JavaScript Codediv?

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

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

?

?

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

读书人精选
热点排行