JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<h1><a href="http://www.cnblogs.com/dtdxrk/" target="_black">文刀日月-BLOG</a>Fixed Gear-JavaScript版</h1>
<div id="content">
    <ul id="menu"></ul>
    <div id="chejia"></div>
    <div id='lunzu'></div>
    <div id='lunzu2'></div>
    <div id="waitai"></div>
    <div id="waitai2"></div>
    <div id="lt"></div>
    <div id="qiancha"></div>
    <div id="wanzu"></div>
    <div id="yapan"></div>
    <div id="bali"></div>
    <div id="zuogan"></div>
    <div id="chezuo"></div>
    <div id="wanba"></div>
    <div id="jiaota"></div>
    <div id="jiaota2"></div>
</div>

CSS

*{margin: 0;padding: 0;list-style: none;}
    body{background: #333;font:12px '微软雅黑', arial, \5b8b\4f53, sans-serif;}
    
    h1{width: 800px;margin: 10px auto; padding:0 10px;background: #fff; line-height: 80px; height: 80px;}
    h1 a{float:right;font-size: 16px;color: #ff007f;text-decoration: none;}
    h1 a:hover{text-decoration: underline;}

    #content{background:#fff url(http://images.cnblogs.com/cnblogs_com/dtdxrk/433282/o_bg.jpg) no-repeat 10px 10px;padding: 10px; width: 800px; height:550px;margin: 0 auto; position: relative; color: #333;}
    #content div{position:absolute;}

    #chejia{width: 386px; height: 250px; background: url(http://images.cnblogs.com/cnblogs_com/dtdxrk/433282/o_chejia.png) no-repeat;z-index: 3;top:154px;left:187px;}
    #lunzu, #lunzu2{width: 260px; height: 260px; background: url(http://images.cnblogs.com/cnblogs_com/dtdxrk/433282/o_lunzu.png) no-repeat;z-index: 2;top:245px;left:488px;}
    #lunzu2{top:245px;left:66px;}
    #waitai, #waitai2{width: 272px; height: 273px; background: url(http://images.cnblogs.com/cnblogs_com/dtdxrk/433282/o_waitai.png) no-repeat;z-index: 2;top:240px;left:482px;}
    #waitai2{top:240px;left:60px;}
    #lt{width: 230px; height: 88px; background: url(http://images.cnblogs.com/cnblogs_com/dtdxrk/433282/o_lt.png) no-repeat;z-index: 4;top:359px;left:182px;}
    #qiancha{width: 66px; height: 143px; background: url(http://images.cnblogs.com/cnblogs_com/dtdxrk/433282/o_qiancha.png) no-repeat;z-index: 4;top:235px;left:558px;}
    #wanzu{width: 40px; height: 93px; background: url(http://images.cnblogs.com/cnblogs_com/dtdxrk/433282/o_wanzu.png) no-repeat;z-index: 4;top:147px;left:535px;}
    #yapan{width: 98px; height: 93px; background: url(http://images.cnblogs.com/cnblogs_com/dtdxrk/433282/o_yapan.png) no-repeat;z-index: 4;top:364px;left:325px;}
    #bali{width: 59px; height: 28px; background: url(http://images.cnblogs.com/cnblogs_com/dtdxrk/433282/o_bali.png) no-repeat;z-index: 4;top:122px;left:530px;}
  ...

JavaScript

var fixedgear = [{
    'name' : '\u8F66\u67B6\u989C\u8272',
    'classes': [{
      'name': '\u68D5\u8272',
      'div': 'chejia',
      'x': 0,
      'y': 0
    },
    {
      'name': '\u9ED1\u8272',
      'div': 'chejia',
      'x': 0,
      'y': -2250      
    },
    {
      'name': '\u7070\u8272',
      'div': 'chejia',
      'x': 0,
      'y': -2000      
    },
    {
      'name': '\u767D\u8272',
      'div': 'chejia',
      'x': 0,
      'y': -1750      
    },
    {
      'name': '\u7EA2\u8272',
      'div': 'chejia',
      'x': 0,
      'y': -1500      
    },
    {
      'name': '\u84DD\u8272',
      'div': 'chejia',
      'x': 0,
      'y': -1250     
    },
    {
      'name': '\u7EFF\u8272',
      'div': 'chejia',
      'x': 0,
      'y': -2500      
    },
    {
      'name': '\u9EC4\u8272',
      'div': 'chejia',
      'x': 0,
      'y': -750      
    },
    {
      'name': '\u7C89\u7EA2',
      'div': 'chejia',
      'x': 0,
      'y': -1000      
    },
    {
      'name': '\u5496\u5561',
      'div': 'chejia',
      'x': 0,
      'y': -500      
    },
    {
      'name': '\u6A59\u8272',
      'div': 'chejia',
      'x': 0,
      'y': -250      
    },
    {
      'name': '\u7D2B\u8272',
      'div': 'chejia',
      'x': 0,
      'y': -2750      
    }]
  },
  {
    'name': '\u524D\u53C9',
    'classes':[{
      'name': '\u5F2F\u524D\u53C9',
      'classes': [{
        'name': '\u7535\u9540\u94F6',
        'div': 'qiancha',
        'x': 0,
        'y': 0     
      },
      {
        'name': '\u9633\u6781\u9ED1',
        'div': 'qiancha',
        'x': 0,
        'y': -143      
      }]
    },
    {
      'name': '\u76F4\u524D\u53C9',
      'classes': [{         
        'name': '\u7535\u9540',
        'div': 'qiancha',
        'x': 0,
        'y': -286     
      },
      {
        'name': '\u9ED1\u8272',
        'div': 'qiancha',
        'x': 0,
        'y': -429       
      },
      {
        'name': '\u767D\u8272',
        'div':...