初始
<head>
<meta charset="UTF-8">
<!-- 移动端适配器 -->
<!-- viewport 视口
width 视口的宽度
=device-width 代表视口等于设备的宽
initial-scale 缩放比例 大于1就是放大 小于1就是缩小 等于1就是不变
minimum-scale=1 允许用户缩放最小的比例
,maximum-scale=1 允许用户缩放最大的比例
user=scalable=yes/no 是否允许用户缩放（一般都不允许，默认允许缩放，记得改）
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=0.2,maximum-scale=5">
<title>Document</title>
</head>
<body>
<div>9+8794535</div>
</body>
移动端样式问题
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
width: 200px;
height: 200px;
display: block;
/* 点击a标签高亮效果，在移动端显示 */
-webkit-tap-highlight-color: rgba(red, green, blue, 0.8);
}
input {
border: none;
}
input:focus {
/* 清楚input的轮廓线 */
outline: none;
}
body {
/* 为了防止布局被破坏，一般会设置最小宽度 */
min-width: 375px;
background-color: pink;
}
</style>
</head>
<body>
<input type="text" name="" id="" placeholder="这里">
<a href="#">我是a</a>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 250px;
height: 250px;
background-color: aquamarine;
}
</style>
</head>
手指事件
<body>
<!-- 只有3个 手指移入
-->
<div></div>
<script>
var div = document.querySelector("div")
div.addEventListener("touchstart", function(e) {
console.log("touch")
console.log(e);
})
div.addEventListener("touchmove", function(e) {
console.log("move")
console.log(e)
})
div.addEventListener("touchend", function(e) {
console.log('end')
console.log(e)
})
//属性changeTouches 最新更改的触摸
//touchstart 事件,它是一个触发当前时间的触点列表
//touchmove 事件，它是一个从最后一次事件对比，更改了的触点列表
//touchend 事件，它是已经从触摸表面移除的触点列表
//数组里的数代表有多少根手指
//clientX 相对于浏览器窗口的可视区域的x y的坐标 可视区域不包括工具栏和滚动条
//radiusX 手指在元素上的坐标
//screenX 手指在屏幕上的坐标
//traget 目标元素
// touches 手指列表的总数
//targetTouches 目标元素上的手指列表
</script>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
}
</style>
</head>
手指移动练习
<body>
<div></div>
<script>
//创建值
var statX = 0;
var statY = 0;
var x = 0;
var y = 0;
//获取div
var div = document.querySelector("div");
//获取开始触摸时的位置
div.addEventListener("touchstart", function(e) {
statX = e.targetTouches[0].clientX
statY = e.targetTouches[0].clientY
x = this.offsetLeft;
y = this.offsetTop;
console.log(x, y)
})
//在触摸时 手移动了哪些位置，将坐标复制给movex,y，然后减去当前的x,y值
div.addEventListener("touchmove", function(e) {
var moveX = e.targetTouches[0].clientX - statX
var moveY = e.targetTouches[0].clientY - statY
// 得到的结果就是移动位置，然后赋值给div的style
this.style.left = x + moveX + 'px'
this.style.top = y + moveY + 'px'
})
</script>
</body>
过度事件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aquamarine;
transition: all 2s;
}
</style>
</head>
<body>
<button>
按钮
</button>
<div></div>
<script>
var button = document.querySelector("button")
var div = document.querySelector("div")
button.onclick = function() {
div.style.width = "300px"
}
//transitionend 过度事件，结束后执行……
div.addEventListener("transitionend", function() {
console.log("过度结束")
})
</script>
</body>
</html>
扫一扫
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
