美化与模拟Select

80酷酷网    80kuku.com

  select模拟实现

此方法来自已经不存在的苏小雨2003版个人主页,通过2个容器模拟,并定义select偏移。第一次看到确实很惊艳。
#sel_exterior { border:#366 1px solid; overflow:hidden; width:73px; clip:rect(0px 181px 18px 0px); height:20px;}
#sel_inside { border:#f3f3f3 1px solid; overflow:hidden; width:71px; clip:rect(0px 179px 16px 0px); height:18px}
select#sel { font-size:12px; text-align:center; width:74px; color:#666; line-height:14px; position:relative; top:-2px; left:-2px;}
HTC绑定到select后,可以进行批量渲染,没有定义宽度,所以option内文字长度自适应。
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="select_ready()" />
<script language="">
function select_ready() {
if (this.style.position != 'relative') {
this.style.fontSize = 12;
this.style.position = 'relative';
this.style.left = -2;
this.style.top = -2;
var w = this.clientWidth - 1;
var h = this.clientHeight - 1;
this.outerHTML = '<span 1px solid #366; height: ' + h + '; width: ' + w + ';"><div 1 solid #f3f3f3; overflow: hidden; width: ' + (w-2) + '; height: ' + (h-2) + '">' + this.outerHTML + '</div></span>';
}
}
</script>
不支持standard模式,支持IE6.0和FF1.5

效果演示:

DHTML模拟实现

此方法来自首页,用了图片,又费了N多功夫实现。这是提取并整理出来的代码,首次加载还有点问题。

不支持standard模式,支持IE6.0和FF1.5

效果演示:

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: