页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容 css模拟select

用javascript和css模拟select的脚本

发布：dxy 字体：[增加减小] 类型：转载

传统的select控件比较难看，用css美化也达不到好的效果，而javascript和css结合起来，用div等元素模拟一个select达到想要的效果就很容易了。

点击运行可以看到效果:

<!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=gb2312" /> 
<title>模拟 美化 select_脚本之家</title> 
<script type="text/javascript"> 
var zQuery=function(ele,tagName,className){ //核心对象 
    if ( window == this ) return new zQuery(ele,tagName,className); 
    if(!arr){var arr=new Array;} 
    if(ele){ 
        if(ele.constructor!=zQuery){ 
            var elem=typeof(ele)=="object"?ele:document.getElementById(ele); 
            if(!tagName){ 
                arr.push(elem); 
            }else{ 
                var tags=elem.all&&!window.opera?tagName=="*"?elem.all:elem.all.tags(tagName):elem.getElementsByTagName(tagName); 
                if(!className){ 
                    for(var i=0, l=tags.length; i<l; i++){ 
                        arr.push(tags[i]); 
                    } 
                }else{ 
                    var reClassName=RegExp("(^|\\s+)"+className+"($|\\s+)"); 
                    for(var i=0, l=tags.length; i<l; i++){ 
                        if(reClassName.test(tags[i].className)){ 
                            arr.push(tags[i]); 
                        } 
                    } 
                } 
            } 
        }else{ 
            for(var i=0, l=ele.length; i<l; i++){ 
                arr=arr.concat(Array.prototype.slice.call(zQuery(ele[i],tagName,className))); 
            } 
        } 
    } 
    return this.setArray(arr); //借鉴jQuery方法，这里返回zQuery对象原型（一个DOM集合对象），不再是返回单纯的DOM数组对象 
} 
zQuery.prototype.setArray = function( arr ) { 
    this.length = 0; 
    Array.prototype.push.apply( this, arr ); //这里的概念非常重要，zQuery方法对象执行了Array原型的push()方法 
    return this; 
} 
zQuery.fn=zQuery.prototype; 
var $=zQuery;

//取select的绝对位置、高、宽 
function Offset(obj){ 
    var t = obj.offsetTop; 
    var l = obj.offsetLeft; 
    var w = obj.offsetWidth; 
    var h = obj.offsetHeight-2; 
    //var h=obj.style.height; 
    while(obj=obj.offsetParent) 
    { 
        t+=obj.offsetTop; 
        l+=obj.offsetLeft; 
    } 
    return { 
        top : t, 
        left : l, 
        width : w, 
        height : h 
    } 
} 
//模拟select 
function instSelect(obj){ 
    var offSet=Offset(obj); 
    obj.style.display="none"; 
    var sDiv=document.createElement("div"); 
    sDiv.id="div"+obj.name; 
    sDiv.className="divSlt"; 
    sDiv.style.width=offSet.width+"px"; 
    //sDiv.style.height=offSet.height+"px"; 
    sDiv.style.left=offSet.left+"px"; 
    sDiv.style.top=offSet.top+"px"; 
    document.body.appendChild(sDiv); 
    var sSpan=document.createElement("span"); 
    var spanId=obj.options[obj.selectedIndex].value; 
    var spanText=obj.options[obj.selectedIndex].text; 
    sSpan.id=spanId; 
    sSpan.style.lineHeight=offSet.height+"px"; 
    sTxt=document.createTextNode(spanText); 
    sSpan.appendChild(sTxt); 
    sDiv.appendChild(sSpan); 
    sSpan.onclick=function(){ 
        if($("div"+obj.name,"ul").length==0){ 
            var sUl=document.createElement("ul"); 
            sDiv.appendChild(sUl); 
            var optLen=obj.options.length; 
            var tmp=document.createDocumentFragment(); 
            for(var j=0;j<optLen;j++){ 
                var sltVal=obj.options[j].value; 
                var sltTxt=obj.options[j].text; 
                var sLi=document.createElement("li"); 
                sLi.id=sltVal; 
                sLi.appendChild(document.createTextNode(sltTxt)); 
                sLi.onmouseover=function(){ 
                    this.style.background="#cccccc"; 
                    this.style.color="white"; 
                } 
                sLi.onmouseout=function(){ 
                    this.style.background="white"; 
                    this.style.color="black"; 
                } 
                sLi.onclick=function(){ 
                    sSpan.innerHTML=this.innerHTML; 
                    obj.value=this.id; 
                    sUl.style.display="none"; 
                } 
                tmp.appendChild(sLi); 
            } 
            sUl.appendChild(tmp); 
            if(optLen>3){ 
                sUl.style.overflowY="scroll"; 
                sUl.style.height="100px"; 
            } 
        } 
        else{ 
            if($("div"+obj.name,"ul")[0].style.display=="none") $("div"+obj.name,"ul")[0].style.display="block"; 
            else $("div"+obj.name,"ul")[0].style.display="none"; 
        } 
    } 
} 
//取得slect的个数，并且对每个select执行函数 
function initSelect(){ 
    var slt=$(document,"select"); 
    var sltLen=slt.length; 
    for(var i=0;i<sltLen;i++){ 
        instSelect(slt[i]); 
    } 
}

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：javascript css 模拟 select

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：javascript实现通过拼音首字母快速选择下拉列表
下一篇文章：JS option location 页面跳转实现代码

·在百度中搜索关于“用javascript和css模拟select的脚本相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

用javascript和css模拟select的脚本

文章评论

同类文章

最近更新

热点排行

用javascript和css模拟select的脚本

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行