帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 美观开关按钮代码实例
美观开关按钮代码实例
浏览:672次
-
评论:0次
-
发布时间:2017-06-14
Html
Css
Js
*
*
*
*
html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: #ca9f6a; background: -webkit-radial-gradient(ellipse at center, #ca9f6a 0%, #ad7846 100%); background: radial-gradient(ellipse at center, #ca9f6a 0%, #ad7846 100%); font-family: "Open Sans"; } .canvas { padding: 20px; text-align: center; } .switch { margin: 50px; display: inline-block; } .switch { width: 300px; height: 280px; padding: 5px 0; background-color: #9d9d9d; background-image: -webkit-linear-gradient(#b5b5b5, #cecece, #9d9d9d); background-image: linear-gradient(#b5b5b5, #cecece, #9d9d9d); border: 2px solid #916749; -webkit-border-radius: 45px; border-radius: 45px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.3), inset 0 0 3px #333; box-shadow: 0 5px 10px rgba(0,0,0,0.3), inset 0 0 3px #333; position: relative; } .switch:before { content: ""; display: block; background-color: #ededed; background-image: -webkit-linear-gradient(#e6e6e6, #d5d5d5 49%, #e1e1e1); background-image: linear-gradient(#e6e6e6, #d5d5d5 49%, #e1e1e1); position: absolute; top: 10px; bottom: 5px; left: 3px; right: 3px; -webkit-border-radius: 45px; border-radius: 45px; -webkit-box-shadow: 0 -6px 1px rgba(255,255,255,0.65), inset 0 2px 8px #d5d5d5; box-shadow: 0 -6px 1px rgba(255,255,255,0.65), inset 0 2px 8px #d5d5d5; } .switch-button-outer { width: 42%; height: 66%; margin: 17% auto 0; padding-bottom: 17%; overflow: hidden; position: relative; z-index: 1; -webkit-border-radius: 35px; border-radius: 35px; } .switch-button-outer:before { content: ""; background: -webkit-linear-gradient(#afb3b5 0%, #d5d8d9 100%); background: linear-gradient(#afb3b5 0%, #d5d8d9 100%); width: 100%; top: 0; left: 0; position: absolute; bottom: 21%; z-index: 1; -webkit-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 0 3px rgba(255,255,255,0.4); box-shadow: 0 0 3px rgba(255,255,255,0.4); } .switch-button { height: 90%; width: 86%; background: -webkit-linear-gradient(#f3f3f3, #fff); background: linear-gradient(#f3f3f3, #fff); -webkit-border-radius: 30px; border-radius: 30px; overflow: auto; position: relative; top: 5%; left: 7%; cursor: pointer; -webkit-box-shadow: 0 16px 8px -8px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85); box-shadow: 0 16px 8px -8px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85); z-index: 2; } .switch-button-inner { width: 98%; height: 87%; margin: 0 1%; background: -webkit-linear-gradient(#9d9d9d, #dedede, #f0f0f0); background: linear-gradient(#9d9d9d, #dedede, #f0f0f0); position: absolute; bottom: 0; -webkit-border-radius: 25px; border-radius: 25px; position: absolute; z-index: 3; } .switch-button-inner:before { content: ""; height: 16px; width: 4px; margin-left: -2px; background-color: rgba(0,0,0,0.1); border-bottom: 2px solid rgba(255,255,255,0.5); position: absolute; top: 10px; left: 50%; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset; } .switch-button-inner:after { content: ""; width: 20px; height: 20px; border: 2px solid rgba(0,0,0,0.08); margin-left: -12px; position: absolute; left: 50%; bottom: 10px; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 2px 0 rgba(255,255,255,0.7); box-shadow: 0 2px 0 rgba(255,255,255,0.7); } .switch:hover .switch-button { background-image: -webkit-linear-gradient(#fcfcfc, #fff); background-image: linear-gradient(#fcfcfc, #fff); -webkit-box-shadow: 0 14px 8px -7px rgba(0,0,0,0.33) inset, 0 -6px 8px -4px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85); box-shadow: 0 14px 8px -7px rgba(0,0,0,0.33) inset, 0 -6px 8px -4px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85); } .switch:hover .switch-button-inner { bottom: 3px; background: -webkit-linear-gradient(#bababa, #dedede 40%, #e4e4e4); background: linear-gradient(#bababa, #dedede 40%, #e4e4e4); -webkit-box-shadow: inset 0 -4px 3px rgba(255,255,255,0.6); box-shadow: inset 0 -4px 3px rgba(255,255,255,0.6); } .switch:hover .switch-button-inner:before { top: 9.5px; } .switch:hover .switch-button-inner:after { height: 19px; } .switch.checked .switch-button-outer:after { content: ""; height: 50%; width: 80%; background: transparent; position: absolute; top: 6%; left: 10%; z-index: 1; -webkit-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 60px 25px rgba(0,0,0,0.35); box-shadow: 0 60px 25px rgba(0,0,0,0.35); } .switch.checked .switch-button { background-image: -webkit-linear-gradient(#fff, #f3f3f3); background-image: linear-gradient(#fff, #f3f3f3); -webkit-box-shadow: 0 -3px 8px rgba(255,255,255,0.5) inset, 0 -15px 0px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85); box-shadow: 0 -3px 8px rgba(255,255,255,0.5) inset, 0 -15px 0px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85); } .switch.checked .switch-button:before { content: ""; width: 100%; height: 20px; margin-left: -50%; background-image: -webkit-radial-gradient(ellipse at bottom center, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%); background-image: radial-gradient(ellipse at bottom center, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%); display: block; position: absolute; bottom: 0; left: 50%; } .switch.checked .switch-button-inner { background: -webkit-linear-gradient(#ddd, #dedede, #fff); background: linear-gradient(#ddd, #dedede, #fff); bottom: auto; top: 2px; } .switch.checked .switch-button-inner:before { height: 18px; } .switch.checked .switch-button-inner:after { height: 16px; } .switch.checked:hover .switch-button { background-image: -webkit-linear-gradient(#f3f3f3, #fff); background-image: linear-gradient(#f3f3f3, #fff); -webkit-box-shadow: 0 1px 8px rgba(255,255,255,0.5) inset, 0 -13px 0px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85); box-shadow: 0 1px 8px rgba(255,255,255,0.5) inset, 0 -13px 0px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85); } .switch.checked:hover .switch-button:before { background-image: -webkit-radial-gradient(ellipse at bottom center, rgba(255,255,255,0.6), rgba(255,255,255,0) 60%); background-image: radial-gradient(ellipse at bottom center, rgba(255,255,255,0.6), rgba(255,255,255,0) 60%); } .switch.checked:hover .switch-button-inner { background: -webkit-linear-gradient(#d2d2d2, #dedede, #fff); background: linear-gradient(#d2d2d2, #dedede, #fff); bottom: auto; top: 5px; -webkit-box-shadow: inset 0 -4px 3px rgba(255,255,255,0.6); box-shadow: inset 0 -4px 3px rgba(255,255,255,0.6); } .switch.checked:hover .switch-button-inner:before { top: 9.5px; } .switch.checked:hover .switch-button-inner:after { height: 19px; bottom: 9px; } .screws { position: absolute; width: 100%; height: 100%; } .screw { display: block; width: 16px; height: 16px; background-color: rgba(0,0,0,0.6); background-image: -webkit-radial-gradient(circle at top center, #fcfcfc, transparent); background-image: radial-gradient(circle at top center, #fcfcfc, transparent); border: 1px solid #999; color: rgba(0,0,0,0.85); font-family: 'Open Sans'; font-size: 20px; font-weight: bold; text-align: center; line-height: 20px; position: absolute; left: 25px; top: 20px; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 2px 1px rgba(255,255,255,0.5); box-shadow: 0 2px 1px rgba(255,255,255,0.5); } .screw:before { content: ""; width: 100%; height: 60%; background-image: -webkit-radial-gradient(center bottom, rgba(255,255,255,0.5) 50%, transparent); background-image: radial-gradient(center bottom, rgba(255,255,255,0.5) 50%, transparent); position: absolute; bottom: 0; left: 0; -webkit-border-radius: 50%; border-radius: 50%; } .screw:nth-child(2) { left: auto; right: 25px; } .screw:nth-child(3), .screw:nth-child(4) { top: auto; bottom: 25px; } .screw:nth-child(4) { right: 25px; left: auto; }
function Switch(node) { this.switchRoot = node; this.switchRoot.onclick = this.switchClickEventHanlder; } Switch.prototype.switchClickEventHanlder = function (e) { e.target = e.target || e.srcElement; if (e.target.className.indexOf("switch-button") < 0) return; if (!this.classList.contains("checked")) { this.classList.add("checked"); } else { this.classList.remove("checked"); } this.checked = !this.checked; }; var switches = document.querySelectorAll(".switch"); if (typeof switches !== "undefined" && switches.length) { for (var i = switches.length - 1; i >= 0; --i) { new Switch(switches[i]); } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>美观开关按钮代码实例-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:实现了开关按钮,并且此效果非常的逼真,基本完全模拟了现实使用情况。
JS点击DIV左上角出现对勾选中效果
JS点击开关显示或者隐藏input文本框
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
672
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值