jquery swiper实现手机端下拉选择框效果代码
代码语言:html
所属分类:选择器
代码描述:jquery swiper实现手机端下拉选择框效果代码
代码标签: jquery swiper 手机端 下拉 选择框
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style> * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; outline: 0; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent } html { margin: 0; padding: 0; border: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-overflow-scrolling: touch } body { font-size: 14px; color: #333; background: #fff; font-family: "Microsoft YaHei", "simsun", "Helvetica Neue", Arial, Helvetica, sans-serif } .x12 { width: 100%; float: left; } .display-none { display: none; } .container { width: 100%; height: 100%; } /* 活动表单 */ .m-form-gp .m-from-tips { font-size: 14px; color: #212121; margin-bottom: 8px; } .m-form-gp .m-from-tips span { color: #fe0000; } .m-form-gp .m-from-input textarea { width: 100%; height: 84px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: solid 1px #e0e0e0; padding: 10px; resize: none; } .m-form-gp .m-from-input input { width: 100%; height: 40px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: solid 1px #e0e0e0; padding-left: 10px; } .select-xi i { position: absolute; top: 10px; right: 10px; z-index: 3; font-size: 20px; color: #999; } .m-from-input input[disabled] { background-color: #FFFFFF; } .m-form-gp-bp { margin-top: 20px; } .m-form-gp-bp>div { margin-bottom: 10px; } .ck-checked { padding-left: 20px; } .m-form-ckgp>div { float: left; position: relative; } .m-form-ckgp>div a { color: #16a951; font-size: 12px; } .ck-checked label { cursor: pointer; font-size: 13px; } .ck-checked input[type=checkbox] { position: absolute; top: 2px; left: 0; z-index: 3; width: 15px; height: 15px; opacity: 0; cursor: pointer } .ck-checked input[type=checkbox]+span { position: absolute; top: 2px; left: 0; display: block; width: 15px; height: 15px; border: solid 1px #dedede; text-align: center; line-height: 14px; cursor: pointer } .ck-checked input[type=checkbox]+span i { color: #fe0000; font-size: 18px; opacity: 0; position: absolute; left: -2px; top: -2px; } .ck-checked input[type=checkbox]:checked+span i { display: block; opacity: 1 } .sub-form { position: fixed; left: 0; right: 0; bottom: 0; height: 48px; -webkit-box-shadow: 0px 0px 16px 0px rgba(171, 171, 171, 0.16); box-shadow: 0px 0px 16px 0px rgba(171, 171, 171, 0.16); background-color: #FFFFFF; border-top: 1px solid rgba(171, 171, 171, 0.2); } .sub-form>button { height: 100%; font-size: 18px; letter-spacing: 1px; background-color: #16a951; border: 1px solid #16a951; color: #ffffff; width: 100%; float: left; } .m-form-chbox-gp .m-from-tips span { color: #fe0000; } .m-form-chbox-gp .m-form-chbox-glist { margin-top: 10px; } .m-form-chbox-gp .m-form-chbox-glist>div { position: relative; float: left; margin-right: 10px; } /*n */ /* 下拉选择 */ .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, 0.5); z-index: 1; } .select-moob-container { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background-color: #FFFFFF; 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: 48px; background-color: #f5f5f5; padding: 0 20px; } .select-moob-title>div { font-size: 15px; letter-spacing: 1px; color: #212121; line-height: 48px; cursor: pointer; } .select-moob-title .cancel { float: left; } .select-moob-title .determine { float: right; } .select-moob-content { height: 150px; overflow: auto; } .select-moob-content .sw-select { height: 144.........完整代码请登录后点击上方下载按钮下载查看
网友评论0