Fixed Gear DIY整车配色 JavaScript版制作过程
<div id="cnblogs_post_body">在线效果预览:http://jsfiddle.net/dtdxrk/JTBvg/3/embedded/result/(需要加载3m左右的png 会慢点要等等)文件打包下载:http://files.cnblogs.com/dtdxrk/fixed-Js.rar
由于一些原因今年没有时间去香山撒野了,心里又痒痒.不能这么平淡的过冬,于是整了辆死飞玩,正好练练技术.
看到fixedchina有个配色的flash不错,正好巩固一下基础复刻一个Js版的练练手.
页面截图:
http://pic002.cnblogs.com/images/2012/150659/2012112819201339.jpg
第一步 制作菜单
菜单一共有4级,我采用json格式单独引用.(我手写的,手写数据吭爹啊)
js引用地址:http://files.cnblogs.com/dtdxrk/fixed.js
第二步 加载菜单
数据写完后,我们把它加载出来.
html采用的是li里嵌套ul,这是跟WordPress学的.
这样做的好处就是可以用:hover伪类,搞定2级3级4级的show or hidden,不需要再写js.
当然ie6这个奇葩除外,我这里没有针对ie6做特殊处理...
那js要做的工作就简单多了,几个for循环把内容遍历出来就ok.
html部分结构:
<div class="cnblogs_code"> 1 <ul id="menu"> 2 <li>前叉 3 <ul> 4 <li>弯前叉 5 <ul> 6 <li>电镀银</li> 7 <li>阳极黑</li> 8 </ul> 9 </li>10 <li>直前叉11 <ul>12 <li>黑色</li>13 <li>白色</li>14 </ul>15 </li>16 </ul>17 </li>18 </ul>
页:
[1]