20191019 update
This commit is contained in:
parent
c4bf3a6e9f
commit
bd90cadea6
10
20191016/20191016.md
Normal file
10
20191016/20191016.md
Normal file
@ -0,0 +1,10 @@
|
||||
# 20191013
|
||||
|
||||
|
||||
|
||||
* offset示例
|
||||
[linkToHtml](./offset.html)
|
||||
* offsetWidth 获取元素的宽度(content , padding , border)
|
||||
* offsetHeight 获取元素的高度
|
||||
* offsetLeft 获取元素距离屏幕左侧的距离
|
||||
* 分析父级有没有定位属性，正常流式文档流就是屏幕左侧，浮动了就是距离浮动元素的距离 ()
|
||||
49
20191016/moveBox.html
Normal file
49
20191016/moveBox.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="移动到400px的位置" id="btn1">
|
||||
<div id="dv"></div>
|
||||
<script type='text/javascript'>
|
||||
var btn1 = document.getElementById('btn1')
|
||||
var dv = document.getElementById('dv')
|
||||
var timer
|
||||
btn1.onclick = function() {
|
||||
//让div移动到400px的位置
|
||||
// dv.style.left = '400px';
|
||||
//一步一步走 匀速
|
||||
var step = 1
|
||||
//每隔一段时间向右走一步 创建定时器
|
||||
var current = dv.offsetLeft
|
||||
clearInterval(timer);
|
||||
timer = setInterval(function() {
|
||||
current += step;
|
||||
//把最新的赋给div
|
||||
dv.style.left = current +'px'
|
||||
if(current > 400) {
|
||||
clearInterval(timer);
|
||||
current = 400
|
||||
// return
|
||||
}
|
||||
}, 10)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
51
20191016/offset.html
Normal file
51
20191016/offset.html
Normal file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.outer {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: red;
|
||||
padding: 50px;
|
||||
border: 10px solid skyblue;
|
||||
margin: 20px;
|
||||
}
|
||||
.inner {
|
||||
width: 100px;
|
||||
height:100px;
|
||||
background: green;
|
||||
padding: 10px;
|
||||
border: 5px solid blue;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner" id="inner"></div>
|
||||
</div>
|
||||
<input type="button" value="按钮" id='btn'>
|
||||
<script type="text/javascript">
|
||||
//offset
|
||||
var btn = document.getElementById('btn')
|
||||
var inner = document.getElementById('inner')
|
||||
document.getElementById('btn').onclick = function() {
|
||||
//获取元素的宽度(content border padding)
|
||||
console.log(inner.offsetWidth); //不包括maigin
|
||||
//获取元素的高度
|
||||
console.log(inner.offsetHeight);
|
||||
//普通文档流 元素距离左侧的距离
|
||||
console.log(inner.offsetLeft);
|
||||
console.log(inner.offsetTop);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
62
20191018/offset.html
Normal file
62
20191018/offset.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div {
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
background: red;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="移动到400px" id='btn1'>
|
||||
<input type="button" value="移动到800px" id='btn2'>
|
||||
<div id="dv"></div>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
var btn1 = document.getElementById('btn1')
|
||||
var dv = document.getElementById('dv')
|
||||
var timer1;
|
||||
btn1.onclick=function() {
|
||||
var current = dv.offsetLeft
|
||||
var step = 10
|
||||
timer1 = setInterval(function(){
|
||||
current += step;
|
||||
//先判断后赋值
|
||||
if(current >= 400) {
|
||||
clearInterval(timer1)
|
||||
current = 400
|
||||
}
|
||||
dv.style.left = current + 'px';
|
||||
}, 10)
|
||||
}
|
||||
|
||||
var btn2 = document.getElementById('btn2')
|
||||
var timer2;
|
||||
btn2.onclick=function() {
|
||||
var current = dv.offsetLeft
|
||||
var step = 10
|
||||
timer2 = setInterval(function(){
|
||||
current += step;
|
||||
//先判断后赋值
|
||||
if(current >= 800) {
|
||||
clearInterval(timer2)
|
||||
current = 800
|
||||
}
|
||||
dv.style.left = current + 'px';
|
||||
}, 10)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
6
20191019/20191019.md
Normal file
6
20191019/20191019.md
Normal file
@ -0,0 +1,6 @@
|
||||
# 20191019
|
||||
|
||||
|
||||
|
||||
* 轮播图案例
|
||||
[linkToHtml](./slider.html)
|
||||
139
20191019/slider.html
Normal file
139
20191019/slider.html
Normal file
@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
.slider {
|
||||
width: 590px;
|
||||
height: 470px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
.inner {
|
||||
width: 590px;
|
||||
height: 470px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.inner ul li {
|
||||
float: left;
|
||||
|
||||
}
|
||||
.inner ul {
|
||||
width: 500%;
|
||||
position: absolute;
|
||||
}
|
||||
.inner img {
|
||||
width: 590px;
|
||||
|
||||
}
|
||||
|
||||
.focus {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
bottom:25px;
|
||||
}
|
||||
.focus span{
|
||||
padding:10px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 50%;
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.focus span:hover {
|
||||
transform:scale(1.2);
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="slider" id="slider">
|
||||
<div class="inner">
|
||||
<ul>
|
||||
<li><a href="#"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/82345/16/13178/77786/5da93550E6449f58e/f5b14f641913efba.jpg.webp" alt="" srcset=""></a></li>
|
||||
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/73861/8/7311/133024/5d562902E29c956c1/da390c8c345c48e0.jpg.webp" alt="" srcset=""></a></li>
|
||||
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/79136/10/13206/197242/5da92d47Ee54665df/39d85a2990ba58d1.jpg.webp" alt="" srcset=""></a></li>
|
||||
<li><a href="#"><img src="https://imgcps.jd.com/ling/22692212401/6JGh6JCE6YWS6ZKc5oOg/6YOo5YiGMuS7tjXmipg/p-5bd8253082acdd181d02fa02/153dad62.jpg" alt="" srcset=""></a></li>
|
||||
<li><a href="#"><img src="https://img14.360buyimg.com/pop/s590x470_jfs/t1/46901/24/7545/62345/5d52317fEebadcf80/8fb168cddd5ef2b9.jpg.webp" alt="" srcset=""></a></li>
|
||||
</ul>
|
||||
<div class="focus" id="focus">
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
<span>1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type='text/javascript'>
|
||||
function my$(id) {
|
||||
return document.getElementById(id)
|
||||
}
|
||||
//获取元素
|
||||
var slider = my$('slider')
|
||||
var inner = slider.children[0]
|
||||
var ulObj = inner.children[0]
|
||||
var focus = inner.children[1]
|
||||
var spans = focus.children
|
||||
//获取图片的宽度
|
||||
// var imgW = 590;
|
||||
var imgW = inner.offsetWidth
|
||||
console.log(imgW)
|
||||
//批量绑定
|
||||
var length = spans.length
|
||||
for(var i=0;i<length;i++) {
|
||||
// spans[i].index = i;
|
||||
console.log(spans[i])
|
||||
spans[i].setAttribute('index',i)
|
||||
spans[i].onmouseover = function() {
|
||||
//移动 目标位置，向什么地方移动多少距离 ul
|
||||
animate(ulObj,-this.getAttribute('index')*imgW);
|
||||
}
|
||||
spans[i].onmouseout = function() {
|
||||
//开启自动播放
|
||||
}
|
||||
}
|
||||
function animate(ele,target) {
|
||||
console.log(ele,target)
|
||||
clearInterval(ele.timer)
|
||||
ele.timer = setInterval(function() {
|
||||
//当前左边宽度
|
||||
var current = ele.offsetLeft;
|
||||
//步长
|
||||
var step = 10;
|
||||
//确认方向
|
||||
step = target - current >= 0 ? step : -step;
|
||||
console.log('step',step)
|
||||
console.log('target',target - current)
|
||||
//动画完后左边宽度
|
||||
current += step;
|
||||
if(Math.abs(target - current) > Math.abs(step)) {
|
||||
//当左边需要移动的宽度大于移动的步长
|
||||
//直接移动
|
||||
ele.style.left = current + 'px'
|
||||
} else {
|
||||
//小于移动的步长
|
||||
//清除计时器
|
||||
clearInterval(ele.timer)
|
||||
//直接设置为终点
|
||||
ele.style.left = target + 'px';
|
||||
}
|
||||
},10)
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user