发表于： 2023-01-10 20:06:16
0 172
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筋斗云练习</title>
<style>
* {
margin: 0;
padding: 0;
}
.c_nav {
position: relative;
width: 1200px;
height: 50px;
background-color: #ebebeb;
cursor: pointer;
}
.current a {
color: red;
}
.cloud {
position: absolute;
top: 0;
left: 0;
width: 85px;
height: 50px;
background: skyblue;
opacity: .5;
}
.c_nav ul li {
float: left;
margin: 10px;
list-style-type: none;
text-decoration: none;
}
</style>
<script src="js文件存放/animate.js"></script>
<script>
window.addEventListener('load', function() {
//1、获取元素
var cloud = document.querySelector('.cloud');
var c_nav = document.querySelector('.c_nav');
var lis = c_nav.querySelectorAll('li');
//2、给所以的小li绑定事件
var current = 0;
for (var i = 0; i < lis.length; i++) {
//(1) 鼠标经过就把当前小li 的位置作为目标值
lis[i].addEventListener('mousemove', function() {
animate(cloud, this.offsetLeft);
})
//(2) 鼠标离开就复原到起始的位置
lis[i].addEventListener('mouseleave', function() {
animate(cloud, current);
})
//(3) 当我们鼠标点击，就把当前位置作为目标值
lis[i].addEventListener('click', function() {
current = this.offsetLeft;
})
}
})
</script>
</head>
<body>
<div id="c_nav" class="c_nav">
<span class="cloud"></span>
<ul>
<li class="current"><a href="#">首页新闻</a></li>
<li><a>师资力量</a></li>
<li><a>活动策划</a></li>
<li><a>企业文化</a></li>
<li><a>招聘信息</a></li>
<li><a>公司简介</a></li>
<li><a>我是风暴</a></li>
<li><a>我是闪电</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端触摸</title>
<style>
div {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
//1、touchstart 手指触摸DOM元素事件
div.addEventListener('touchstart',function(e) {
// console.log(1);
// console.log(e);
// touches 正在触摸屏幕的所有手指的列表
//targetTouches 正在触摸当前DOM元素的手指列表、
//如果侦听的是一个DOM元素，他们两个是一样的
//changedTouches 手指状态发生改变的列表 从无到有 或者 从有到无
//因为我们一般都是触摸元素 所以最终经常使用的是 targetTouches
console.log(e.targetTouches[0]);
//e.targetTouches[0] 就可以得到正在触摸dom元素的第一个的手指的相关信息 比如 手指的坐标等等
})
//2、touchmove 手指在DOM元素上移动事件
div.addEventListener('touchmove',function() {
// console.log('正在移动');
})
//2、touchend 手指离开DOM元素事件
div.addEventListener('touchend',function(e) {
// console.log('手指离开了');
// console.log(e);
// 当我们手指离开屏幕的时候，就没有了 touches 和 targetTouches 列表
// 但是会有 changedTouches
})
</script>
</body>
</html>
移动端知识点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端拖动</title>
<style>
div {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
<script>
// touchstart 手指触摸元素 获取手指初始坐标，同时获得盒子原来的位置
// touchmove 移动手指 计算手指滑动距离，并且移动盒子
// touchend 离开手指
var div = document.querySelector('div');
//手指的初始坐标
var startX = 0;
var startY = 0;
//盒子的位置
var x = 0;
var y = 0;
div.addEventListener('touchstart',function(e) {
// 获取手指的初始坐标
startX = e.targetTouches[0].pageX;
starty = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
});
div.addEventListener('touchmove',function(e) {
// 计算手指的移动距离 手指移动之后的坐标减去手指初始的坐标
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pageY - startY;
//移动盒子
this.style.left = x + moveX + 'px';
this.style.top = y + moveY + 'px';
e.preventDefault(); //阻止屏幕滚动的默认行为
});
</script>
</body>
</html>
返回列表
评论