我正在制作一个混合应用程序,我想在其上显示一个带有自定义图标的切换开关。任何想法如何实现这一点。使用html5和css3切换开关
-5
A
回答
2
使用这个简单的代码
$(".switch").click(function(){
$(this).toggleClass("on");
});
.switch {
width: 100px;
height: 30px;
border: 1px solid gray;
border-radius: 3px;
overflow: hidden;
}
.switch > div {
width: 50%;
height: 100%;
background: #A81414;
margin-left: 0px;
transition: all 1s;
}
.switch.on > div {
margin-left: 50%;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch">
<div></div>
</div>
1
看到这个捣鼓您的要求。 https://jsfiddle.net/vz9zufk0/
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Toggle.</h1>
<a href="#" class="toggle toggle--on"></a>
<script>
$('.toggle').click(function(e) {
var toggle = this;
e.preventDefault();
$(toggle).toggleClass('toggle--on')
.toggleClass('toggle--off')
.addClass('toggle--moving');
setTimeout(function() {
$(toggle).removeClass('toggle--moving');
}, 200)
});
</script>
+0
你用插件来做到这一点。问题是关于定制开关。 – Mohammad
+0
是的用户可以把他们的图标来定制它... – RanchiRhino
1
我采用非的js的解决方案,但要注意的Firefox将不能正确地显示它(一个简单的复选框会显示虽然)。
input[type="checkbox"].checkboxStyle {
\t position: relative;
}
input[type="checkbox"].checkboxStyle,
input[type="checkbox"].checkboxStyle:before {
\t width: 77px;
\t height: 28px;
}
input[type="checkbox"].checkboxStyle:before {
\t content: "";
\t position: absolute;
\t left: 0;
\t background-image: url('http://image.noelshack.com/fichiers/2016/22/1464687124-checkbox.png');
\t cursor: pointer;
\t transition: background 0.15s ease, color 0.15s ease;
}
input[type="checkbox"].checkboxStyle:not(:checked):before {
\t background-position-x: -46px;
}
input[type="checkbox"].checkboxStyle:checked:before {
\t background-position-x: 0px;
}
<input type="checkbox" class="checkboxStyle" />
相关问题
- 1. 是否需要切换HTML5和CSS3?
- 2. css3开/关切换w/o图像
- 3. 使用HTML5和CSS3来切换'帧'这么多秒,如闪存
- 4. 切换开关为html5音频
- 5. 引导和关闭切换开关
- 6. 使用纯HTML5/CSS3
- 7. HTML5 CSS3和IFRAMES?
- 8. jquery切换开关
- 9. 使用jQuery切换菜单关/开
- 10. 使用AVCam切换开/关闪光灯
- 11. 如何使用jQuery切换div开关
- 12. 使用javascript的引导切换开关
- 13. 创建一个纯粹的CSS3素材切换开关
- 14. 切换CSS3动画
- 15. CSS3切换图标
- 16. 切换CSS3褪色?
- 17. CSS3 3D变换和HTML5画布
- 18. 我应该使用HTML5和CSS3吗?
- 19. 怎么把灼热使用HTML5和CSS3
- 20. DropDown输入使用HTML5和CSS3
- 21. 使用HTML5和CSS3的Ruby On Rails
- 22. jquery切换打开和关闭2格
- 23. 学习HTML5和CSS3
- 24. HTML5和CSS3只有
- 25. 帮助html5和css3
- 26. 在html5音频中使用文本链接切换javascript执行开关
- 27. 切换按钮 - 单击一个和所有切换开关
- 28. Bootstrap 3切换切换按钮文本和图标开关
- 29. Html5 css3 jquery页面转换
- 30. 如何使用切换按钮打开和关闭gprs?
使用引导:http://www.bootstraptoggle.com/ –
是引导切换是非常好,容易.. – RanchiRhino
请张贴这样的问题之前,研究更多 – Sivan