/*JS部分*/
;(function(){function hSdrop(options){var self=this;self=$.extend(self,{els:'',},options);$(self.els).click(function(e){self.init(this);})}
hSdrop.prototype={init:function(el){var kl=''
kl+='<div class="select-moob">'
kl+='<div class="select-moob-cover"></div>'
kl+='<div class="select-moob-container">'
kl+=' <div class="x12 select-moob-title">'
kl+=' <div class="cancel">取消</div>'
kl+=' <div class="determine">确定</div>'
kl+=' </div>'
kl+=' <div class="x12 select-moob-content">'
kl+=' <div class="swiper-container sw-select">'
kl+=' <div class="swiper-wrapper">'
var dob=$(el).next().children();for(var i=0;i<dob.length;i++){kl+=' <div class="swiper-slide" vid="'+$(dob[i]).attr('vid')+'">'+$(dob[i]).html()+'</div>'}
kl+=' </div>'
kl+=' </div>'
kl+=' </div>'
kl+='</div>'
kl+='</div>'
$('body').append(kl);var swipersff=new Swiper('.sw-select',{direction:'vertical',autoHeight:true,slidesPerView:3,centeredSlides:true,observer:true,observeParents:true,observeSlideChildren:true,});$('.sw-select .swiper-wrapper>div').click(function(e){swipersff.slideTo($(this).index(),500,false);});$('.select-moob .cancel,.select-moob-cover').click(function(e){$('.select-moob').remove();});$('.select-moob .determine').click(function(e){$(el).children('input').val($('.sw-select .swiper-slide-active').html());$(el).children('input').attr('value',$('.sw-select .swiper-slide-active').attr('vid'));$('.select-moob').remove();})},}
window.hSdrop=hSdrop;}());
/*css部分*/
.display-none {
display: none
}
/* .sele-bp input{
display: none;
} */
.select-moob {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10
}
.select-moob-cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 1
}
.select-moob-container {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
background-color: #fff;
z-index: 2;
animation: aclstop .3s 1 forwards;
-webkit-animation: aclstop .3s 1 forwards;
-webkit-overflow-scrolling: touch
}
@-webkit-keyframes aclstop {
from {
opacity: 0;
transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-webkit-transform: translateY(100px)
}
to {
opacity: 1;
transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0)
}
}
@keyframes aclstop {
from {
opacity: 0;
transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-webkit-transform: translateY(100px)
}
to {
opacity: 1;
transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0)
}
}
.select-moob-title {
height: 45px;
background-color: #f5f5f5;
padding: 0 20px
}
.select-moob-title>div {
font-size: 15px;
letter-spacing: 1px;
color: #212121;
line-height: 45px;
cursor: pointer
}
.select-moob-title .cancel {
float: left;
color: #666666;
}
.select-moob-title .determine {
float: right;
color: #2454FF;
}
.select-moob-content {
height: 150px;
overflow: auto
}
.select-moob-content .sw-select {
height: 144px;
position: relative
}
.select-moob-content .sw-select:before {
content: '';
position: absolute;
top: 33%;
left: 0;
right: 0;
height: 45px;
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1
}
.select-moob-content .swiper-slide {
text-align: center;
line-height: 45px;
opacity: .5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 15px;
cursor: pointer;
}
.select-moob-content .swiper-slide-active {
opacity: 1;
font-size: 15px
}
/*html部分
也要引入swiper的js和css*/
<div class="ipt-span sele-bp">
<input type="text" name="" id="" value="" placeholder="请输入所属银行(请填写到具体的支行)" readonly="readonly" />
</div>
<div class="display-none">
<div vid="1">新阶段 稳中求进</div>
<div vid="0">新阶段 创新驱动</div>
<div vid="2">新常态 稳中求进</div>
<div vid="3">新常态 创新驱动</div>
</div>
<script type="text/javascript">
new hSdrop({
els:'.sele-bp'
})
</script>
swiper模拟下拉选择
猜你喜欢
转载自blog.csdn.net/qq_35086913/article/details/104657627
今日推荐
周排行