码迷，mamicode.com
首页 > 移动开发 > 详细

仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件

时间：2015-05-04 01:10:08      阅读：281      评论：0      收藏：0      [点我收藏+]

标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿苹果电脑任务栏菜单</title>
<style type="text/css">
body{margin:0;padding:0}
#menu{position:absolute;width:100%;bottom:0;text-align:center;}
</style>
<script type="text/javascript">
window.onload = function ()
{
    var oMenu = document.getElementById("menu");
    var aImg = oMenu.getElementsByTagName("img");
    var aWidth = [];
    var i = 0;
    //保存原宽度, 并设置当前宽度
    for (i = 0; i < aImg.length; i++)
    {
        aWidth.push(aImg[i].offsetWidth);
        aImg[i].width = parseInt(aImg[i].offsetWidth / 2);
    }
    //鼠标移动事件
    document.onmousemove = function (event)
    {
        var event = event || window.event;
        for (i = 0; i < aImg.length; i++)
        {
            var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
            var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;
            var iScale = 1 - Math.sqrt(a * a + b * b) / 300;
            if (iScale < 0.5) iScale = 0.5;
            aImg[i].width = aWidth[i] * iScale
        }
    };
};
</script>
</head>
<body>
<div id="menu">
    <img src="img/1.png" />
    <img src="img/2.png" />
    <img src="img/3.png" />
    <img src="img/4.png" />
    <img src="img/5.png" />
    <img src="img/6.png" />
    <img src="img/7.png" />
    <img src="img/8.png" />
</div>
</body>
</html>
拼图小游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拼图小游戏</title>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
body{font:30px/1.5 Tahoma;background:url(img/bg.png);}
#box{position:relative;width:410px;height:570px;margin:10px auto;}
#box li{float:left;width:82px;height:190px;overflow:hidden;}
#box li img{width:82px;height:190px;}
#box li.hig{width:78px;height:186px;overflow:hidden;border:2px dashed yellow;}
#box li.hig img{width:78px;height:186px;opacity:0.5;filter:alpah(opacity=50);}
#mask{position:absolute;top:0;left:0;width:410px;height:570px;background:red;opacity:0;filter:alpha(opacity=0);}
input{cursor:pointer;}
#photo{text-align:center;margin:10px 0;}
#photo img{width:100px;height:100px;border-radius:5px;margin:0 5px;opacity:0.5;filter:alpha(opacity=50);cursor:pointer;}
#photo img.hover{opacity:1;filter:alpha(opacity=100);}
#photo img.selected{border:2px solid yellow;width:96px;height:96px;opacity:1;filter:alpha(opacity=100);}
</style>
<script type="text/javascript">
var zIndex = 1;
window.onload = function ()
{
    var oPhoto = document.getElementById("photo");
    var aThumb = oPhoto.getElementsByTagName("img");
    var oBox = document.getElementById("box");
    var aLi = oBox.getElementsByTagName("li");
    var oInput = document.getElementsByTagName("input")[0];
    var i = 0;
    var imgPath = 0;
    var oDateStart = null;
    var aPos = [];
    var aData = [];
    for (i = 0; i < 15; i++)aData.push(i+1);
    
    //缩略图
    for (i = 0; i < aThumb.length; i++)
    {
        aThumb[i].index = i;
        aThumb[i].onmouseover = function ()
        {
            this.className += " hover"
        };
        aThumb[i].onmouseout = function ()
        {
            this.className = this.className.replace(/\shover/, "")
        };
        aThumb[i].onclick = function ()
        {
            for (i = 0; i < aThumb.length; i++)aThumb[i].className = "";    
            this.className = "selected";
            imgPath = this.index;
            oBox.innerHTML = "";
            oInput.value = "开始游戏";
            createMask();
            aData.sort(function (a, b) {return a - b});
            GAME(false)
        }
    }
    
    //创建遮罩层
    function createMask()
    {
        var oMask = document.createElement("div");
        oMask.id = "mask";
        oMask.style.zIndex = zIndex;
        oBox.appendChild(oMask)
    }
    createMask();
    
    //游戏处理函数
    function GAME(ran)
    {
        //随机排列数组
        ran && aData.sort(function (a, b) {return Math.random() > 0.5 ? -1 : 1});

        //插入结构
        var oFragment = document.createDocumentFragment();
        for (i = 0; i < aData.length; i++)
        {
            var oLi = document.createElement("li");
            var oImg = document.createElement("img");
            oImg.src = "img/girl" + imgPath + "/" + aData[i] + ".png";
            oLi.appendChild(oImg);
            oFragment.appendChild(oLi)
        }
        oBox.appendChild(oFragment);
        oBox.style.background = "url(img/girl"+imgPath+"/bg.png)  no-repeat";
        
        //布局转换
        for (i = 0; i < aLi.length; i++)
        {
            aLi[i].index = i;
            aLi[i].style.top = aLi[i].offsetTop + "px";    
            aLi[i].style.left = aLi[i].offsetLeft + "px";
            aPos.push({"left":aLi[i].offsetLeft, "top":aLi[i].offsetTop})
        }    
        for (i = 0; i < aLi.length; i++)
        {
            aLi[i].style.position = "absolute";
            aLi[i].style.margin = "0";
            drag(aLi[i])
        }
        
        //拖拽函数
        function drag(obj, handle)
        {
            var handle = handle || obj;
            handle.style.cursor = "move";    
            handle.onmousedown = function (event)
            {
                var event = event || window.event;
                var disX = event.clientX - this.offsetLeft;
                var disY = event.clientY - this.offsetTop;
                var oNear = null;
                obj.style.zIndex = zIndex++;
                document.onmousemove = function (event)
                {
                    var event = event || window.event;            
                    var iL = event.clientX - disX;
                    var iT = event.clientY - disY;
                    var maxL = obj.parentNode.clientWidth - obj.offsetWidth;
                    var maxT = obj.parentNode.clientHeight - obj.offsetHeight;            
        
                    iL < 0 && (iL = 0);
                    iT < 0 && (iT = 0);
                    iL > maxL && (iL = maxL);
                    iT > maxT && (iT = maxT);            
                    obj.style.left = iL + "px";
                    obj.style.top = iT + "px";                
    
                    for (i = 0; i < aLi.length; i++) aLi[i].className = "";
                    
                    oNear = findNearest(obj);
                    
                    oNear && (oNear.className = "hig");
                                
                    return false
                };        
                document.onmouseup = function ()
                {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if (oNear)
                    {
                        var tIndex = obj.index;                    
                        obj.index = oNear.index;
                        oNear.index = tIndex;
                        startMove(obj, aPos[obj.index]);
                        startMove(oNear, aPos[oNear.index],function ()
                        {
                            if (finish())
                            {
                                var iHour = iMin = iSec = 0;
                                var oDateNow = new Date();
                                var iRemain = parseInt((oDateNow.getTime() - oDateStart.getTime()) / 1000);

                                iHour = parseInt(iRemain / 3600);
                                iRemain %= 3600;
                                iMin = parseInt(iRemain / 60);
                                iRemain %= 60;
                                iSec = iRemain;
                                
                                alert("\u606d\u559c\u60a8\uff0c\u62fc\u56fe\u5b8c\u6210\uff01\n\n\u7528\u65f6\uff1a" + iHour  + "\u5c0f\u65f6" + iMin + "\u5206" + iSec + "\u79d2");
                                createMask();
                            }
                        });
                        oNear.className = "";
                    }
                    else
                    {
                        startMove(obj, aPos[obj.index])
                    }            
                    handle.releaseCapture && handle.releaseCapture()
                };        
                this.setCapture && this.setCapture();        
                return false
            }
        }
        
        //找出相遇点中最近的元素
        function findNearest(obj)
        {
            var filterLi = [];
            var aDistance = [];
            
            for (i = 0; i < aLi.length; i++) aLi[i] != obj && (isButt(obj, aLi[i]) && (aDistance.push(getDistance(obj, aLi[i])), filterLi.push(aLi[i])));    
                
            var minNum = Number.MAX_VALUE;
            var minLi = null;
            
            for (i = 0; i < aDistance.length; i++) aDistance[i] < minNum && (minNum = aDistance[i], minLi = filterLi[i]);    
                
            return minLi
        }        
    }    
    GAME();
    
    //开始游戏
    oInput.onclick = function ()
    {
        oDateStart = new Date();
        oBox.innerHTML = "";        
        this.value = "\u91cd\u65b0\u5f00\u59cb";
        GAME(true)
    };
    
    //判断是否完成
    function finish()
    {
        var aTemp = [];
        var success = true;
        aTemp.length = 0;
        for (i = 0; i < aLi.length; i++)
        {
            for (var j = 0; j < aLi.length; j++)
            i == aLi[j]["index"] && aTemp.push(aLi[j].getElementsByTagName("img")[0].src.match(/(\d+)\./)[1])
        }
        for (i = 1; i <= aTemp.length; i++)
        {
            if(i != aTemp[i-1])
            {
                success = false;
                break
            }
        }
        return success
    }
};
//求两点之间的距离
function getDistance(obj1, obj2)
{
    var a = (obj1.offsetLeft + obj1.offsetWidth / 2) - (obj2.offsetLeft + obj2.offsetWidth / 2);
    var b = (obj1.offsetTop + obj1.offsetHeight / 2) - (obj2.offsetTop + obj2.offsetHeight / 2);
    return Math.sqrt(a * a + b * b)
}

//碰撞检测
function isButt(obj1, obj2)
{
    var l1 = obj1.offsetLeft;
    var t1 = obj1.offsetTop;
    var r1 = obj1.offsetLeft + obj1.offsetWidth;
    var b1 = obj1.offsetTop + obj1.offsetHeight;
    
    var l2 = obj2.offsetLeft;
    var t2 = obj2.offsetTop;
    var r2 = obj2.offsetLeft + obj2.offsetWidth;
    var b2 = obj2.offsetTop + obj2.offsetHeight;
    
    return !(r1 < l2 || b1 < t2 || r2 < l1 || b2 < t1)
}

//获取最终样式
function getStyle(obj, attr)
{
    return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])
}

//运动框架
function startMove(obj, pos, onEnd)
{
    clearInterval(obj.timer);
    obj.timer = setInterval(function ()
    {
        doMove(obj, pos, onEnd)
    }, 30)    
}
function doMove(obj, pos, onEnd)
{
    var iCurL = getStyle(obj, "left");
    var iCurT = getStyle(obj, "top");
    var iSpeedL = (pos.left - iCurL) / 5;
    var iSpeedT = (pos.top - iCurT) / 5;
    iSpeedL = iSpeedL > 0 ? Math.ceil(iSpeedL) : Math.floor(iSpeedL);
    iSpeedT = iSpeedT > 0 ? Math.ceil(iSpeedT) : Math.floor(iSpeedT);
    if (pos.left == iCurL && pos.top == iCurT)
    {
        clearInterval(obj.timer);
        onEnd && onEnd()
    }
    else
    {
        obj.style.left = iCurL + iSpeedL + "px";
        obj.style.top = iCurT + iSpeedT + "px";    
    }
}
</script>
</head>
<body>
<div id="photo"><img src="img/girl0/girl.jpg" class="selected" /><img src="img/girl1/girl.jpg" /><img src="img/girl2/girl.jpg" /></div>
<center><input type="button" value="开始游戏" /></center>
<ul id="box"></ul>
</body>
</html>
模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟表单控件</title>
<style type="text/css">
/* ----表单控件CSS开始---- ↓ */
.WellForm *{margin:0;padding:0;}
.WellForm{font-size:12px;font-family:arial;line-height:21px;}
.WellForm pre{float:left;margin-right:10px;}
/*background*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText,
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect,
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM,
.WellForm .WellRadio,
.WellForm .WellCheckBox,
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton
{background:url(WellForm/WellForm.gif) no-repeat;}
/*WellText*/
.WellForm .TextL,.WellForm .TextR,.WellForm .WellText{float:left;width:5px;height:21px;}
.WellForm .TextL{background-position:0 0;}.WellForm .TextR{background-position:right 0;}
.WellForm .TextLH{background-position:0 -21px;}.WellForm .TextRH{background-position:right -21px;}
.WellForm .WellText{border:0;width:auto;height:17px;padding:2px 0;padding:3px 0 1px\9;*padding:3px 0 1px;font-family:arial;background-repeat:repeat-x;background-position:0 -42px;}
.WellForm .WellTextH{background-position:0 -63px;}
/*WellSelect*/
.WellForm .SelectL,.WellForm .SelectR,.WellForm .WellSelect{float:left;height:21px;}
.WellForm .SelectL{width:3px;background-position:0 -84px;}
.WellForm .SelectR{width:16px;cursor:pointer;background-position:right -84px;margin-right:5px;}
.WellForm .WellSelect{position:relative;cursor:pointer;background-repeat:repeat-x;background-position:0 -105px;}
.WellForm .WellSelect select{display:none;}
.WellForm .WellSelect em{position:absolute;top:0;left:3px;color:#fff;height:21px;display:block;line-height:21px;font-style:normal;}
.WellForm .WellSelect ul{list-style-type:none;position:absolute;top:18px;left:0;z-index:1000;display:none;background:#6C6D70;}
.WellForm .WellSelect ul li {color:#fff;height:20px;cursor:pointer;line-height:20px;padding-left:3px;}
.WellForm .WellSelect ul li.hover{background:#333;}
/*WellTextArea*/
.WellForm .WellTextArea{float:left;}
.WellForm .WellTextArea .T,
.WellForm .WellTextArea .T .TL,
.WellForm .WellTextArea .T .TM,
.WellForm .WellTextArea .B,
.WellForm .WellTextArea .B .BL,
.WellForm .WellTextArea .B .BM
{height:5px;overflow:hidden;}
.WellForm .WellTextArea .T{float:left;width:100%;background-position:right -126px;}
.WellForm .WellTextArea .TH{float:left;width:100%;background-position:right -131px;}
.WellForm .WellTextArea .T .TL{background-position:0 -126px;}
.WellForm .WellTextArea .TH .TL{background-position:0 -131px;}
.WellForm .WellTextArea .T .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -136px;}
.WellForm .WellTextArea .TH .TM{margin:0 5px;background-repeat:repeat-x;background-position:0 -141px;}
.WellForm .WellTextArea .B{float:left;width:100%;background-position:right -146px;}
.WellForm .WellTextArea .BH{float:left;width:100%;background-position:right -151px;}
.WellForm .WellTextArea .B .BL{background-position:0 -146px;}
.WellForm .WellTextArea .BH .BL{background-position:0 -151px;}
.WellForm .WellTextArea .B .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -156px;}
.WellForm .WellTextArea .BH .BM{margin:0 5px;background-repeat:repeat-x;background-position:0 -161px;}
.WellForm .WellTextArea .M,
.WellForm .WellTextArea .M .MR
{float:left;background:url(WellForm/TextArea-1.gif) repeat-y;}
.WellForm .WellTextArea .M{background-position:0 0;}
.WellForm .WellTextArea .M .MR{background-position:right 0;}
.WellForm .WellTextArea .MH,
.WellForm .WellTextArea .MH .MR
{float:left;background:url(WellForm/TextArea-2.gif) repeat-y;}
.WellForm .WellTextArea .MH{background-position:0 0;}
.WellForm .WellTextArea .MH .MR{background-position:right 0;}
.WellForm .WellTextArea textarea{float:left;border:0;margin:0 5px;overflow:auto;background:url(WellForm/TextArea.gif);font-family:arial;font-size:12px;resize:none;}
/*WellRadio*/
.WellForm .WellRadio{float:left;width:13px;height:13px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:-15px -270px;}
.WellForm .WellRadioH{background-position:-15px -284px;}
.WellForm .WellRadio input{margin-top:13px;display:none;}
/*WellCheckBox*/
.WellForm .WellCheckBox{float:left;    width:12px;height:12px;cursor:pointer;overflow:hidden;margin:4px 5px 0 0;background-position:0 -270px;}
.WellForm .WellCheckBoxH{background-position:0 -283px;}
.WellForm .WellCheckBox input{margin-top:12px;display:none;}
/*WellButton*/
.WellForm .ButtonL,.WellForm .ButtonR,.WellForm .WellButton{cursor:pointer;float:left;width:5px;height:26px;}
.WellForm .ButtonL{background-position:0 -166px;}.WellForm .ButtonR{background-position:right -166px;margin-right:10px;}
.WellForm .ButtonLH{background-position:0 -192px;}.WellForm .ButtonRH{background-position:right -192px;}
.WellForm .WellButton{border:0;width:auto;font-size:12px;color:#fff!important;height:26px;padding:0 10px 3px;*padding-bottom:0;padding-bottom:0\9;font-family:arial;background-repeat:repeat-x;background-position:0 -218px;}
.WellForm .WellButtonH{background-position:0 -244px;}
/* ----表单控件CSS结束---- ↑ */

form{float:left;padding:20px;border:2px dashed #ccc;margin:20px 0 0 40px;width:380px;}
form .item{float:left;clear:both;width:100%;margin-bottom:10px;}
.WellForm label{float:left;width:4em;height:21px;text-align:right;}
</style>
<script type="text/javascript">
window.onload = function ()
{
    var aForm = document.getElementsByTagName("form");
    //多个表单
    for (var i = 0; i < aForm.length; i++) WellForm(aForm[i]);
};



/*------------------------------------------------- +
  可以将以下JS保存为文件, 方便调用
  使用方法：WellForm(element) //element 为表单元素
 +------------------------------------------------- */
 
// 获取class
function getClass(sClass, oParent)
{
    var aClass = [];    
    var reClass = new RegExp("(^| )" + sClass + "( |$)");
    var aElem = (oParent || document).getElementsByTagName("*");
    for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
    return aClass
}
// class是否存在
function hasClass(obj, sClass)
{
    var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
    return reg.test(obj.className)
}
// 添加class
function addClass(obj, sClass)
{
    hasClass(obj, sClass) || (obj.className += " "+sClass)
}
// 删除class
function removeClass(obj, sClass)
{
    if (hasClass(obj, sClass))
    {
        var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");
        obj.className = obj.className.replace(reg, "");
    }
}
// 上一个元素
function prevElement(obj)
{
    return obj.previousSibling || obj.previousElementSibling || null    
}
// 下一个元素
function nextElement(obj)
{
    return obj.nextSibling || obj.nextElementSibling || null    
}
// 自定义表单函数
function WellForm(form)
{
    var i = 0;
    var zIndex = 1;
    var aInput = form.getElementsByTagName("input");    
    var aSelect = form.getElementsByTagName("select");
    var aTextArea = form.getElementsByTagName("textarea");
    form.className = "WellForm";
    
    /* 单行文本框 */
    var aText = [];
    for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "text" || aInput[i]["type"] == "password") && aText.push(aInput[i]);
    
    for (i = 0; i < aText.length; i++)
    {
        var oTextL = document.createElement("div");
        var oTextR = document.createElement("div");    
        oTextL.className = "TextL";
        oTextR.className = "TextR";
        aText[i].className = "WellText";
        aText[i].parentNode.insertBefore(oTextL, aText[i]);        
        aText[i].parentNode.insertBefore(oTextR, nextElement(aText[i]));
        //获取焦点
        aText[i].onfocus = function ()
        {
            addClass(this, "WellTextH");
            addClass(prevElement(this), "TextLH");
            addClass(nextElement(this), "TextRH")
        };
        //失去焦点
        aText[i].onblur = function ()
        {
            removeClass(this, "WellTextH");
            removeClass(prevElement(this), "TextLH");
            removeClass(nextElement(this), "TextRH")
        }
    }
    
    /* 多行文本框 */    
    for (i = 0; i < aTextArea.length; i++)
    {
        var oTextArea = document.createElement("div");
        oTextArea.className = "WellTextArea";
        
        //上边框
        var oT = document.createElement("div");
        var oTL = document.createElement("div");
        var oTM = document.createElement("div");        
        oT.className = "T";
        oTL.className = "TL";
        oTM.className = "TM";        
        oTL.appendChild(oTM);
        oT.appendChild(oTL);
        //中间边框
        var oM = document.createElement("div");
        var oMR = document.createElement("div");        
        oM.className = "M";
        oMR.className = "MR";        
        oM.appendChild(oMR);
        //下边框
        var oB = document.createElement("div");
        var oBL = document.createElement("div");
        var oBM = document.createElement("div");        
        oB.className = "B";
        oBL.className = "BL";
        oBM.className = "BM";        
        oBL.appendChild(oBM);
        oB.appendChild(oBL);        
        //插入结构
        aTextArea[i].parentNode.insertBefore(oTextArea, aTextArea[i]);        
        oMR.appendChild(aTextArea[i]);
        oTextArea.appendChild(oT);        
        oTextArea.appendChild(oM);
        oTextArea.appendChild(oB);        
        oTextArea.style.width = oMR.offsetWidth + "px";
        //获取焦点
        aTextArea[i].onfocus = function ()
        {
            var M = this.parentNode.parentNode;
            addClass(M, "MH");
            addClass(prevElement(M), "TH");
            addClass(nextElement(M), "BH")
        };
        aTextArea[i].onblur = function ()
        {
            var M = this.parentNode.parentNode;
            removeClass(M, "MH");
            removeClass(prevElement(M), "TH");
            removeClass(nextElement(M), "BH")
        }
    }
    
    /* 单选框 */
    var aRadio = [];
    for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "radio" && aRadio.push(aInput[i]);
    
    for (i = 0; i < aRadio.length; i++)
    {
        var oRadio = document.createElement("div");
        oRadio.className = "WellRadio";    
        
        aRadio[i].parentNode.insertBefore(oRadio, aRadio[i]);
        oRadio.appendChild(aRadio[i]);
        
        aRadio[i].checked && addClass(aRadio[i].parentNode, "WellRadioH");
        
        oRadio.onclick = function ()
        {
            var siblings = getClass("WellRadio", this.parentNode);
            for (i = 0; i < siblings.length; i++)
            {
                removeClass(siblings[i], "WellRadioH");
                siblings[i].children[0].checked = false;
            }
            addClass(this, "WellRadioH");
            this.children[0].checked = true
        }
    }
    
    /* 复选框 */
    var aCheckBox = [];
    for (i = 0; i < aInput.length; i++) aInput[i]["type"] == "checkbox" && aCheckBox.push(aInput[i]);
    
    for (i = 0; i < aCheckBox.length; i++)
    {
        var oCheckBox = document.createElement("div");
        oCheckBox.className = "WellCheckBox";    
        
        aCheckBox[i].parentNode.insertBefore(oCheckBox, aCheckBox[i]);
        oCheckBox.appendChild(aCheckBox[i]);
        
        aCheckBox[i].checked && addClass(aCheckBox[i].parentNode, "WellCheckBoxH");
        
        oCheckBox.onclick = function ()
        {            
            this.children[0].checked = !this.children[0].checked;
            this.children[0].checked ? addClass(this, "WellCheckBoxH") : removeClass(this, "WellCheckBoxH")
        }
    }
    
    /* 按钮 */
    var aButton = [];
    for (i = 0; i < aInput.length; i++) (aInput[i]["type"] == "button" || aInput[i]["type"] == "submit") && aButton.push(aInput[i]);
    
    for (i = 0; i < aButton.length; i++)
    {
        var oBtnL = document.createElement("div");
        var oBtnR = document.createElement("div");        
        oBtnL.className = "ButtonL";
        oBtnR.className = "ButtonR";        
        aButton[i].className = "WellButton";
        aButton[i].parentNode.insertBefore(oBtnL, aButton[i]);
        aButton[i].parentNode.insertBefore(oBtnR, nextElement(aButton[i]));
        //鼠标移入
        aButton[i].onmouseover = function ()
        {
            addClass(this, "WellButtonH");
            addClass(prevElement(this), "ButtonLH");
            addClass(nextElement(this), "ButtonRH");    
        };
        //鼠标移出
        aButton[i].onmouseout = function ()
        {
            removeClass(this, "WellButtonH");
            removeClass(prevElement(this), "ButtonLH");
            removeClass(nextElement(this), "ButtonRH");    
        }
    }
    
    /* 下拉菜单 */
    for (i = 0; i < aSelect.length; i++)
    {
        var oFragment = document.createDocumentFragment();
        var oSelectL = document.createElement("div");
        var oSelectR = document.createElement("div");
        var oWellSelect = document.createElement("div");
        var oEm = document.createElement("em");
        var oUl = document.createElement("ul");
        oSelectL.className = "SelectL";
        oSelectR.className = "SelectR";
        oWellSelect.className = "WellSelect";        
        //插入结构
        aSelect[i].parentNode.insertBefore(oSelectL, aSelect[i]);
        aSelect[i].parentNode.insertBefore(oSelectR, nextElement(aSelect[i]));
        oUl.style.width = oWellSelect.style.width =  aSelect[i].offsetWidth - oSelectR.offsetWidth / 2 + "px";        
        
        for (var j = 0; j < aSelect[i].options.length; j++)
        {
            var oLi = document.createElement("li");
            oLi.innerHTML = aSelect[i].options[j].text;
            oLi["sValue"] = aSelect[i].options[j].value;
            oFragment.appendChild(oLi);
            aSelect[i].options[j].selected && (oEm.innerHTML = aSelect[i].options[j].text)
        }
        oUl.appendChild(oFragment);
        oWellSelect.appendChild(oEm);
        oWellSelect.appendChild(oUl);
        aSelect[i].parentNode.insertBefore(oWellSelect, aSelect[i]);
        oWellSelect.appendChild(aSelect[i]);
        
        oWellSelect.onclick = oSelectR.onclick = function (event)
        {
            var o = this.getElementsByTagName("ul")[0] || prevElement(this).getElementsByTagName("ul")[0];
            var aUl = form.getElementsByTagName("ul");
            this.parentNode.style.position = "relative";
            this.parentNode.style.zIndex = zIndex++;
            o.style.display = o.style.display == "block" ? "none" : "block";
            for (i = 0; i < aUl.length; i++)
            {
                if (o == aUl[i]) continue;
                aUl[i].style.display = "none";
            }
            var aLi = o.getElementsByTagName("li");
            
            for (i = 0; i < aLi.length; i++)
            {
                aLi[i].onmouseover = function ()
                {
                    this.className = "hover"    
                };
                aLi[i].onmouseout = function ()
                {
                    this.className = ""    
                };
                aLi[i].onclick = function ()
                {
                    prevElement(this.parentNode).innerHTML = this.innerHTML;
                    nextElement(this.parentNode).value = this.sValue
                }
            }
            
            (event || window.event).cancelBubble = true;
            
            document.onclick = function ()
            {
                o.style.display = "none"    
            }
        }
    }
}
</script>
</head>
<body>
<form>
    <div class="item"><label>姓名：</label><input type="text" name="name" /></div>
    <div class="item"><label>电话：</label><input type="text" name="tel" /></div>
    <div class="item">
        <label>性别：</label>
        <select name="sex">
            <option value="男孩">男孩</option>
            <option value="女孩" selected="selected">女孩</option>
            <option value="人妖">人妖</option>
        </select>
    </div>
    <div class="item">
        <label>生日：</label>
        <select name="month">
            <option value="1">1月</option>
            <option value="2">2月</option>
            <option value="3">3月</option>
            <option value="4">4月</option>
            <option value="5">5月</option>
            <option value="6">6月</option>
            <option value="7" selected="selected">7月</option>
            <option value="8">8月</option>
            <option value="9">9月</option>
            <option value="10">10月</option>
        </select>
        <select name="day">
            <option value="1">1号</option>
            <option value="2">2号</option>
            <option value="3">3号</option>
            <option value="4">4号</option>
            <option value="5">5号</option>
            <option value="6" selected="selected">6号</option>
            <option value="7">7号</option>
            <option value="8">8号</option>
            <option value="9">9号</option>
            <option value="10">10号</option>
            <option value="11">11号</option>
            <option value="12">12号</option>
            <option value="13">13号</option>
            <option value="14">14号</option>
            <option value="15">15号</option>
            <option value="16">16号</option>
        </select>
        <select name="year">
            <option value="2000">2000年</option>
            <option value="2001">2001年</option>
            <option value="2002">2002年</option>
            <option value="2003">2003年</option>
            <option value="2004">2004年</option>
            <option value="2005">2005年</option>
            <option value="2006">2006年</option>
            <option value="2007">2007年</option>
            <option value="2008">2008年</option>
            <option value="2009">2009年</option>
            <option value="2010" selected="selected">2010年</option>
            <option value="2011">2011年</option>
            <option value="2012">2012年</option>
            <option value="2013">2013年</option>
        </select>
    </div>
    <div class="item">
        <label>婚姻：</label>
        <input type="radio" name="marry" value="已婚" /><pre>已婚</pre>
        <input type="radio" name="marry" value="未婚" checked="checked" /><pre>未婚</pre>
    </div>
    <div class="item">
        <label>爱好：</label>
        <input type="checkbox" name="like" value="吃饭" /><pre>吃饭</pre>
        <input type="checkbox" name="like" value="睡觉" /><pre>睡觉</pre>
        <input type="checkbox" name="like" value="上网" checked="checked" /><pre>上网</pre>
        <input type="checkbox" name="like" value="打游戏" checked="checked" /><pre>打游戏</pre>
    </div>
    <div class="item"><label>地址：</label><input type="text" style="width:300px;" name="address" /></div>
    <div class="item"><label>备注：</label><textarea cols="50" rows="5" style="width:300px;" name="remark"></textarea></div>
    <div class="item"><label>说明：</label><textarea cols="50" rows="5" style="width:300px;" name="desc"></textarea></div>
    <div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
<form>
    <div class="item"><label>用户名：</label><input type="text" name="username" /></div>
    <div class="item"><label>密码：</label><input type="password" name="pwd" /></div>
    <div class="item"><label>验证码：</label><input type="text" name="code" style="width:60px;" /></div>
    <div class="item"><label></label><input type="submit" value="提交" /></div>
</form>
</body>
</html>

 

仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件

标签：

原文地址：http://www.cnblogs.com/mayufo/p/4475054.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！