十运动案例
一 运动
1.首页让元素动起来,通过定时器
2.元素动起来,需要一个speed,通过速度不断调整
3.让元素停下来的条件
4.停止的条件要大于初始值
运动的原理:通过定时器不更改css 属性1.
<div class="box"></div>
<span class='line'></span>
<script>
var oBox = document.querySelector('.box');
var speed = 10;
var timer = null;
timer = setInterval(() => {
//不断获取元素距左侧的位置
oBox.style.left = oBox.offsetLeft + speed +'px';
//判断条件,关闭定时器
if(oBox.offsetLeft >= 500){
clearInterval(timer);
}
console.log(oBox.offsetLeft);
},30)
</script>
1.匀速运动
<div class="box"></div>
<span class='line'></span>
<script>
/*
匀速运动的逻辑:
1.先清除定时器(防止连续触发越来越快)
2.在开启定时器(不断调整位置)
3.判断运动终止条件
4.把运动的代码防止else里面(防止停止之后再次触发在发生移动)
*/
var oBox = document.querySelector('.box');
var speed = 10;
//目的点击之前,为了清除定时器
var timer = null;
document.onclick = function(){
// 4：连续触发运动越来越快： 每次开启定时器之前 先清除一边
// clearInterval(timer);
timer = setInterval(() => {
//判断条件,关闭定时器
if(oBox.offsetLeft >= 1000){
clearInterval(timer);
}else{
// 3：停止之后再次触发会移动:把运动的代码放在else里面
//不断获取元素距左侧的位置(元素距离左侧的距离 = 距离左侧的距离 + 速度)
oBox.style.left = oBox.offsetLeft + speed +'px';
}
console.log(oBox.offsetLeft);
},30)
}
//鼠标滑过改变透明度
var oBox =document.querySelector('.box');
var speed = 10;
var timer = null;
oBox.onmouseover = function(){
//清除定时器
clearInterval(timer);
timer = setInterval(() => {
//实时获取透明度(获取非行间样式)
var iCur = getStyle(oBox,'opacity')*100;
if(iCur >= 100){
clearInterval(timer);
}else{
//设置运动(添加非行间样式)
oBox.style.opacity = (iCur + speed)/100;
oBox.style.filter = 'alpha(opacity='+ (iCur + speed) +')';
}
},300)
}
//封装获取非行间样式
function getStyle(ele,attr){
return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,null)[attr];
}
</script>
2.缓冲运动
<!--
缓冲运动:
距离越近,速度越小
匀速运动：
1:让运动停止： 关闭定时器
2:停止条件 大于等于目标值
3：停止之后再次触发会移动 ： 把运动的代码放在else里面
4：连续触发运动越来越快 ： 每次开启定时器之前 先清除一边
缓冲运动的逻辑:
1.先清除定时器(防止连续触发越来越快)
2.在开启定时器(不断调整位置)
增加:设置缓冲速度(目标值 - 初始值) /系数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
Math.ceil() 向上取整 Math.floor() 向下取整
3.判断运动终止条件
4.把运动的代码防止else里面(防止停止之后再次触发在发生移动)
-->
<!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;
}
.box{
width:100px;
height:100px;
background:orange;
position:absolute;
left:1000px;
}
.line{
width:1px;
height:500px;
background:blue;
position:absolute;
top:0;
left:500px;
}
</style>
</head>
<body>
<div class="box"></div>
<span class='line'></span>
<script>
var oBox = document.querySelector('.box');
var timer = null;
document.onclick = function(){
//清除定时器(防止点击越多速度越快)
clearInterval(timer)
//开启定时器
timer = setInterval(() => {
//确定速度(目标值 - 初始值)/系数(Math.ceil 向上取整)
//速度不断减小,因为距离不断扩大
var speed = (500 - oBox.offsetLeft)/8;
//对速度进行处理
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//设置判断条件
if(oBox.offsetLeft == 500){
//当满足条件时,停止定时器
clearInterval(timer);
}else{
//运动(元素距离左侧的距离 = 元素距离左侧的距离 + 速度)
oBox.style.left = oBox.offsetLeft + speed +"px";
}
console.log(speed);
},30)
}
</script>
</body>
</html>
3.缓冲运动案例(元素始终在视口中间)
<div class="box"></div>
<script>
var timer = null;
let oBox = document.querySelector('.box');
//获取当前视口的高度
let vH = document.documentElement.clientHeight;
//让元素在视口居中
oBox.style.top = vH/2 - oBox.offsetHeight / 2 +"px";
window.onscroll = function(){
//获取滚动条的高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//元素始终在视口居中(视口高度的一半 - 元素高度的一半 + 滚动条的高度)
// oBox.style.top = vH/2 - oBox.offsetHeight / 2 + scrollTop +"px";
//调用缓冲运动函数
//目标值(即元素始终在视口居中)(视口高度的一半 - 元素高度的一半 + 滚动条的高度)
//目标值:vH / 2 - oBox.offsetHeight / 2 + scrollTop
cushionmove(oBox,vH/2 - oBox.offsetHeight + scrollTop);
console.log(scrollTop);
}
//封装缓冲运动
function cushionmove(ele,iTarget){
clearInterval(timer);
timer = setInterval(() =>{
//设置速度(iTarget为目标值)(Math.round 解决抖动问题)
var speed = Math.round((iTarget - ele.offsetTop) / 8);
//对速度进行处理
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//条件判断,当高度等于目标值时,清除定时器
if(ele.offsetTop == iTarget || speed == 0){
clearInterval(timer);
}else{
//运动代码:(元素距顶端的距离 = 元素距顶端的距离+ 运算速度)
ele.style.top = ele.offsetTop + speed + 'px';
}
console.log(speed);
},30)
}
//抖动解决方法:给速度进行四舍五入
</script>
4.多物体运动
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<script>
/*
多物体运动:
运动元素不确定
运动目标不确定
运动的属性不确定
ele:运动元素
attr:运动属性
iTarget:运动目标
*/
/*
多物体运动的逻辑:
增加:添加运动元素自己的定时器 ele.timer
1.清除定时器(防止点击次数越多速度运动)
2.开启定时器
3.获取运动元素的属性值
增加:判断是否获取元素的透明度属性
iCur = attr == 'opacity' ? iCur*100 : parseInt(iCur);
4.设置缓冲速度(目标值 - 初始值) / 8
5.对缓冲速度进行限定
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
6.对运动终止条件进行判断(目标值 = 初始值)(清除定时器)
7.将运动的代码放到else里面()
增加:判断是否是获取透明度属性
if(attr == 'opacity'){
//如果是透明属性,则不断改变属性值
ele.style.opacity = (iCur + speed) / 100;
ele.style.filter = 'alpha(opacity ='+ (iCur + speed) +')';
}else{
ele.style[attr] = iCur + speed + 'px';
}
遗留问题:
1.抢定时器:给每个运动物体添加定时器
2.如果动态更改透明度
*/
var aDiv = document.querySelectorAll('div');
//初始化定时器
var timer = null;
//封装方法
function moreMove(ele,attr,iTarget){
//清除定时器(防止点击越多速度越快)
//ele.timer 对象的私有属性
clearInterval(ele.timer);
//开启定时器
ele.timer = setInterval(function(){
//获取运动元素的css属性值(获取是字符串)
var iCur = getStyle(ele,attr);
//判断是否获取透明属性
iCur = attr == 'opacity' ? iCur*100 : parseInt(iCur);
//设置缓冲速度(目标值 - 初始值) /系数
var speed = (iTarget - iCur) / 8;
//对速度进行限定
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//对运动终止条件进行限定(目标值 = 初始值)
if(iCur == iTarget){
clearInterval(ele.timer);
}else{
//运动的代码
//判断是否是透明属性
if(attr == 'opacity'){
//如果是透明属性,则不断改变属性值
ele.style.opacity = (iCur + speed) / 100;
ele.style.filter = 'alpha(opacity ='+ (iCur + speed) +')';
}else{
ele.style[attr] = iCur + speed + 'px';
}
}
console.log(speed);
},30)
}
//封装获取非行间样式
function getStyle(ele,attr){
return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,null)[attr];
}
//绑定事件
aDiv[0].onmouseover = function(){
//传入参数
moreMove(this,'width',600);
}
aDiv[1].onmouseover = function(){
//传入参数
moreMove(this,'height',300);
}
aDiv[2].onmouseover = function(){
//传入参数
moreMove(this,'opacity',40);
}
</script>
</body>
5.链式运动
<!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:100px;
width:100px;
background:orange;
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<script>
/*
多物体运动:
运动元素不确定
运动目标不确定
运动的属性不确定
ele:运动元素
attr:运动属性
iTarget:运动目标
fn: 回调函数 记录是否还需要运动代码
*/
/*
链式运动:先执行一种运动,在执行一种运动
链式运动的逻辑:
1.添加运动元素自己的定时器 ele.timer
2.清除定时器(防止点击次数越多速度运动)
3.开启定时器
4.获取运动元素的属性值
5.增加:判断是否获取元素的透明度属性
iCur = attr == 'opacity' ? iCur*100 : parseInt(iCur);
6..设置缓冲速度(目标值 - 初始值) / 8
7.对缓冲速度进行限定
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
8.对运动终止条件进行判断(目标值 = 初始值)(清除定时器)
增加:链式运动增加步骤 关闭定时器运动完毕，完毕之后检测是否还有要运行的代码
9.将运动的代码放到else里面()
增加:判断是否是获取透明度属性
if(attr == 'opacity'){
//如果是透明属性,则不断改变属性值
ele.style.opacity = (iCur + speed) / 100;
ele.style.filter = 'alpha(opacity ='+ (iCur + speed) +')';
}else{
ele.style[attr] = iCur + speed + 'px';
}
*/
var timer = null;
function chainMove(ele,attr,iTarget,fn){
//清除定时器 ele.timer(防止抢定时器)
clearInterval(ele.timer);
//开启定时器
ele.timer = setInterval(() =>{
//获取运动元素属性值(即初始值)
var iCur = getStyle(ele,attr);
//判断是否获取元素的透明度属性
iCur = attr == 'opacity' ? iCur*100 : parseInt(iCur);
//设置缓冲速度(目标值 - 初始值) / 系数
var speed = (iTarget - iCur) / 8;
//对速度进行限制
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//对运动终止条件进行判断(初始值 = 目标值)
if( iCur == iTarget){
//清除定时器
clearInterval(ele.timer);
//清除之后,判断是否还有其他的运动需要执行
// if(fn){
// fn()
// }
//可简写成
if(fn) fn();
}else{
//判断是否改变运动元素的透明度属性
if( attr == 'opacity'){
//获取透明度值
ele.style.opacity = (iCur + speed) / 100;
//filter = 'alpha(opacity=value)' 变量要用引号引起来
ele.style.filter = 'alpha(opacity='+ (iCur + speed) +')';
}else{
//改变运动元素的其他属性
ele.style[attr] = iCur + speed + 'px';
}
}
},30)
}
//封装获取非行间样式
function getStyle(ele,arrt){
return ele.currentSyle ? ele.currentStyle[arrt] : getComputedStyle(ele,null)[arrt];
}
//获取元素
var aDiv = document.querySelectorAll('div');
//绑定事件
aDiv[0].onmouseover = function(){
chainMove(this,'width',600,() =>{
//箭头函数this 指向离他最近得作用域
// chainMove(this,'height',300);
this.style.background ='red';
})
}
aDiv[1].onmouseover = function(){
chainMove(this,'width',600,function(){
chainMove(aDiv[1],'height',300);
//注意这时不能使用this
// aDiv[1].style.background ='red';
})
}
</script>
</body>
</html>
6.链式运动案例
<!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;
}
section{
height:50px;
width:50px;
/* background:orange; */
position:absolute;
right:0;bottom:20px;
overflow:hidden;
}
.box{
height:50px;
width:350px;
background:#000;
position:absolute;
bottom:0;
z-index:3;
}
.wrap{
height:400px;
width:350px;
background:pink;
position:absolute;
top:0;
}
.filter{
height:50px;
width:350px;
background:red;
position:absolute;
font-size:30px;
line-height:50px;
text-align:center;
color:#fff;
z-index:5;
}
</style>
</head>
<body>
<section>
<div class="box">
<span class="filter">文本</span>
<span class="wrap"></span>
</div>
</section>
<script>
/*
多物体运动:
运动元素不确定
运动目标不确定
运动的属性不确定
ele:运动元素
attr:运动属性
iTarget:运动目标
fn: 回调函数 记录是否还需要运动代码
*/
/*
链式运动:先执行一种运动,在执行一种运动
链式运动的逻辑:
1.添加运动元素自己的定时器 ele.timer
2.清除定时器(防止点击次数越多速度运动)
3.开启定时器
4.获取运动元素的属性值
5.增加:判断是否获取元素的透明度属性
iCur = attr == 'opacity' ? iCur*100 : parseInt(iCur);
6..设置缓冲速度(目标值 - 初始值) / 8
7.对缓冲速度进行限定
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
8.对运动终止条件进行判断(目标值 = 初始值)(清除定时器)
增加:链式运动增加步骤 关闭定时器运动完毕，完毕之后检测是否还有要运行的代码
9.将运动的代码放到else里面()
增加:判断是否是获取透明度属性
if(attr == 'opacity'){
//如果是透明属性,则不断改变属性值
ele.style.opacity = (iCur + speed) / 100;
ele.style.filter = 'alpha(opacity ='+ (iCur + speed) +')';
}else{
ele.style[attr] = iCur + speed + 'px';
}
*/
var timer = null;
function chainMove(ele,attr,iTarget,fn){
//清除定时器 ele.timer(防止抢定时器)
clearInterval(ele.timer);
//开启定时器
ele.timer = setInterval(() =>{
//获取运动元素属性值(即初始值)
var iCur = getStyle(ele,attr);
//判断是否获取元素的透明度属性
iCur = attr == 'opacity' ? iCur*100 : parseInt(iCur);
//设置缓冲速度(目标值 - 初始值) / 系数
var speed = (iTarget - iCur) / 8;
//对速度进行限制
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//对运动终止条件进行判断(初始值 = 目标值)
if( iCur == iTarget){
//清除定时器
clearInterval(ele.timer);
//清除之后,判断是否还有其他的运动需要执行
// if(fn){
// fn()
// }
//可简写成
if(fn) fn();
}else{
//判断是否改变运动元素的透明度属性
if( attr == 'opacity'){
//获取透明度值
ele.style.opacity = (iCur + speed) / 100;
//filter = 'alpha(opacity=value)' 变量要用引号引起来
ele.style.filter = 'alpha(opacity='+ (iCur + speed) +')';
}else{
//改变运动元素的其他属性
ele.style[attr] = iCur + speed + 'px';
}
}
},30)
}
//封装获取非行间样式
function getStyle(ele,arrt){
return ele.currentSyle ? ele.currentStyle[arrt] : getComputedStyle(ele,null)[arrt];
}
//获取元素
var
oS = document.querySelector('section'),
oBox = document.querySelector('.box'),
oWrap = document.querySelector('.wrap');
//当鼠标滑过父元素是
oS.onmouseover = function(){
chainMove(this,'width',350,() =>{
oS.style.height = '450px';
chainMove(oWrap,'top',-400);
})
}
oS.onmouseout = function(){
chainMove(oWrap,'top',0,()=>{
oS.style.height = '50px';
chainMove(oS,'width',50);
})
}
</script>
7.完美运动框架
<!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: 100px;
width: 100px;
background: orange;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<script>
/*
多物体运动:
运动元素不确定
运动目标不确定
运动的属性不确定
ele:运动元素
attr:运动属性
iTarget:运动目标
fn: 回调函数 记录是否还需要运动代码
*/
/*
完美运动:某个元素的多个属性进行运动
ele{
height:400px;
width:300px;
font-size:30px
}
这时传入的就不是一个具体的属性了,而是一个由多个属性组成的对象了
完美运动的逻辑:
1.添加运动元素自己的定时器 ele.timer
2.清除定时器(防止点击次数越多速度运动)
3.开启定时器
增加:开关门口令
4.循环遍历,获取运动元素的属性值
5.增加:判断是否获取元素的透明度属性
iCur = attr == 'opacity' ? iCur*100 : parseInt(iCur);
6..设置缓冲速度(目标值 - 初始值) / 8
7.对缓冲速度进行限定
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
8.
if (iCur != json[attr]) {
flag = false;
}
9.将运动的代码放到else里面()
增加:判断是否是获取透明度属性
if(attr == 'opacity'){
//如果是透明属性,则不断改变属性值
ele.style.opacity = (iCur + speed) / 100;
ele.style.filter = 'alpha(opacity ='+ (iCur + speed) +')';
}else{
ele.style[attr] = iCur + speed + 'px';
10.当元素的属性运动完毕之后,进行关门(清除定时器),执行后续代码
*/
/*
参数:
ele:运动的元素
json:元素需要运动的属性{width:目标值,height:目标值}
*/
var timer = null;
function move(ele, json, fn) {
//清除定时器
clearInterval(ele.timer);
//开启定时器
ele.timer = setInterval(() => {
//开关门思想(防止多个属性同时运动时,一个属性运动完,定时器被关闭,另一个属性没有运动完)(开关门写在定时器里面)
let flag = true;
//获取运动元素的属性值
//遍历对象:获取元素的attr值
//attr 是对象中的属性
//注:循环遍历 要在包含整个运动 let 就是声明
for (let attr in json) {
//获取运动元素的属性值(初始值)
let iCur = getStyle(ele, attr);
//判断是否需要获取元素的透明度
iCur = attr == 'opacity' ? iCur * 100 : parseInt(iCur);
//设置缓冲速度(目标值 - 初始值) /系数
//json[属性] 就是目标值
var speed = (json[attr] - iCur) / 8;
//对速度进行限定
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//判断运动终止条件
//当高度为101时,(两个属性同时运动,其中一个运动完毕,定时器就会关闭,另一个运动即使没有运动完,也会停止)
// if (iCur == json[attr]) {
// clearInterval(ele.timer);
// //判断是否还有执行的代码(延长业务逻辑)
// if (fn) fn();
// } else {
//开关门(当初始值 不等于 目标值时,flag = false),则会不断执行循环,当初始值 = 目标值时,flag = true,则清除定时器,执行后续代码
if (iCur != json[attr]) {
flag = false;
}
//判断是否获取元素透明度
if (attr == 'opacity') {
ele.style.opacity = (iCur + speed) / 100;
ele.style.filter = 'alpha(opacity=' + (iCur + speed) + ')';
} else {
//如果不是获取透明度
ele.style[attr] = iCur + speed + 'px';
}
// }
}
if (flag) {
clearInterval(ele.timer);
if(fn)fn();
}
}, 30)
}
//封装获取非行间样式
function getStyle(ele, attr) {
return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele, null)[attr];
}
//事件绑定
var aDiv = document.querySelectorAll('div');
aDiv[0].onmouseover = function () {
move(this, { 'width': 500, 'height': 101 }, () => {
console.log(1);
})
}
</script>
</body>
</html>
二 轮播图
1.图片跟随效果
<img src="./imges/1.gif" alt="">
<script src="./move.js"></script>
<script>
var oImg = document.querySelector('img');
document.onclick = function(e){
e = e || window.event;
var
l = e.clientX,
t = e.clientY;
oImg.src = './imges/2.gif';
move(oImg,{'left':l,'top':t},() =>{
oImg.src = './imges/1.gif';
})
}
</script>
2轮播图基本版
<!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;
}
section{
height:350px;
width:1000px;
background:orange;
margin:30px auto;
position:relative;
}
section span{
display:block;
height:50px;
width:50px;
border-radius: 50%;
background:rgba(200,0,0,0.8);//透明度
position:absolute;
top:150px;
font-size:30px;
line-height:50px;
text-align:center;
font-weight:bold;
color:#fff;
z-index:1;
cursor: pointer;//鼠标变成小手
}
section span:nth-of-type(1){
left:20px;
}
section span:nth-of-type(2){
right:20px;
}
.imgBox{
height:350px;
position:absolute;
}
.imgBox img{
height:350px;
width:1000px;
float:left;
}
</style>
</head>
<body>
<section>
<div class="imgBox">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
</div>
<span><</span>
<span>></span>
<script src="./move.js"></script>
<script src="../../myAPi/myApi.js/myAPI.js"></script>
<script>
//获取元素
let
oImgBox = document.querySelector('.imgBox'),
aImg = oImgBox.getElementsByTagName('img'),
distance = aImg[0].offsetWidth,
aBtn = document.getElementsByTagName('span'),
count = 0;
//动态设置 oImgBox的宽度
oImgBox.style.width = aImg.length * distance + 'px';
//图片移动
function toImg(){
move(oImgBox,{'left':-distance * count})
}
//下一张
function next(){
//判断count
if(count >= aImg.length-1){
count = 0;
}else{
count++;
}
toImg();
}
//上一张
function pre(){
//判断count
if(count <= 0){
count = aImg.length - 1;
}else{
count--;
}
toImg();
}
//事件绑定
addEventListener(aBtn[1],'click',next);
addEventListener(aBtn[0],'click',pre);
</script>
</section>
</body>
</html>
3.轮播图带定时器
<!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;
}
section{
height:350px;
width:1000px;
background:orange;
margin:30px auto;
position:relative;
}
section span{
display:block;
height:50px;
width:50px;
border-radius: 50%;
background:rgba(200,0,0,0.8);
position:absolute;
top:150px;
font-size:30px;
line-height:50px;
text-align:center;
font-weight:bold;
color:#fff;
z-index:1;
cursor: pointer;
}
section span:nth-of-type(1){
left:20px;
}
section span:nth-of-type(2){
right:20px;
}
.imgBox{
height:350px;
position:absolute;
}
.imgBox img{
height:350px;
width:1000px;
float:left;
}
</style>
</head>
<body>
<section>
<div class="imgBox">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
</div>
<span><</span>
<span>></span>
</section>
<script src="./move.js"></script>
<script>
let
oImgBox = document.querySelector('.imgBox'),
aImg = document.querySelectorAll('img'),
oS = document.querySelector('section'),
aBtn = document.querySelectorAll('span'),
distance = aImg[0].offsetWidth;//获取每一次移动的距离
count = 0, //计数器,控制盒子移动的距离
timer = null;
//动态获取imgbox 的宽(图片的宽 * 图片的数量)
oImgBox.style.width = aImg.length * distance + 'px';
//图片移动的距离
function toImg(){
move(oImgBox,{'left': -distance*count});
}
//下一张图片的移动
function next(){
//判断当前这一张是不是最后一张
if(count >= aImg.length - 1){
count = 0;
}else{
count++;
}
toImg();
}
//上一张图片的移动
function pre(){
//判断当前这张图片是不是第一张
if(count <= 0){
count = aImg.length - 1;
}else{
count--;
}
toImg();
}
//定时器播放
function autoplay(){
timer = setInterval(()=>{
next();
},3000)
console.log('播放');
}
//开启定时器
autoplay();
//清除定时器
function clearTime(){
clearInterval(timer);
console.log('暂停')
}
//封装事件监听
function addEventListener(ele,eventType,fn){
return ele.addEventListener ? ele.addEventListener(eventType,fn) : ele.attchEvent('on' + eventType,fn);
}
//事件绑定
addEventListener(aBtn[1],'click',next);
addEventListener(aBtn[0],'click',pre);
//当鼠标滑过,让图片停止,鼠标离开,图片继续移动
addEventListener(oS,'mouseover',clearTime);
addEventListener(oS,'mouseout',autoplay);
</script>
4.轮播图淡入淡出
<!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;
}
section{
height:350px;
width:1000px;
background:orange;
margin:30px auto;
position:relative;
}
section span{
display:block;
height:50px;
width:50px;
border-radius: 50%;
background:rgba(200,0,0,0.8);
position:absolute;
top:150px;
font-size:30px;
line-height:50px;
text-align:center;
font-weight:bold;
color:#fff;
z-index:1;
cursor: pointer;
}
section span:nth-of-type(1){
left:20px;
}
section span:nth-of-type(2){
right:20px;
}
.imgBox{
height:350px;
position:absolute;
}
.imgBox img{
height:350px;
width:1000px;
position:absolute;
opacity:0;
filter:alpha(opacity=0);
}
</style>
</head>
<body>
<section>
<div class="imgBox">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
</div>
<span><</span>
<span>></span>
</section>
<script src="./move.js"></script>
<script>
let
oImgBox = document.querySelector('.imgBox'),
aImg = document.querySelectorAll('img'),
oS = document.querySelector('section'),
aBtn = document.querySelectorAll('span'),
distance = aImg[0].offsetWidth;//获取每一次移动的距离
count = 0, //计数器,控制盒子移动的距离
timer = null;
//初始状态第一张为不透明
aImg[0].style.opacity = 1;
aImg[0].style.filter = 'alpha(opacity=100)';
//控制透明度
function toImg(){
//先让所有图片的透明度为0
for(let i = 0 ,k = aImg.length; i < k; i++){
aImg[i].style.opacity = 0;
}
//在将当前的图片透明度改成1(注:要传100)
move(aImg[count],{'opacity':100});
}
//下一张图片的移动
function next(){
//判断当前这一张是不是最后一张
if(count >= aImg.length - 1){
count = 0;
}else{
count++;
}
toImg();
}
//上一张图片的移动
function pre(){
//判断当前这张图片是不是第一张
if(count <= 0){
count = aImg.length - 1;
}else{
count--;
}
toImg();
}
//定时器播放
function autoplay(){
timer = setInterval(()=>{
next();
},3000)
console.log('播放');
}
//开启定时器
autoplay();
//清除定时器
function clearTime(){
clearInterval(timer);
console.log('暂停')
}
//封装事件监听
function addEventListener(ele,eventType,fn){
return ele.addEventListener ? ele.addEventListener(eventType,fn) : ele.attchEvent('on' + eventType,fn);
}
//事件绑定
addEventListener(aBtn[1],'click',next);
addEventListener(aBtn[0],'click',pre);
//当鼠标滑过,让图片停止,鼠标离开,图片继续移动
addEventListener(oS,'mouseover',clearTime);
addEventListener(oS,'mouseout',autoplay);
</script>
</body>
</html>
5.轮播图带圆点
<!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,li,ol{
list-style: none;
}
section{
height:350px;
width:1000px;
background:orange;
margin:30px auto;
position:relative;
}
section span{
display:block;
height:50px;
width:50px;
border-radius: 50%;
background:rgba(200,0,0,0.8);
position:absolute;
top:150px;
font-size:30px;
line-height:50px;
text-align:center;
font-weight:bold;
color:#fff;
z-index:1;
cursor: pointer;
}
section span:nth-of-type(1){
left:20px;
}
section span:nth-of-type(2){
right:20px;
}
.imgBox{
height:350px;
position:absolute;
}
.imgBox img{
height:350px;
width:1000px;
float:left;
}
.circleBox{
height:20px;
width:1000px;
/* background:orange; */
position:absolute;
bottom:10px;
z-index:2;
display:flex;
justify-content: center;
}
.circleBox li{
height:20px;
width:20px;
border-radius:50%;
background:#fff;
margin:0 5px;
cursor: pointer;
}
.circleBox .active{
background:blue;
}
</style>
</head>
<body>
<section>
<div class="imgBox">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
</div>
<span><</span>
<span>></span>
<ol class ='circleBox'>
<!-- <li></li>
<li></li> -->
</ol>
</section>
<script src="./move.js"></script>
<!-- <script src="../../myAPi/myApi.js/myAPI.js"></script> -->
<script>
/*
轮播图逻辑:
1.获取元素
2.动态获取imgBox的宽
3.根据图片的数量,利用循环遍历添加圆点的数量,并将新创建的元素(createLi)添加到oCircleBox 里面
4.获取新创建的元素(aCir),并给第一个添加蓝色背景
5.图片的移动(利用运动)
6.利用计时器不断调整oImgBox的距离,并同时调整圆点的背景(跳着之前记得清除圆点属性)
7.当点击圆点时,圆点背景变化,并且图片也在动
*/
let
oImgBox = document.querySelector('.imgBox'),
aImg = document.getElementsByTagName('img'),
// aBtn = document.getElementsByTagName('span'),
aBtn = document.querySelectorAll('span'),
oS = document.querySelector('section'),
oCircleBox = document.querySelector('.circleBox'),
//获取图片的宽度
distance = aImg[0].offsetWidth;
count = 0,//计数器:获取图片移动的距离
timer = null;
//动态获取imgBox 的宽
oImgBox.style.width = aImg.length*distance + 'px';
//动态添加圆点(有多少张图片添加多少圆点)
//循环遍历
for(let i = 0, k = aImg.length; i < k ; i++){
//创建新元素(圆点)
var createLi = document.createElement('li');
//将新元素添加到ol中
oCircleBox.appendChild(createLi);
}
//获取新添加的元素
var aCir = oCircleBox.getElementsByTagName('li');
//给第一个元素添加蓝色
aCir[0].className = 'active';
//图片的移动
function toImg(){
move(oImgBox,{'left':-distance*count});
}
//下一张图的移动
function next(){
//判断这张图片是不是最后一张
if(count >= aImg.length-1){
count = 0;
}else{
count++;
}
toImg();
//当图片运动时,圆点也跟着变化
clearActive();
aCir[count].className ='active';
}
//上一张图片的移动
function pre(){
if(count <= 0){
count = aImg.length-1;
}else{
count--;
}
toImg();
//当图片运动时,圆点也跟着变化
clearActive();
aCir[count].className ='active';
}
//设置定时器
function autoplay(){
timer = setInterval(()=>{
next();
},3000)
}
//清除定时器
function clearTime(){
clearInterval(timer);
}
//封装清除类名
function clearActive(){
for(var i = 0, k = aImg.length; i < k;i++){
aCir[i].className = '';
}
}
//封装事件监听
function addEventListener(ele,eventType,fn){
return ele.addEventListener ? ele.addEventListener(eventType,fn) : ele.attchEvent('on' + eventType,fn);
}
//事件绑定
addEventListener(aBtn[1],'click',next);
addEventListener(aBtn[0],'click',pre);
//当鼠标滑过,让图片停止,鼠标离开,图片继续移动
addEventListener(oS,'mouseover',clearTime);
addEventListener(oS,'mouseout',autoplay);
//点击圆点,圆点变蓝,并且图片也跟着移动
for(let i = 0, k = aCir.length; i < k; i++){
addEventListener(aCir[i],'click',()=>{
clearActive();
aCir[i].className = 'active';
count = i ;//点击谁,就把下标给count;
toImg();
})
}
</script>
</body>
</html>
6无缝轮播图(带圆点)
<!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,li,ol{
list-style: none;
}
section{
height:350px;
width:1000px;
background:orange;
margin:30px auto;
position:relative;
overflow:hidden;
}
section span{
display:block;
height:50px;
width:50px;
border-radius: 50%;
background:rgba(200,0,0,0.8);
position:absolute;
top:150px;
font-size:30px;
line-height:50px;
text-align:center;
font-weight:bold;
color:#fff;
z-index:1;
cursor: pointer;
}
section span:nth-of-type(1){
left:20px;
}
section span:nth-of-type(2){
right:20px;
}
.imgBox{
height:350px;
position:absolute;
overflow:hidden;
}
.imgBox img{
height:350px;
width:1000px;
float:left;
}
.circleBox{
width:1000px;
height:20px;
/* background:orange; */
bottom:20px;
position:absolute;
display: flex;
justify-content: center;
}
.circleBox li{
height:20px;
width:20px;
border-radius: 50%;
background:#fff;
margin: 0 5px;
}
.circleBox .active{
background:blue;
}
</style>
</head>
<body>
<section>
<div class="imgBox">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
</div>
<span><</span>
<span>></span>
<ol class="circleBox">
<!-- <li></li>
<li></li> -->
</ol>
<script src="./move.js"></script>
<script src="../../myAPi/myApi.js/myAPI.js"></script>
<script>
//获取元素
let
oImgBox = document.querySelector('.imgBox'),
aImg = oImgBox.getElementsByTagName('img'),
distance = aImg[0].offsetWidth,
aBtn = document.getElementsByTagName('span'),
oCircleBox = document.querySelector('.circleBox'),
oS = document.querySelector('section'),
timer = null;
count = 0;
//在克隆第一张图片
var firstImg = aImg[0].cloneNode();
//将克隆后的图片添加到oImgBox中
oImgBox.appendChild(firstImg);
//动态设置 oImgBox的宽度
oImgBox.style.width = aImg.length * distance + 'px';
//动态创建圆点
for(let i = 0; i < aImg.length-1;i++){
var createLi = document.createElement('li');
//添加到oCircleBox
oCircleBox.appendChild(createLi);
}
//获取新创建的li
var aCir = oCircleBox.getElementsByTagName('li');
//第一个圆点添加蓝色背景
aCir[0].className = 'active';
//图片移动
function toImg(){
move(oImgBox,{'left':-distance * count})
}
//下一张
function next(){
//判断count
if(count >= aImg.length-1){
//当运动到倒数第一张图片时点击下一张,跳到第一张
oImgBox.style.left = 0;
count = 0;
}else{
count++;
}
toImg();
//点击图片,圆点跟着变化
clearActive();
//判断是不是最后一张,如果是最后一张,则count=0
aCir[count >= aImg.length -1 ? 0 : count].className ='active';
}
//上一张
function pre(){
//判断count
if(count <= 0){
//当点击到第一张图片时
oImgBox.style.left = -distance*(aImg.length-1) +'px';
count = aImg.length - 2;
}else{
count--;
}
toImg();
//点击图片,圆点跟着变化
clearActive();
//判断count 是否是第一张
//由于直接就跳到倒数第二张,所有count不需要改变
aCir[count].className = 'active';
}
//添加定时器
function autoplay(){
timer = setInterval(()=>{
next();
},3000)
}
autoplay();
//清除定时器
function clearTime(){
clearInterval(timer);
}
//事件绑定
addEventListener(aBtn[1],'click',next);
addEventListener(aBtn[0],'click',pre);
addEventListener(oS,'mouseover',clearTime);
addEventListener(oS,'mouseout',autoplay);
//封装清除类名
function clearActive(){
for(let i = 0; i < aCir.length; i++){
aCir[i].className = '';
}
}
//事件绑定(鼠标滑过圆点,背景切换)
for(let i = 0 ; i < aCir.length; i++){
addEventListener(aCir[i],'mouseover',()=>{
clearActive();
//添加样式
aCir[i].className ='active';
//当鼠标滑过圆点,图片也跟着变化
count = i;
toImg();
})
}
</script>
</section>
</body>
</html>
三 案例(放大镜,抛物线,瀑布流)
1.放大镜
<!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;
}
img {
display: block;
}
.showBox {
height: 530px;
width: 430px;
background: orange;
margin: 50px 0 0 200px;
}
.productImg {
height: 430px;
width: 430px;
position: relative;
}
.smallImg {
height: 100%;
width: 100%;
}
.bigBox {
height: 600px;
width: 600px;
background: #ccc;
position: absolute;
right: -600px;
top: 0;
overflow: hidden;
display: none;
}
/* 大图的尺寸
遮罩 / bigBox = 小图 / 大图
200 / 600 = 430 / 1290
*/
.bigBox img {
height: 1290px;
width: 1290px;
position: absolute;
display: block;
}
.filter {
height: 200px;
width: 200px;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
/* 下面轮播图 */
.productList {
height: 100px;
width: 430px;
background: pink;
}
.productList span {
display: block;
float: left;
height: 100px;
width: 15px;
background: #000;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 100px;
font-weight: 900;
cursor: pointer;
}
.imgListShow {
height: 100px;
width: 400px;
background: pink;
float: left;
position: relative;
overflow: hidden;
}
.listBox {
height: 100px;
position: absolute;
}
.listBox article {
box-sizing: border-box;
height: 100px;
width: 100px;
border: 3px solid #ccc;
float: left;
cursor: pointer;
}
.listBox article img {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<section class="showBox">
<div class="productImg">
<img src="./img2/1.jpg" alt="" class="smallImg">
<div class="bigBox">
<img src="./img2/1.jpg" alt="">
</div>
<span class="filter"></span>
</div>
<div class="productList">
<span id="pre">
<</span> <div class="imgListShow">
<div class="listBox">
<article><img src="./img2/1.jpg" alt=""></article>
<article><img src="./img2/2.jpg" alt=""></article>
<article><img src="./img2/3.jpg" alt=""></article>
<article><img src="./img2/4.jpg" alt=""></article>
<article><img src="./img2/5.jpg" alt=""></article>
<article><img src="./img2/6.jpg" alt=""></article>
<article><img src="./img2/7.jpg" alt=""></article>
</div>
</div>
<span id="next">></span>
</div>
</section>
<script src="../../myAPi/myApi.js/myAPI.js"></script>
<script src="../../myAPi/myApi.js/move.js"></script>
<script>
/* 放大镜 */
var
oShowBox = $('.showBox')[0],
oProductImg = $('.productImg')[0],
oSmallImg = $('.smallImg')[0],
oBigBox = $('.bigBox')[0],
oFilter = $('.filter')[0],
//图片滚动
oPre = $('#pre'),
oNext = $('#next'),
oListBox = $('.listBox')[0],
aArticle = oListBox.getElementsByTagName('article'),
distance = aArticle[0].offsetWidth,
count = 0;
//事件绑定
oProductImg.onmousemove = function (e) {
e = e || window.event;
var
l = e.clientX - oShowBox.offsetLeft - oFilter.offsetWidth / 2,
t = e.clientY - oShowBox.offsetTop - oFilter.offsetHeight / 2;
//对运动边界进行限定
l = l < 0 ? 0 : (l > 230 ? 230 : l);
t = t < 0 ? 0 : (t > 230 ? 230 : t);
//遮罩层跟随鼠标运动
oFilter.style.left = l + 'px';
oFilter.style.top = t + 'px';
//大图的移动(大盒子里面的图片)
oBigBox.firstElementChild.style.left = - l * 3 + 'px';
oBigBox.firstElementChild.style.top = - t * 3 + 'px';
}
//
/* 图片滚动 */
//设置oListBox 的宽度
oListBox.style.width = aArticle.length * aArticle[0].offsetWidth + 'px';
//图片的移动
function toImg() {
move(oListBox, { 'left': -distance * count });
}
//下一张
function next() {
if (count >= aArticle.length - 4) {
count = aArticle.length - 4;
oNext.style.background ='#ccc';
} else {
count++;
oPre.style.background ='#000';
clearBorderColor()
aArticle[count].style.borderColor = 'red';
}
toImg();
}
//上一张
function pre() {
if (count <= 0) {
count = 0;
oPre.style.background ='#ccc';
} else {
count--;
oNext.style.background ='#000';
clearBorderColor()
aArticle[count].style.borderColor = 'red';
}
toImg();
}
//事件绑定
addEventListener(oPre, 'click', pre);
addEventListener(oNext, 'click', next);
//鼠标滑过时切换图片
for (var i = 0; i < aArticle.length; i++) {
//当鼠标滑过小图,把小图地址给大图
aArticle[i].onmouseover = function () {
// clearBorderColor();
// this.style.borderColor = 'red';
oSmallImg.src = this.firstElementChild.src;
oBigBox.firstElementChild.src = this.firstElementChild.src;
}
}
function clearBorderColor(){
for(let i = 0; i < aArticle.length; i++){
aArticle[i].style.borderColor = '#fff';
}
}
//当鼠标移入时, 遮罩层 和 bigBox 的display 显示
oProductImg.onmouseover = function () {
oFilter.style.display = 'block';
oBigBox.style.display = 'block';
}
//当鼠标移出时, 遮罩层 和 bigBox 的display 显示
oProductImg.onmouseout = function () {
oFilter.style.display = 'none';
oBigBox.style.display = 'none';
}
</script>
</body>
</html>
2.抛物线
<!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;
}
.shopCar{
height:40px;
width:100px;
background:red;
position:absolute;
top:200px;
right:0;
}
span{
height:10px;
width:10px;
border-radius:50%;
background:blue;
position:absolute;
}
</style>
</head>
<body>
<div class="shopCar"></div>
<script>
//获取视口的宽度
var vW = document.documentElement.clientWidth - 100;
console.log(vW);
//点击事件
document.onclick = function(e){
e = e || window.event;
var
l = e.clientX,
t = e.clientY;
//创建新元素
var createSpan = document.createElement('span');
//给新元素添加 left 和top
createSpan.style.left = l + 'px';
createSpan.style.top = t +'px';
//将新元素添加到body里面
document.body.appendChild(createSpan);
//给span绑定抛物线运动
//y = a*x*x + b * x;
//设置span的虚拟坐标(x,y)
var
x = - (vW - l),
y = - (t - 200),
b = (y - (-0.001*Math.pow(x,2))) / x;
//开启定时器
createSpan.timer = setInterval(()=>{
//抛物线变化的坐标
x += 20;
y = -0.001 * Math.pow(x,2) + b * x;
//真实的坐标
createSpan.style.left = (vW + x) + 'px';
createSpan.style.top = (200 - y) +'px';
//当x>0时,关闭定时器
if(x > 0){
clearInterval(createSpan.timer);
}
},30)
}
</script>
</body>
</html>
3.瀑布流
<!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;
box-sizing: border-box;
}
section {
width: 1200px;
margin: 0 auto;
}
div {
width: 240px;
border: 3px solid pink;
}
div img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<section class="box">
<!-- <div>
<img src="./img1/1.jpg" alt="">
</div> -->
</section>
<script>
/*
逻辑:
1.先动态创建div(循环遍历+字符串模板)
2.获取div
div 是个集合
获取之前,要先创建完(window.onload)
3.获取之后添加属性(循环遍历)
判断条件(是不是前五个)
前五个添加float:left;并将五张图片的高度添加到一个数组里面
else
后面的元素添加定位属性(添加在高度最小的图片下)
4.判断定位元素的left 和 top 值
需要对上五张图片高度进行对比(循环遍历)
获取最小值(最小高度)(即定位图片的top)
同时记录这张图片的下标值(index)(及第几张图片)并获取这张图片的offsetLeft 值 = 定位图片的left 值
*/
var oBox = document.querySelector('section');
var heightArr = []; //声明一个空数组,用来存储元素的高度
//动态创建图片元素(i值是跟图片相对应的)
for (var i = 1; i <= 50; i++) {
oBox.innerHTML += `
<div>
<img src="./img1/${i}.jpg" alt="">
</div>
`
//等所有资源加载完之后,在执行下面的程序
window.onload = function () {
//获取div 属性
aDiv = document.querySelectorAll('div');
//确定多少列 5
var colsNum = parseInt(oBox.offsetWidth / aDiv[0].offsetWidth);
//循环遍历,添加属性
for (var i = 0; i < aDiv.length; i++) {
//第一排添加float
if (i < colsNum) {
aDiv[i].style.float = 'left';
//将第一排元素的高度放到数组里面
heightArr.push(aDiv[i].offsetHeight);
// console.log(heightArr);
} else {
//第二排添加定位属性
aDiv[i].style.position = 'absolute';
//定位的left 和 top 值
//获取数组中的最小值
var getMin = heightArr[0]; //假设第一个是数组的最小值
var index = 0;
for (var k = 0; k < colsNum; k++) {
if (getMin > heightArr[k]) {
getMin = heightArr[k];
//记录最小值的下标
index = k;
}
}
console.log(index);
//获取定位元素的top 和 left
//定位元素的top值为数组中最小值
aDiv[i].style.top = getMin + 'px';
//定位元素的left值 为数组最小值的下标 * 元素的宽
// aDiv[i].style.left = (index * aDiv[0].offsetWidth + aDiv[0].offsetLeft) +'px';
//定位元素的left值 为数组中最下值的 元素 的offsetLeft
aDiv[i].style.left = aDiv[index].offsetLeft + 'px';
//每次定位完要重新修改数组的值
//数组中的最小值 = 最小值 + 定位元素的高 = (新数组的值)
//在对新数组进行比较
heightArr[index] = getMin + aDiv[i].offsetHeight;
}
console.log(heightArr);
}
}
}
</script>
</body>
