新建一个js文件并保存为select.js,剩下的工作我们全部在这个js中去完成。

函数名:loadSelect(obj);
参数:select对象

相关函数:

 程序代码

function Offset(e)
//取标签的">
首頁 > web前端 > js教程 > 用javascript来实现select标签的美化的代码_表单特效

用javascript来实现select标签的美化的代码_表单特效

WBOY
發布: 2016-05-16 19:08:14
原創
1240 人瀏覽過

论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下,基本实现的初级功能。拿出来和大家一起分享一下。先可以看一下预览效果:http://www.iwcn.net/demo/select。

【功能需求】
1、调用要方便,做好之后应该像这样:

 程序代码

function loadSelect(selectobj){
//传入一个select对象就能将他的样式美化
}


2、不改变原有表单项,表单的页面代码不去破坏:

 程序代码


    

        用户注册
        

            
            
        

        

            
            
        

        

            
            
        

    

    




【实现思路】

第一步:将表单中的select隐藏起来。
为什么?很简单,因为这家伙太顽固了,用css根本搞不出来你想要的。所以把它杀掉。

第二步:用脚本找到select标签在网页上的绝对位置。
我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。

第三步:用脚本把select标签中的值读出来。
虽然藏起来了,但它里边的options我们还有用呢,统统取过来。

第四步:当用户点击select标签的替身,也就是div的时候。我们再用一个div浮在上一个div的下边,这个就是options的替身了。

大致上就是这样了,接下来我们一步一步去实现它!

【准备工作】
1、想好你要把select美化成什么样子,并准备好相应的图片。我准备了两张小图,就是下拉箭头1和下拉箭头2,1是默认样式,2是鼠标移过来的样式。
2、写好一个普通的表单递交页面,比如下边这个。注意我给select定义了基本的CSS样式、在头部添加了调用js文件的代码、在body中添加了调用函数的脚本。
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板