您正在使用 IPV4 [3.235.42.157] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 016
2024年 劳动节 043
2025年 元 旦 288
2025年 春 节 316
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
js实现select选择框效果及美化
内容摘要: html代码如下:divid='type'class='test'span投资种类/spanulclass='dropdown'li期货/lili股票/lili期权/li/ul/divdivid='kind'class='test'span投资类型/spanulclass='dropdown'li趋势/lili震荡/lili套利/lili选股/lili择时/......
html代码如下:

<divid="type"class="test">

<span>投资种类</span>

<ulclass="dropdown">

<li>期货</li>

<li>股票</li>

<li>期权</li>

</ul>

</div>

<divid="kind"class="test">

<span>投资类型</span>

<ulclass="dropdown">

<li>趋势</li>

<li>震荡</li>

<li>套利</li>

<li>选股</li>

<li>择时</li>

</ul>

</div>

css代码如下:

ulli{

list-style:none;

}

.test{

position:relative;

float:left;

width:120px;

height:40px;

padding-left:11px;

font-size:15px;

line-height:40px;

cursor:pointer;

border:1pxsolid#d2d2d2;

border-radius:3px;

margin-right:20px;

outline:none;

}

.test:before{

position:absolute;

right:13px;

top:18px;

width:0;

height:0;

content:"";

border-width:8px8px08px;

border-style:solid;

border-color:#d36969transparent;

-webkit-transition:transform.25s;

-moz-transition:transform.25s;

-ms-transition:transform.25s;

-o-transition:transform.25s;

transition:transform.25s;

}

.test:after{

position:absolute;

right:15px;

top:18px;

width:0;

height:0;

content:"";

border-width:6px6px06px;

border-style:solid;

border-color:#ffftransparent;

-webkit-transition:all.25s;

-moz-transition:all.25s;

-ms-transition:all.25s;

-o-transition:all.25s;

transition:all.25s;

}

.test.active:before{

-webkit-transform:rotate(180deg);

-moz-transform:rotate(180deg);

-ms-transform:rotate(180deg);

-o-transform:rotate(180deg);

transform:rotate(180deg);

}

.test.active:after{

top:20px;

-webkit-transform:rotate(180deg);

-moz-transform:rotate(180deg);

-ms-transform:rotate(180deg);

-o-transform:rotate(180deg);

transform:rotate(180deg);

}

.test.dropdown{

position:absolute;

right:0;

left:0;

display:none;

padding:0;

border-radius:inherit;

border:1pxsolid#d2d2d2;

box-shadow:2px2px5pxrgba(0,0,0,.4);

}

.test.active.dropdown{

display:block;

}

.test.dropdown:before{

position:absolute;

right:13px;

bottom:100%;

width:0;

height:0;

content:"";

border-width:08px8px8px;

border-style:solid;

border-color:#d2d2d2transparent;

}

.test.dropdown:after{

position:absolute;

right:15px;

bottom:100%;

width:0;

height:0;

content:"";

border-width:06px6px6px;

border-style:solid;

border-color:#ffftransparent;

}

.test.dropdownli{

float:left;

width:129px;

font-size:14px;

-webkit-transition:all.3sease-out;

-moz-transition:all.3sease-out;

-ms-transition:all.3sease-out;

-o-transition:all.3sease-out;

transition:all.3sease-out;

text-align:center;

}

.test.dropdownli:first-of-type{

border-radius:3px3px00;

}

.test.dropdownli:last-of-type{

border-radius:003px3px;

}

.test.dropdownli:hover{

color:#fff;

background:#c43c3d;

}

对于:before和:after两个伪元素不理解可以去看看我上篇博客点击这里

js代码如下:

functionDropDown(el){

this.dd=el;

this.span=this.dd.children('span');

this.li=this.dd.find('ul.dropdownli');

this.val='';

}

DropDown.prototype.initEvents=function(){

varobj=this;

obj.dd.on('click',function(event){

$(this).toggleClass('active').siblings().removeClass('active');

event.stopPropagation();

});

obj.li.on('click',function(){

varopt=$(this);

obj.val=opt.html();

if(obj.span.html()==obj.val)return;

obj.span.html(obj.val);

$(document).click(function(){

$('.test').removeClass('active');

});

})

}

vartest1=newDropDown($('#type'));

vartest2=newDropDown($('#kind'));

test1.initEvents();

test2.initEvents()

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JS利用Intl解决前端日期和时间的格式化详解

 

下一篇:JS简单设置下拉选择框默认值的方法

发布日期:2023/3/9
手机扫二维码直达本页
发布时间:13:02:34
点  击:17
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....