Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 157392
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
Jquery动画实现NBA2015-2016比赛回顾图

分类： jQuery

2016-07-06 15:47:18

因为该博客不能上传过大的动图，所以我把gif图链接放上来了
!/b/dAMBAAAAAAAA&ek=1&kp=1&pt=0&bo=mgJvAZoCbwECCCw!&sce=60-2-2&rf=0-0

HTML代码如下

点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <title>NBA2015-2016比赛回顾图</title>
  7.     <link rel="stylesheet" href="style.css">
  8.     <script src="jquery.js"></script>
  9.     <script src="common.js"></script>
  10. </head>
  11. <body>
  12.     <div class="view">
  13.         <table>
  14.             <tr>
  15.                 <td><div class="nba-west juejin"><img src="images/juejin.png" alt=""></div></td>
  16.                 <td></td>
  17.                 <td></td>
  18.                 <td></td>
  19.                 <td></td>
  20.                 <td></td>
  21.                 <td><div class="nba-east kaier"><img src="images/kaier.png" alt=""></div></td>
  22.             </tr>
  23.             <tr>
  24.                 <td><div class="nba-west kaituo"><img src="images/kaituo.png" alt=""></div></td>
  25.                 <td></td>
  26.                 <td></td>
  27.                 <td></td>
  28.                 <td></td>
  29.                 <td></td>
  30.                 <td><div class="nba-east lanwang"><img src="images/lanwang.png" alt=""></div></td>
  31.             </tr>
  32.             <tr>
  33.                 <td><div class="nba-west senlin"><img src="images/senlin.png" alt=""></div></td>
  34.                 <td></td>
  35.                 <td></td>
  36.                 <td></td>
  37.                 <td></td>
  38.                 <td></td>
  39.                 <td><div class="nba-east nike"><img src="images/nike.png" alt=""></div></td>
  40.             </tr>
  41.             <tr>
  42.                 <td><div class="nba-west leiting"><img src="images/leiting.png" alt=""></div></td>
  43.                 <td></td>
  44.                 <td></td>
  45.                 <td></td>
  46.                 <td></td>
  47.                 <td></td>
  48.                 <td><div class="nba-east qiliu"><img src="images/qiliu.png" alt=""></div></td>
  49.             </tr>
  50.             <tr>
  51.                 <td><div class="nba-west jueshi"><img src="images/jueshi.png" alt=""></div></td>
  52.                 <td></td>
  53.                 <td></td>
  54.                 <td></td>
  55.                 <td></td>
  56.                 <td></td>
  57.                 <td><div class="nba-east menglong"><img src="images/menglong.png" alt=""></div></td>
  58.             </tr>
  59.             <tr>
  60.                 <td><div class="nba-west yongshi"><img src="images/yongshi.png" alt=""></div></td>
  61.                 <td></td>
  62.                 <td></td>
  63.                 <td></td>
  64.                 <td></td>
  65.                 <td></td>
  66.                 <td><div class="nba-east gongniu"><img src="images/gongniu.png" alt=""></div></td>
  67.             </tr>
  68.             <tr>
  69.                 <td><div class="nba-west kuaichuan"><img src="images/kuaichuan.png" alt=""></div></td>
  70.                 <td></td>
  71.                 <td></td>
  72.                 <td><img src="images/final.png" style="width:100%;position:absolute;display:none" class="final"><img src="images/regular.png" style="width:100%;position:absolute;" class="regular"></td>
  73.                 <td></td>
  74.                 <td></td>
  75.                 <td><div class="nba-east qishi"><img src="images/qishi.png" alt=""></div></td>
  76.             </tr>
  77.             <tr>
  78.                 <td><div class="nba-west huren"><img src="images/huren.png" alt=""></div></td>
  79.                 <td></td>
  80.                 <td></td>
  81.                 <td></td>
  82.                 <td></td>
  83.                 <td></td>
  84.                 <td><div class="nba-east huosai"><img src="images/huosai.png" alt=""></div></td>
  85.             </tr>
  86.             <tr>
  87.                 <td><div class="nba-west taiyang"><img src="images/taiyang.png" alt=""></div></td>
  88.                 <td></td>
  89.                 <td></td>
  90.                 <td></td>
  91.                 <td></td>
  92.                 <td></td>
  93.                 <td><div class="nba-east buxing"><img src="images/buxing.png" alt=""></div></td>
  94.             </tr>
  95.             <tr>
  96.                 <td><div class="nba-west guowang"><img src="images/guowang.png" alt=""></div></td>
  97.                 <td></td>
  98.                 <td></td>
  99.                 <td></td>
  100.                 <td></td>
  101.                 <td></td>
  102.                 <td><div class="nba-east xionglu"><img src="images/xionglu.png" alt=""></div></td>
  103.             </tr>
  104.             <tr>
  105.                 <td><div class="nba-west xiaoniu"><img src="images/xiaoniu.png" alt=""></div></td>
  106.                 <td></td>
  107.                 <td></td>
  108.                 <td></td>
  109.                 <td></td>
  110.                 <td></td>
  111.                 <td><div class="nba-east laoying"><img src="images/laoying.png" alt=""></div></td>
  112.             </tr>
  113.             <tr>
  114.                 <td><div class="nba-west huojian"><img src="images/huojian.png" alt=""></div></td>
  115.                 <td></td>
  116.                 <td></td>
  117.                 <td></td>
  118.                 <td></td>
  119.                 <td></td>
  120.                 <td><div class="nba-east huangfeng"><img src="images/huangfeng.png" alt=""></div></td>
  121.             </tr>
  122.             <tr>
  123.                 <td><div class="nba-west huixiong"><img src="images/huixiong.png" alt=""></div></td>
  124.                 <td></td>
  125.                 <td></td>
  126.                 <td></td>
  127.                 <td></td>
  128.                 <td></td>
  129.                 <td><div class="nba-east rehuo"><img src="images/rehuo.png" alt=""></div></td>
  130.             </tr>
  131.             <tr>
  132.                 <td><div class="nba-west tihu"><img src="images/tihu.png" alt=""></div></td>
  133.                 <td></td>
  134.                 <td></td>
  135.                 <td></td>
  136.                 <td></td>
  137.                 <td></td>
  138.                 <td><div class="nba-east moshu"><img src="images/moshu.png" alt=""></div></td>
  139.             </tr>
  140.             <tr>
  141.                 <td><div class="nba-west maci"><img src="images/maci.png" alt=""></div></td>
  142.                 <td></td>
  143.                 <td></td>
  144.                 <td></td>
  145.                 <td></td>
  146.                 <td></td>
  147.                 <td><div class="nba-east qicai"><img src="images/qicai.png" alt=""></div></td>
  148.             </tr>
  149.         </table>
  150.         <div class="west">
  151.             西部
  152.         </div>
  153.         <div class="east">
  154.             东部
  155.         </div>
  156.         <div class="title">
  157.             NBA2015/2016赛季比赛回顾图<span style="color:#999;font-size:16px;">(--wei)</span>
  158.         </div>
  159.         <div class="part part1">西北赛区</div>
  160.         <div class="part part2">太平洋赛区</div>
  161.         <div class="part part3">西南赛区</div>
  162.         <div class="part part4">大西洋赛区</div>
  163.         <div class="part part5">中部赛区</div>
  164.         <div class="part part6">东南赛区</div>
  165.     </div>
  166.     <div class="month four">四月</div>
  167.     <div class="month three">三月</div>
  168.     <div class="month two">二月</div>
  169.     <div class="month one">一月</div>
  170.     <div class="month twelve">十二月</div>
  171.     <div class="month eleven">十一月</div>
  172.     <div class="month ten">十月</div>
  173. </body>
  174. </html>
CSS代码如下：

点击(此处)折叠或打开

  1. @charset "utf-8";
  2. *{
  3.     padding:0;
  4.     margin:0;
  5. }
  6. html,body{
  7.     width: 100%;
  8.     height: 100%;
  9.     overflow: hidden;
  10. }
  11. .view table{
  12.     width: 90%;
  13.     border-collapse:collapse;
  14.     position: absolute;
  15.     left: 5%;
  16. }
  17. .view table td{
  18.   width:14%;
  19.   border:1px solid white;
  20.   position: relative;
  21. }
  22. .view table tr:first-child td{
  23.   border:none;
  24. }
  25. .view table tr:nth-child(2) td:first-child{
  26.     border-top:1px solid #ccc;
  27.     border-right:1px solid #ccc;
  28. }
  29. .view table tr:nth-child(3) td:first-child{
  30.     border-bottom:1px solid #ccc;
  31.     border-right:1px solid #ccc;
  32. }
  33. .view table tr:nth-child(2) td:nth-child(2){
  34.     border-bottom:1px solid #ccc;
  35. }
  36. .view table tr:nth-child(2) td:nth-child(6){
  37.     border-right:1px solid #ccc;
  38.     border-bottom: 1px solid #ccc;
  39. }
  40. .view table tr:nth-child(3) td:nth-child(6){
  41.     border-right:1px solid #ccc;
  42. }
  43. .view table tr:nth-child(2) td:last-child{
  44.     border-top:1px solid #ccc;
  45.     border-left:1px solid #ccc;
  46. }
  47. .view table tr:nth-child(3) td:last-child{
  48.     border-bottom:1px solid #ccc;
  49.     border-left:1px solid #ccc;
  50. }

  52. .view table tr:nth-child(5) td:first-child{
  53.     border-bottom:1px solid #ccc;
  54. }
  55. .view table tr:nth-child(5) td:last-child{
  56.     border-bottom:1px solid #ccc;
  57. }
  58. .view table tr:nth-child(6) td:first-child{
  59.     border-right:1px solid #ccc;
  60. }
  61. .view table tr:nth-child(7) td:first-child{
  62.     border-bottom:1px solid #ccc;
  63.     border-right:1px solid #ccc;
  64. }
  65. .view table tr:nth-child(6) td:nth-child(2){
  66.     border-bottom:1px solid #ccc;
  67. }
  68. .view table tr:nth-child(6) td:nth-child(6){
  69.     border-right:1px solid #ccc;
  70.     border-bottom: 1px solid #ccc;
  71. }
  72. .view table tr:nth-child(7) td:nth-child(6){
  73.     border-right:1px solid #ccc;
  74. }
  75. .view table tr:nth-child(6) td:last-child{
  76.     border-left:1px solid #ccc;
  77. }
  78. .view table tr:nth-child(7) td:last-child{
  79.     border-bottom:1px solid #ccc;
  80.     border-left:1px solid #ccc;
  81. }

  83. .view table tr:nth-child(9) td:first-child{
  84.     border-bottom:1px solid #ccc;
  85. }
  86. .view table tr:nth-child(9) td:last-child{
  87.     border-bottom:1px solid #ccc;
  88. }
  89. .view table tr:nth-child(10) td:first-child{
  90.     border-right:1px solid #ccc;
  91. }
  92. .view table tr:nth-child(11) td:first-child{
  93.     border-bottom:1px solid #ccc;
  94.     border-right:1px solid #ccc;
  95. }
  96. .view table tr:nth-child(10) td:nth-child(2){
  97.     border-bottom:1px solid #ccc;
  98. }
  99. .view table tr:nth-child(10) td:nth-child(6){
  100.     border-right:1px solid #ccc;
  101.     border-bottom: 1px solid #ccc;
  102. }
  103. .view table tr:nth-child(11) td:nth-child(6){
  104.     border-right:1px solid #ccc;
  105. }
  106. .view table tr:nth-child(10) td:last-child{
  107.     border-left:1px solid #ccc;
  108. }
  109. .view table tr:nth-child(11) td:last-child{
  110.     border-bottom:1px solid #ccc;
  111.     border-left:1px solid #ccc;
  112. }

  114. .view table tr:nth-child(13) td:first-child{
  115.     border-bottom:1px solid #ccc;
  116. }
  117. .view table tr:nth-child(13) td:last-child{
  118.     border-bottom:1px solid #ccc;
  119. }
  120. .view table tr:nth-child(14) td:first-child{
  121.     border-right:1px solid #ccc;
  122. }
  123. .view table tr:nth-child(15) td:first-child{
  124.     border-bottom:1px solid #ccc;
  125.     border-right:1px solid #ccc;
  126. }
  127. .view table tr:nth-child(14) td:nth-child(2){
  128.     border-bottom:1px solid #ccc;
  129. }
  130. .view table tr:nth-child(14) td:nth-child(6){
  131.     border-right:1px solid #ccc;
  132.     border-bottom: 1px solid #ccc;
  133. }
  134. .view table tr:nth-child(15) td:nth-child(6){
  135.     border-right:1px solid #ccc;
  136. }
  137. .view table tr:nth-child(14) td:last-child{
  138.     border-left:1px solid #ccc;
  139. }
  140. .view table tr:nth-child(15) td:last-child{
  141.     border-bottom:1px solid #ccc;
  142.     border-left:1px solid #ccc;
  143. }

  145. .view table tr:nth-child(3) td:nth-child(2){
  146.     border-right:1px solid #ccc;
  147. }
  148. .view table tr:nth-child(4) td:nth-child(2){
  149.     border-right:1px solid #ccc;
  150. }
  151. .view table tr:nth-child(5) td:nth-child(2){
  152.     border-right:1px solid #ccc;
  153. }
  154. .view table tr:nth-child(6) td:nth-child(2){
  155.     border-right:1px solid #ccc;
  156. }
  157. .view table tr:nth-child(3) td:nth-child(5){
  158.     border-right:1px solid #ccc;
  159. }
  160. .view table tr:nth-child(4) td:nth-child(5){
  161.     border-right:1px solid #ccc;
  162. }
  163. .view table tr:nth-child(5) td:nth-child(5){
  164.     border-right:1px solid #ccc;
  165. }
  166. .view table tr:nth-child(6) td:nth-child(5){
  167.     border-right:1px solid #ccc;
  168. }
  169. .view table tr:nth-child(4) td:nth-child(3){
  170.     border-bottom:1px solid #ccc;
  171. }
  172. .view table tr:nth-child(4) td:nth-child(5){
  173.     border-bottom:1px solid #ccc;
  174. }

  176. .view table tr:nth-child(11) td:nth-child(2){
  177.     border-right:1px solid #ccc;
  178. }
  179. .view table tr:nth-child(12) td:nth-child(2){
  180.     border-right:1px solid #ccc;
  181. }
  182. .view table tr:nth-child(13) td:nth-child(2){
  183.     border-right:1px solid #ccc;
  184. }
  185. .view table tr:nth-child(14) td:nth-child(2){
  186.     border-right:1px solid #ccc;
  187. }
  188. .view table tr:nth-child(11) td:nth-child(5){
  189.     border-right:1px solid #ccc;
  190. }
  191. .view table tr:nth-child(12) td:nth-child(5){
  192.     border-right:1px solid #ccc;
  193. }
  194. .view table tr:nth-child(13) td:nth-child(5){
  195.     border-right:1px solid #ccc;
  196. }
  197. .view table tr:nth-child(14) td:nth-child(5){
  198.     border-right:1px solid #ccc;
  199. }
  200. .view table tr:nth-child(12) td:nth-child(3){
  201.     border-bottom:1px solid #ccc;
  202. }
  203. .view table tr:nth-child(12) td:nth-child(5){
  204.     border-bottom:1px solid #ccc;
  205. }

  207. .view table tr:nth-child(5) td:nth-child(3){
  208.     border-right: 1px solid #ccc;
  209. }
  210. .view table tr:nth-child(6) td:nth-child(3){
  211.     border-right: 1px solid #ccc;
  212. }
  213. .view table tr:nth-child(7) td:nth-child(3){
  214.     border-right: 1px solid #ccc;
  215. }
  216. .view table tr:nth-child(8) td:nth-child(3){
  217.     border-right: 1px solid #ccc;
  218. }
  219. .view table tr:nth-child(9) td:nth-child(3){
  220.     border-right: 1px solid #ccc;
  221. }
  222. .view table tr:nth-child(10) td:nth-child(3){
  223.     border-right: 1px solid #ccc;
  224. }
  225. .view table tr:nth-child(11) td:nth-child(3){
  226.     border-right: 1px solid #ccc;
  227. }
  228. .view table tr:nth-child(12) td:nth-child(3){
  229.     border-right: 1px solid #ccc;
  230. }
  231. .view table tr:nth-child(5) td:nth-child(4){
  232.     border-right: 1px solid #ccc;
  233. }
  234. .view table tr:nth-child(6) td:nth-child(4){
  235.     border-right: 1px solid #ccc;
  236. }
  237. .view table tr:nth-child(7) td:nth-child(4){
  238.     border-right: 1px solid #ccc;
  239. }
  240. .view table tr:nth-child(8) td:nth-child(4){
  241.     border-right: 1px solid #ccc;
  242.     border-bottom: 1px solid #ccc;
  243. }
  244. .view table tr:nth-child(9) td:nth-child(4){
  245.     border-right: 1px solid #ccc;
  246. }
  247. .view table tr:nth-child(10) td:nth-child(4){
  248.     border-right: 1px solid #ccc;
  249. }
  250. .view table tr:nth-child(11) td:nth-child(4){
  251.     border-right: 1px solid #ccc;
  252. }
  253. .view table tr:nth-child(12) td:nth-child(4){
  254.     border-right: 1px solid #ccc;
  255. }
  256. .west,.east,.title{
  257.     position: absolute;
  258.     width: 80%;
  259.     font-size: 20px;
  260.     left:10%;
  261.     color: red;
  262.     font-weight: bold;
  263. }
  264. .east{
  265.     text-align: right;
  266. }
  267. .title{
  268.     text-align: center;
  269.     padding:10px 0;
  270. }
  271. .nba-west,.nba-east{
  272.     position:absolute;
  273.     text-align: center;
  274. }
  275. .nba-west img,.nba-east img{
  276.     width: 100%;
  277. }
  278. .nba-east{
  279.     right:0;
  280. }
J因为篇幅问题，jquery动画代码就不粘贴了，思路如下：1、NBA常规赛是10月3号到4月14号，这段期间球队队标的动画以每个球队的常规赛胜率为标准
2、季后赛从4月17号开打，每个比赛日进行若干比赛，所以这些比赛的动画要同时进行，被淘汰的队伍透明度设为0.3
阅读(1683) | 评论(0) | 转发(0) |
1

上一篇：canvas实现贪吃蛇游戏

下一篇：CSS3实现百叶窗轮播效果

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6