Fixed Gear DIY整车配色 JavaScript版制作过程

在线效果预览:http://jsfiddle.net/dtdxrk/JTBvg/3/embedded/result/(需要加载3m左右的png 会慢点要等等)

文件打包下载:https://files.cnblogs.com/dtdxrk/fixed-Js.rar

由于一些原因今年没有时间去香山撒野了,心里又痒痒.不能这么平淡的过冬,于是整了辆死飞玩,正好练练技术.

看到fixedchina有个配色的flash不错,正好巩固一下基础复刻一个Js版的练练手.

页面截图:

第一步 制作菜单

菜单一共有4级,我采用json格式单独引用.(我手写的,手写数据吭爹啊)

js引用地址:https://files.cnblogs.com/dtdxrk/fixed.js

第二步 加载菜单

数据写完后,我们把它加载出来.

html采用的是li里嵌套ul,这是跟WordPress学的.

这样做的好处就是可以用:hover伪类,搞定2级3级4级的show or hidden,不需要再写js.

当然ie6这个奇葩除外,我这里没有针对ie6做特殊处理...

那js要做的工作就简单多了,几个for循环把内容遍历出来就ok.

html部分结构:

<ul id="menu">
    <li>前叉
        <ul>
            <li>弯前叉
                <ul>
                    <li>电镀银</li>
                    <li>阳极黑</li>
                </ul>
            </li>
            <li>直前叉
                <ul>
                    <li>黑色</li>
                    <li>白色</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

css部分

    #menu{z-index: 100;left:20px; top: 20px; position:absolute;}
    #menu ul{z-index: 101;}
    #menu ul ul{z-index: 102;}
    #menu ul ul ul{z-index: 103;}
    #menu li{  80px; padding-left:3px;padding-right: 2px; height: 17px;cursor: default; margin-bottom: 2px; position: relative; background: url(images/menu.gif) no-repeat;}
    #menu li:hover, #menu li:hover a,#menu a:focus, #menu a:hover, #menu a:active {background-position: 0 -17px;}
    #menu ul {position:absolute;display:none;12em;left: 85px;top: 0;z-index: 1;}
    #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{display:none;}
    #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{display:block;}

js部分

var doc = document,
    ul = doc.getElementById('menu');

//加载菜单
for(var i=0, length=fixedgear.length; i<length; i++){
    var li = doc.createElement("li");
    li.innerText = fixedgear[i].name;

    //  2级
    if(fixedgear[i].classes){
        var ul2 = doc.createElement("ul");
        for(var ii=0, length2=fixedgear[i].classes.length; ii<length2; ii++){
            var li2 = doc.createElement("li"),
                str = fixedgear[i].classes[ii];
            li2.innerText = str.name;

            // 3级
            if(str.classes){
                var ul3 = doc.createElement("ul");
                for (var iii=0, length3= str.classes.length; iii<length3; iii++){
                    var li3 = doc.createElement("li"),
                        str2 = str.classes[iii];
                    li3.innerText = str2.name;

                    // 4级
                    if(str2.classes){
                        var ul4 = doc.createElement("ul");
                        for (var iiii=0, length4=str2.classes.length; iiii<length4; iiii++){
                            var li4 = doc.createElement("li");
                                str3 = str2.classes[iiii];
                            li4.innerText = str3.name;
                            ul4.appendChild(li4);
                        }
                        li3.appendChild(ul4);
                    }

                    ul3.appendChild(li3);
                }
                li2.appendChild(ul3);
            }  
            ul2.appendChild(li2);
            
        }
        li.appendChild(ul2);
    }

    ul.appendChild(li);
}

第三步 分解自行车在组装

之所以搞个fixed gear玩就是因为它简单.

整车从上到下只有19个零件,连刹车都没有...

当然只是零件少就简单有点肤浅了,我理解的fixed gear更多是生活方式上的简单和自由.

fixed gear的后轴和飞轮是一起旋转的,你往前骑前走,往后蹬后走,一般出现在场地竞技比赛和一些特技自行车上.

置于这玩意怎么停住,就不是这里讨论的话题了...有兴趣的可以搜一下视频 fixed gear skid.

言规正传,刚才说整车有19个零件,我们就要把这些零件做成漂浮的div.

然后在给这些div添加样式设置 位置 宽 高和背景png.

来个图片更直观点 这是dreamweaver设计模式的截图 很清楚了吧

css部分

    #chejia{ 386px; height: 250px; background: url(images/chejia.png) no-repeat;z-index: 3;top:154px;left:187px;}
    #lunzu, #lunzu2{ 260px; height: 260px; background: url(images/lunzu.png) no-repeat;z-index: 2;top:245px;left:488px;}
    #lunzu2{top:245px;left:66px;}
    #waitai, #waitai2{ 272px; height: 273px; background: url(images/waitai.png) no-repeat;z-index: 2;top:240px;left:482px;}
    #waitai2{top:240px;left:60px;}
    #lt{ 230px; height: 88px; background: url(images/lt.png) no-repeat;z-index: 4;top:359px;left:182px;}
    #qiancha{ 66px; height: 143px; background: url(images/qiancha.png) no-repeat;z-index: 4;top:235px;left:558px;}
    #wanzu{ 40px; height: 93px; background: url(images/wanzu.png) no-repeat;z-index: 4;top:147px;left:535px;}
    #yapan{ 98px; height: 93px; background: url(images/yapan.png) no-repeat;z-index: 4;top:364px;left:325px;}
    #bali{ 59px; height: 28px; background: url(images/bali.png) no-repeat;z-index: 4;top:122px;left:530px;}
    #zuogan{ 45px; height: 71px; background: url(images/zuogan.png) no-repeat;z-index: 4;top:90px;left:259px;}
    #chezuo{ 120px; height: 32px; background: url(images/chezuo.png) no-repeat;z-index: 4;top:60px;left:215px;}
    #wanba{ 96px; height: 113px; background: url(images/wanba.png) no-repeat;z-index: 3;top:109px;left:563px;}
    #jiaota{ 61px; height: 70px; background: url(images/jiaota.png) no-repeat;z-index: 4;top:445px;left:383px;}
    #jiaota2{ 40px; height: 47px; background: url(images/jiaota2.png) no-repeat;z-index: 1;top:329px;left:280px;}

html部分

<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 Sprites

有了结构和数据,我们就把他们链接在一起.

点击颜色或零件的时候加载对应的背景图片

//如果有这个属性就给他添加点击事件
if(str.div) addEvent(li2, "click", loadPic(str.div, str.x, str.y));

function addEvent(elem, type, fn){
    if (elem.attachEvent) {
        elem.attachEvent('on' + type, fn);
        return;
    }
    if (elem.addEventListener) {
        elem.addEventListener(type, fn, false);
    }
}

function loadPic(div, x, y){
    return function(){
        var ele = document.getElementById(div);
        ele.style.backgroundPositionX = x + "px";
        ele.style.backgroundPositionY = y + "px";
    }   
}

制作CSS Sprites需要拼接图片,我这里没有把所有零件都扔一张图里.

虽然这样做能减少线程,但我觉得不利于产品的后期维护.(当然这产品也不存在什么后期维护)

页面到这里就做完了,大家帮我一起测测.

用ff在jsfiddle.net在线预览时,点击菜单是没有响应的.应该是jsfiddle.net的页面框架问题,本地文件除了ie6以外所以浏览器通过测试.

这里有个问题,透明png的锯齿在flash里是可以用一个滤镜消除的.

但是在浏览器里不知道怎么搞定,我想搜搜外国的大佬们是怎么做的,可是google什么都打不开,baidu又tm啥都搜不到...

如果哪位大神有解决方案请赐教,谢谢!

全部页面:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fixed</title>
<script src="fixed.js" type="text/javascript"></script>
<style type="text/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(images/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(images/chejia.png) no-repeat;z-index: 3;top:154px;left:187px;}
    #lunzu, #lunzu2{width: 260px; height: 260px; background: url(images/lunzu.png) no-repeat;z-index: 2;top:245px;left:488px;}
    #lunzu2{top:245px;left:66px;}
    #waitai, #waitai2{width: 272px; height: 273px; background: url(images/waitai.png) no-repeat;z-index: 2;top:240px;left:482px;}
    #waitai2{top:240px;left:60px;}
    #lt{width: 230px; height: 88px; background: url(images/lt.png) no-repeat;z-index: 4;top:359px;left:182px;}
    #qiancha{width: 66px; height: 143px; background: url(images/qiancha.png) no-repeat;z-index: 4;top:235px;left:558px;}
    #wanzu{width: 40px; height: 93px; background: url(images/wanzu.png) no-repeat;z-index: 4;top:147px;left:535px;}
    #yapan{width: 98px; height: 93px; background: url(images/yapan.png) no-repeat;z-index: 4;top:364px;left:325px;}
    #bali{width: 59px; height: 28px; background: url(images/bali.png) no-repeat;z-index: 4;top:122px;left:530px;}
    #zuogan{width: 45px; height: 71px; background: url(images/zuogan.png) no-repeat;z-index: 4;top:90px;left:259px;}
    #chezuo{width: 120px; height: 32px; background: url(images/chezuo.png) no-repeat;z-index: 4;top:60px;left:215px;}
    #wanba{width: 96px; height: 113px; background: url(images/wanba.png) no-repeat;z-index: 3;top:109px;left:563px;}
    #jiaota{width: 61px; height: 70px; background: url(images/jiaota.png) no-repeat;z-index: 4;top:445px;left:383px;}
    #jiaota2{width: 40px; height: 47px; background: url(images/jiaota2.png) no-repeat;z-index: 1;top:329px;left:280px;}

    #menu{z-index: 100;left:20px; top: 20px; position:absolute;}
    #menu ul{z-index: 101;}
    #menu ul ul{z-index: 102;}
    #menu ul ul ul{z-index: 103;}
    #menu li{ width: 80px; padding-left:3px;padding-right: 2px; height: 17px;cursor: default; margin-bottom: 2px; position: relative; background: url(images/menu.gif) no-repeat;}
    /*#menu a {display:block;padding:14px 25px 15px;color: #fff;border-bottom: 0;font-size: 0.95em;}
    #menu a:hover{ _border-bottom: 0;}
    #menu li li a {padding:0.75em 25px;border: 1px dotted #d1d1d1;_background-color:#fff;_color:#000;}*/
    #menu li:hover, #menu li:hover a,#menu a:focus, #menu a:hover, #menu a:active {background-position: 0 -17px;}
    /*#menu li li a:hover {background: #00a9da;color: #fff;}*/
    #menu ul {position:absolute;display:none;width:12em;left: 85px;top: 0;z-index: 1;}
    /*#menu li ul a{10em;height:auto;float:left;}*/  
    #menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{display:none;}
    #menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{display:block;}
</style>
</head>

<body>
<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>

<script type="text/javascript">
function isIE(){ //ie? 
if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1) 
    return true; 
else 
    return false; 
} 

if(!isIE()){ //firefox innerText define
    HTMLElement.prototype.__defineGetter__("innerText", 
    function(){
        var anyString = "";
        var childS = this.childNodes;
        for(var i=0; i<childS.length; i++) { 
            if(childS[i].nodeType==1)
                //anyString += childS[i].tagName=="BR" ? "\n" : childS[i].innerText;
                anyString += childS[i].innerText;
            else if(childS[i].nodeType==3)
                anyString += childS[i].nodeValue;
        }
        return anyString;
    } 
    ); 
    HTMLElement.prototype.__defineSetter__("innerText", 
        function(sText){
            this.textContent=sText; 
        } 
    ); 
}

var doc = document,
    ul = doc.getElementById('menu');

//加载菜单
for(var i=0, length=fixedgear.length; i<length; i++){
    var li = doc.createElement("li");
    li.innerText = fixedgear[i].name;
    if(fixedgear[i].name == "Bug?意见!"){
        li.style.color = "#ff007f";
        addEvent(li, "click", function(){window.open(fixedgear[i-1].blog)}); 
    }

    //  2级
    if(fixedgear[i].classes){
        var ul2 = doc.createElement("ul");
        for(var ii=0, length2=fixedgear[i].classes.length; ii<length2; ii++){
            var li2 = doc.createElement("li"),
                str = fixedgear[i].classes[ii];
            li2.innerText = str.name;
            if(str.div) addEvent(li2, "click", loadPic(str.div, str.x, str.y));  


            // 3级
            if(str.classes){
                var ul3 = doc.createElement("ul");
                for (var iii=0, length3= str.classes.length; iii<length3; iii++){
                    var li3 = doc.createElement("li"),
                        str2 = str.classes[iii];
                    li3.innerText = str2.name;
                    if(str2.div) addEvent(li3, "click", loadPic(str2.div, str2.x, str2.y));

                    // 4级
                    if(str2.classes){
                        var ul4 = doc.createElement("ul");
                        for (var iiii=0, length4=str2.classes.length; iiii<length4; iiii++){
                            var li4 = doc.createElement("li");
                                str3 = str2.classes[iiii];
                            li4.innerText = str3.name;
                            if(str3.div) addEvent(li4, "click", loadPic(str3.div, str3.x, str3.y));
                            ul4.appendChild(li4);
                        }
                        li3.appendChild(ul4);
                    }

                    ul3.appendChild(li3);
                }
                li2.appendChild(ul3);
            }  
            ul2.appendChild(li2);
            
        }
        li.appendChild(ul2);
    }

    ul.appendChild(li);
}

//如果有这个属性就给他添加点击事件
if(str.div) addEvent(li2, "click", loadPic(str.div, str.x, str.y));

function addEvent(elem, type, fn){
    if (elem.attachEvent) {
        elem.attachEvent('on' + type, fn);
        return;
    }
    if (elem.addEventListener) {
        elem.addEventListener(type, fn, false);
    }
}

function loadPic(div, x, y){
    return function(){
        var ele = document.getElementById(div);
        // ele.style.backgroundImage = "images/" + div + ".png";
        ele.style.backgroundPositionX = x + "px";
        ele.style.backgroundPositionY = y + "px";
    }   
}

</script>

</body>
</html>