classList属性

最新推荐文章于 2024-07-18 11:48:33 发布

yyyyyyoow

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量372

点赞数 5

文章标签： javascript 前端

本文链接：https://blog.csdn.net/mobolove/article/details/140421761

版权

classList属性
classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。
该属性用于在元素中添加，移除及切换CSS类(注意不要加.)
添加类：element.claaList.add('类名');
移除类：element.classList.remove('类名');
切换类：element.classList.toggle('类名');
<style>
.bg {
background-color: black;
}
</style>
<body>
<div class="one two"></div>
<button> 开关灯</button>
<script>
// classList 返回元素的类名
var div = document.querySelector('div');
// console.log(div.classList[1]);//two
div.classList.add('three');
div.classList.remove('one');
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
document.body.classList.toggle('bg');//点击添加bg类点击删除bg类
})
</script>
</body>

小圆点跟随变化
过渡结束之后变化，写到transitionend里面
1.把ol里面li带有current类名的选出来去掉类名 remove
querySelector只返回指定选择器的第一个元素对象
ol.querySelector('.current').classList.remove('current');
2.让当前索引号的小li 加上 current add
ol.children[index].classList.add('current');

手指滑动轮播图
// 触摸元素 touchstart：获取手指初始坐标
var startX = 0;
var moveX = 0; // 后面我们会使用这个移动距离所以要定义一个全局变量
var flag = false;
ul.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX;
// 手指触摸的时候就停止定时器
clearInterval(timer);
});
// 移动手指 touchmove：计算手指的滑动距离，并且移动盒子
ul.addEventListener('touchmove', function (e) {
// 计算移动距离
moveX = e.targetTouches[0].pageX - startX;
// 移动盒子：盒子原来的位置 + 手指移动的距离
var translatex = -index * w + moveX;
// 手指拖动的时候，不需要动画效果所以要取消过渡效果
ul.style.transition = 'none';
ul.style.transform = 'translateX(' + translatex + 'px)';
flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果
e.preventDefault(); // 阻止滚动屏幕的行为
});
// 手指离开根据移动距离去判断是回弹还是播放上一张下一张
ul.addEventListener('touchend', function (e) {
if (flag) {
// (1) 如果移动距离大于50像素我们就播放上一张或者下一张
if (Math.abs(moveX) > 50) {
// 如果是右滑就是播放上一张 moveX 是正值
if (moveX > 0) {
index--;
} else {
// 如果是左滑就是播放下一张 moveX 是负值
index++;
}
var translatex = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translatex + 'px)';
} else {
// (2) 如果移动距离小于50像素我们就回弹
var translatex = -index * w;
ul.style.transition = 'all .1s';
ul.style.transform = 'translateX(' + translatex + 'px)';
}
}
// 手指离开的时候就重新开启定时器
clearInterval(timer);
timer = setInterval(function () {
index++;
var translatex = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
});

yyyyyyoow

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
classList属性

/ (1) 如果移动距离大于50像素我们就播放上一张或者下一张。// 移动手指 touchmove：计算手指的滑动距离，并且移动盒子。// (2) 如果移动距离小于50像素我们就回弹。// 移动盒子：盒子原来的位置 + 手指移动的距离。移除类：element.classList.remove('类名');切换类：element.classList.toggle('类名');// 手指离开根据移动距离去判断是回弹还是播放上一张下一张。添加类：element.claaList.add('类名');
复制链接

扫一扫