前端开发jquery滑动开关
摘要： 网易游戏前端开发 前端开发游戏卡顿原因 游戏开发是wed前端开发吗 前段时间做的项目用到滑动开关，在网上随便搜了一个demo就用了，今天无意中又找到一个demo，才发现原来滑动开关可以做得那么简单，……
| 网易游戏前端开发 |
| 前端开发游戏卡顿原因 |
| 游戏开发是wed前端开发吗 |
前段时间做的项目用到滑动开关，在网上随便搜了一个demo就用了，今天无意中又找到一个demo，才发现原来滑动开关可以做得那么简单，之前那个demo写了好长好长一段代码，瞬间感觉之前写的太麻烦了，现在把写法比较简单的demo记录一下。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>jquery做的滑动按钮开关</title>
</head>
<style>
.slideSwitch {
width: 66px;
height: 30px;
padding: 3px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
background-color: #838383;
position: relative;
}
.slideSwitch .btnn {
width: 30px;
height: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: #fff;
position: absolute;
}
</style>
<body>
<div class=”slideSwitch”>
<div isopen=”false” class=”btnn”></div>
</div>
<script
type=”text/javascript”
></script>
<script>
$(function() {
$(‘.slideSwitch’).on(‘click’, function() {
if (
$(this)
.children()
.attr(‘isopen’) == ‘false’
) {
$(this)
.children()
.attr(‘isopen’, ‘true’)
.animate({ left: ’38px’ })
$(this).css(‘background-color’, ‘green’)
} else {
$(this)
.children()
.attr(‘isopen’, ‘false’)
.animate({ left: ‘3px’ })
$(this).css(‘background-color’, ‘#838383’)
}
})
})
</script>
</body>
</html>
| 游戏开发是属于前端吗 |
| 前端棋牌游戏开发代码 |
| 前端能开发游戏? |
» 本文来自：前端开发者 » 《前端开发jquery滑动开关》
» 本文链接地址：https://www.rokub.com/8087.html
» 您也可以订阅本站：https://www.rokub.com
近期评论