网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
表单按钮
-> 使用js美化下拉列表样式
使用js美化下拉列表样式
作者:admin 发布时间:2009-6-29 15:24:22 发布人: admin
<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <meta http-equiv="Content-Language" content="zh-CN"/> <title>用javascript美化Select</title> <script type="text/javascript"> var childCreate=false; function Offset(e) //取标签的绝对位置 { var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight-2; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } return { top : t, left : l, width : w, height : h } } function loadSelect(obj){ //第一步:取得Select所在的位置 var offset=Offset(obj); //第二步:将真的select隐藏 obj.style.display="none"; //第三步:虚拟一个div出来代替select var iDiv = document.createElement("div"); iDiv.id="selectof" + obj.name; iDiv.style.position = "absolute"; iDiv.style.width=offset.width + "px"; iDiv.style.height=offset.height + "px"; iDiv.style.top=offset.top + "px"; iDiv.style.left=offset.left + "px"; iDiv.style.background="url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px"; iDiv.style.border="1px solid #3366ff"; iDiv.style.fontSize="12px"; iDiv.style.lineHeight=offset.height + "px"; iDiv.style.textIndent="4px"; document.body.appendChild(iDiv); //第四步:将select中默认的选项显示出来 var tValue=obj.options[obj.selectedIndex].innerHTML; iDiv.innerHTML=tValue; //第五步:模拟鼠标点击 iDiv.onmouseover=function(){//鼠标移到 iDiv.style.background="url(/articleimg/2007/04/4687/icon_select_focus.gif) no-repeat right 4px"; } iDiv.onmouseout=function(){//鼠标移走 iDiv.style.background="url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px"; } iDiv.onclick=function(){//鼠标点击 if (document.getElementById("selectchild" + obj.name)){ //判断是否创建过div if (childCreate){ //判断当前的下拉是不是打开状态,如果是打开的就关闭掉。是关闭的就打开。 document.getElementById("selectchild" + obj.name).style.display="none"; childCreate=false; }else{ document.getElementById("selectchild" + obj.name).style.display=""; childCreate=true; } }else{ //初始一个div放在上一个div下边,当options的替身。 var cDiv = document.createElement("div"); cDiv.id="selectchild" + obj.name; cDiv.style.position = "absolute"; cDiv.style.width=offset.width + "px"; cDiv.style.height=obj.options.length *20 + "px"; cDiv.style.top=(offset.top+offset.height+2) + "px"; cDiv.style.left=offset.left + "px"; cDiv.style.background="#f7f7f7"; cDiv.style.border="1px solid silver"; var uUl = document.createElement("ul"); uUl.id="uUlchild" + obj.name; uUl.style.listStyle="none"; uUl.style.margin="0"; uUl.style.padding="0"; uUl.style.fontSize="12px"; cDiv.appendChild(uUl); document.body.appendChild(cDiv); childCreate=true; for (var i=0;i<obj.options.length;i++){ //将原始的select标签中的options添加到li中 var lLi=document.createElement("li"); lLi.id=obj.options[i].value; lLi.style.textIndent="4px"; lLi.style.height="20px"; lLi.style.lineHeight="20px"; lLi.innerHTML=obj.options[i].innerHTML; uUl.appendChild(lLi); } var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li"); for (var j=0;j<obj.options.length;j++){ //为li标签添加鼠标事件 liObj[j].onmouseover=function(){ this.style.background="gray"; this.style.color="white"; } liObj[j].onmouseout=function(){ this.style.background="white"; this.style.color="black"; } liObj[j].onclick=function(){ //做两件事情,一是将用户选择的保存到原始select标签中,要不做的再好看表单递交后也获取不到select的值了。 obj.options.length=0; obj.options[0]=new Option(this.innerHTML,this.id); //同时我们把下拉的关闭掉。 document.getElementById("selectchild" + obj.name).style.display="none"; childCreate=false; iDiv.innerHTML=this.innerHTML; } } } } } </script> <style type="text/css"> select{width:200px;height:20px;} </style> </head> <body> <h1>用javascript模拟select达到美化效果</h1> <form name="f"> <fieldset> <legend>用户注册</legend> <div> <label for="username">帐号</label> <input type="text" id="username" name="username"/> </div> <div> <label for="pwd">密码</label> <input type="password" name="pwd" id="pwd"/> </div> <div> <label for="province">省份</label> <select id="province" name="province"> <option value="10">江西</option> <option value="11">福建</option> <option value="12">广东</option> <option value="13">浙江</option> </select> </div> </fieldset> <input type="submit" value="提交" name="btnSub"/> </form> <script type="text/javascript"> loadSelect(document.f.province); </script> <p> <a href="http://web.archive.org/web/20150530200225/http://www.iwcn.net/">作者博客</a> </p> </body> </html></font>
通过JS模拟select下拉列表,达到更漂亮的美化效果
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
网页功能按钮大全
下一篇:文章:
获得上传域文本框的文件名
本类浏览排行 »
搜索页面中的内容
又一款综合搜索引擎代码
标题栏显示当前时间
倒影效果的电子表,显示当前时间
自动记录当前页面最新的更新日期
JS让网页每隔2秒弹出一次对话框
一款超酷的CSS列表排行榜
鼠标悬停放大的纯CSS分页效果
本站推荐文章 »
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果
很酷的图片伸缩放大功能
较好的视觉效果的网页选项卡
CSS实例:通过定义渐变边框给图片加阴影