[css+原生js]使用css3+原生js实现简单的弹幕按钮过渡效果
导读
- 使用技术 : HTML CSS3 JavaScript基础
- 测试环境 : Mac os Catalina 10.15.2
- 测试浏览器 : Safari GoogleChrome Firefox
- 编辑工具 : HBuiler X
正文
疫情当前，闲的无事可做，一日在哔哩哔哩网站学习时(众所周知哔哩哔哩是一个学习平台)，突然发现视频播放界面下的弹幕按钮过渡效果比较有意思，适合初学者拿来作为练习使用，于是灵感大发，用JQuery做了出来。
几日后，转念一想，如此简单的效果还要用第三方类库岂不是有损我菜鸡中的战斗鸡称号，并且也不适合html+css新手直接接触，凡事不能一口吃个胖子，学JQuery还是要系统化学习JavaScript之后才比较稳妥，易于理解…
(读者:废话这么多干嘛？上正文啊！)
先上效果：
源代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹!</title>
<style>
*{margin:0;padding:0;text-decoration:none;list-style:none;}
.all{height:400px;width:600px;margin:0 auto;}
#dan1{ height:42px;
width:70px;
position:relative;top:20px;
border-radius:21px;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
}
.dan_notactive{background:#4d4d4d;}
.dan_active{background:#63b8ff;}
#dan1 a{
background:#fff;
border:1px solid;
display:block;
height:40px;
width:40px;
line-height:40px;
font-size:20px;
font-weight:bold;
position: absolute;
border-radius:20px;
text-align:center;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
}
.a_notactive{color:#4d4d4d;border-color:#4d4d4d;left:0px;}
.a_active{color:#63b8ff;border-color:#63b8ff;left:28px;}
</style>
</head>
<body>
<div class="all">
<div class="dan_notactive" id="dan1">
<a href="JavaScript:void(0)" id="a1" class="a_notactive">弹</a>
</div>
</div>
<script type="text/javascript">
var a_button = document.querySelector('#a1');
var dan_button = document.querySelector('#dan1');
var IsActive = false;
dan_button.onclick = function(){
if(!IsActive){
a_button.className = 'a_active';
this.className = 'dan_active';
}else{
a_button.className = 'a_notactive';
this.className = 'dan_notactive';
}
IsActive = !IsActive;
}
</script>
</body>
</html>
源码解析:
图例
css
*{margin:0;padding:0;text-decoration:none;list-style:none;}
/* 这里是清除默认样式 */
.all{height:400px;width:600px;margin:0 auto;}
/* 整体建立在一个.all的大盒子操作 有没有皆可 */
#dan1{height:42px;width:70px;position:relative;top:20px;
border-radius:21px;transition:all 0.7s ease;-webkit-transition:all 0.7s ease;}
/* 这里设置了弹幕按钮整体(含背景)的div的样式 其中包括了过渡样式 */
/* 已知IE9及以下不支持该属性 */
.dan_notactive{background:#4d4d4d;}
/* 这里是弹幕按钮整体未激活状态的背景色 */
.dan_active{background:#63b8ff;}
/* 这里是弹幕按钮整体激活状态的背景色 */
#dan1 a{
background:#fff;border:1px solid;
display:block;height:40px;width:40px;
line-height:40px;font-size:20px;font-weight:bold;
position: absolute;border-radius:20px;text-align:center;
transition:all 0.7s ease;-webkit-transition:all 0.7s ease;
}
/* 这里设置了'弹'按钮的样式 其中包括了过渡样式 */
/* 已知IE9及以下不支持该属性 */
.a_notactive{color:#4d4d4d;border-color:#4d4d4d;left:0px;}
/* 这里是'弹'按钮未激活状态的背景色 */
.a_active{color:#63b8ff;border-color:#63b8ff;left:28px;}
/* 这里是'弹'按钮激活状态的背景色 */
js
var a_button = document.querySelector('#a1');
var dan_button = document.querySelector('#dan1');
// html5新增的方法去获取DOM元素，并将获取的DOM元素赋值给变量方便操作
var IsActive = false;
// 声明一个变量方便状态之间的切换(不然的话按钮会有去无回)
dan_button.onclick = function(){ // 这里为整体绑定一个点击事件
if(!IsActive){
a_button.className = 'a_active';
this.className = 'dan_active';
// 如果IsActive为假 那么执行覆盖 为两个元素全部添加激活类(激活向右的过渡)
}else{
a_button.className = 'a_notactive';
this.className = 'dan_notactive';
// 如果IsActive不为假 那么执行覆盖 为两个元素全部添加未激活类(激活向左的过渡)
}
IsActive = !IsActive;
// 这是无论为真假 统一为IsActive取非 方便下一次操作(比如这次是向右 下次就是向左了)
}
总结
与JQuery的不同，原生js更加适合将样式全部写在类里面，在调用时直接给予相应的类就好;而jQuery会适合直接操作DOM元素，因为更加方便。