16、运动框架
//for in : 遍历对象 循环变量代表key
//for of : 遍历集合set map 循环变量代表value
// var obj = {a : 1,b : 2,c : 3,d : 4};
// for(var i in obj){
// console.log(i);
// }
var arr = ['a','b','c','d'];
for(var i in arr){
console.log(i); //i是下标
}
for(var a of arr){
console.log(a); //a是内容
}
一.运动框架
1. 获取非行内样式
2. 运动框架
1> 清除上一次的计时器
2> 开启新的计时器
1>设置开关
2>遍历json
1>> 获取当前值
2>> 计算速度
3>> 判断属性是否到达目标
4>> 设置运动
3>判断开关,是否退出计时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
opacity: 1;
}
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript" src="js/sport.js" ></script>
<script type="text/javascript">
var oDiv = document.getElementById("box");
oDiv.onmouseenter = function(){
sport(this,{width:300},function(){
sport(oDiv,{height:300},function(){
sport(oDiv,{opacity:30})
});
});
// sport(this,{height:300});
}
oDiv.onmouseleave = function(){
sport(this,{opacity:100},function(){
sport(oDiv,{height:100},function(){
sport(oDiv,{width:100});
})
})
}
</script>
</body>
</html>
sport.js
//sport('oDiv',{width : 300,height: 300,opacity : 0.3})
function sport(obj,json,fn){
//1.先清除上一次的计时器
clearInterval(obj.timer);
//2.开启新的计时器
obj.timer = setInterval(function(){
//假设一个变量为true,代表所有的属性都已经到达目标
var stop = true;
//遍历json对象，取出所有的属性及目标值
for(var attr in json){
//1.获取当前的值
var cur = 0;
if(attr == 'opacity'){
cur = parseInt(parseFloat(getStyle(obj,attr)) * 100)
}else{
cur = parseInt(getStyle(obj,attr));
}
//2.计算速度
var speed = (json[attr] - cur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.检测停止
if(cur != json[attr]){
stop = false;
}
if(attr == 'opacity'){
//改变透明度
obj.style.opacity = (cur + speed) / 100;
obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')';
}else{
//改变其它属性值
obj.style[attr] = cur + speed + 'px';
}
// console.log(cur,json[attr],speed);
}
if(stop){
clearInterval(obj.timer);
if(typeof fn == 'function'){
fn();
}
}
},30)
}
//获取非行内样式
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
}
二.轮播图
1.先获取页面中所需要的元素
2.给项目中添加相应的事件
1.左右遮罩与左右按钮(移入移出事件)——————按钮显示(隐藏)
2.左右按钮(点击事件) ——————————图片切换(当前下标) ----(zindex)
3.所有的小图(移入移出事件)----透明度变换
4.所有的小图 (点击事件)-----图片切换(改变当前下标)
3.设置轮播(大图轮播---zindex)(小图轮播----ul的left值)
4.自动轮播(计时器)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
body{
background: #CCCCCC;
}
#box{
width: 400px;
margin: 50px auto;
height: 426px;
overflow: hidden;
border: 1px solid yellow;
}
#top{
position: relative;
height: 320px;
}
#top li{
position: absolute;
top: 0;
left: 0;
}
#left{
position: absolute;
width: 200px;
top: 0;
left: 0;
height: 320px;
z-index: 1000;
}
#right{
position: absolute;
width: 200px;
height: 320px;
top: 0;
right: 0;
z-index: 1000;
}
#btn_l{
position: absolute;
background: url(img/btn.gif) no-repeat;
height: 60px;
width: 60px;
left: 10px;
top: 130px;
z-index: 1001;
opacity: 0;
filter: alpha(opacity=0);
}
#btn_r{
position: absolute;
background: url(img/btn.gif) no-repeat 0 -60px;
height: 60px;
width: 60px;
right: 10px;
top: 130px;
z-index: 1001;
opacity: 0;
filter: alpha(opacity=0);
}
#bottom{
position: relative;
}
#small_ul{
position: absolute;
top: 0;
left: 0;
}
#small_ul li{
float: left;
}
#small_ul img{
height: 90px;
width: 120px;
padding: 6px;
}
</style>
<script type="text/javascript" src="js/sport.js" ></script>
<script type="text/javascript">
//
window.onload = function(){
//1.获取页面元素
//获取大盒子
let oBigBox = document.querySelector('#box');
// //获取上半部
// let oTop = document.querySelector('#top');
//获取左遮罩
let oLeftMark = document.querySelector('#left');
//获取右遮罩
let oRightMark = document.querySelector('#right');
//获取左按钮
let oLeftBtn = document.querySelector('#btn_l');
//获取右按钮
let oRightBtn = document.querySelector('#btn_r');
//获取所有的大图
let oBigPics = document.querySelectorAll('#top li');
// //获取底部
// let oBottom = document.querySelector('#bottom');
//获取小图ul
let oSmallUl = document.querySelector('#small_ul');
//获取所有的小图
let oSmallPic = document.querySelectorAll('#bottom li');
//2.设置小图UL的总宽度
oSmallUl.style.width = oSmallPic[0].offsetWidth * oSmallPic.length + 'px';
//3.给左遮罩和左按钮同时添加移入事件，使左按钮显示
oLeftMark.onmouseover = oLeftBtn.onmouseover = function(){
sport(oLeftBtn,{opacity : 100});
}
//4.给左遮罩和左按钮同时添加移出事件，使左按钮隐藏
oLeftMark.onmouseout = oLeftBtn.onmouseout = function(){
sport(oLeftBtn,{opacity:0});
}
//5.给右遮罩和右按钮同时添加移入事件，使右按钮显示
oRightMark.onmouseenter = oRightBtn.onmouseenter = function(){
sport(oRightBtn,{opacity : 100});
}
//6.给右遮罩和右按钮同时添加移出事件，使右按钮隐藏
oRightMark.onmouseleave = oRightBtn.onmouseleave = function(){
sport(oRightBtn,{opacity : 0});
}
//定义一个控制图片轮播的下标
let indexA = 0;
//定义一个改变z-index的变量
let zIndex = 1;
//记录计时器
let timer = null;
slider();
autoPlay();
//7.给左右按钮添加点击事件
oLeftBtn.onclick = function(){
indexA --;
if(indexA == -1){
indexA = oBigPics.length - 1;
}
slider();
}
oRightBtn.onclick = function(){
indexA ++;
if(indexA == oBigPics.length){
indexA = 0;
}
slider();
}
//8.给小图添加事件
for(let i = 0,len = oSmallPic.length;i < len;i ++){
//移入时，透明度100%
oSmallPic[i].onmouseenter = function(){
sport(this,{opacity : 100});
}
//移出时，透明度50%
oSmallPic[i].onmouseleave = function(){
if(indexA != i){
sport(this,{opacity:50});
}
}
//点击时，轮播到当前点击的图片
oSmallPic[i].onclick = function(){
indexA = i;
slider();
}
}
//9.设置轮播
function slider(){
//大图轮播
oBigPics[indexA].style.zIndex = ++ zIndex;
//小图轮播
if(indexA == 0){
sport(oSmallUl,{left : 0});
}else if(indexA == oSmallPic.length - 1){
sport(oSmallUl,{left : -(oSmallPic.length - 3) * oSmallPic[0].offsetWidth});
}else{
sport(oSmallUl,{left : -(indexA - 1) * oSmallPic[0].offsetWidth});
}
//初始化所有小图的透明度
for(let i = 0,len = oSmallPic.length;i < len;i ++){
sport(oSmallPic[i],{opacity:50});
}
sport(oSmallPic[indexA],{opacity:100});
}
//自动轮播
function autoPlay(){
timer = setInterval(function(){
indexA ++;
if(indexA == oBigPics.length){
indexA = 0;
}
slider();
},3000)
}
//给大盒子添加移入移出事件
oBigBox.onmouseenter = function(){
clearInterval(timer);
}
oBigBox.onmouseleave = function(){
autoPlay();
}
}
</script>
</head>
<body>
<div id="box">
<ul id="top">
<div id="left"></div>
<div id="right"></div>
<a href="javascript:;" id="btn_l"></a>
<a href="javascript:;" id="btn_r"></a>
<li style="z-index: 1 ";><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
</ul>
<div id="bottom">
<ul id="small_ul">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
</ul>
</div>
</div>
</body>
</html>
sport.js
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr];
}
//回调函数 ： 将一个函数作为另一个函数的参数时。
function sport(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var stop = true;
for(var attr in json){
var cur = attr == 'opacity' ? parseInt(parseFloat(getStyle(obj,attr)) * 100) : parseInt(getStyle(obj,attr));
var speed = (json[attr] - cur) / 8; //基数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(cur != json[attr]){
stop = false;
}
if(attr == 'opacity'){
obj.style.opacity = (cur + speed) / 100;
obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')';
}else{
obj.style[attr] = cur + speed + 'px';
}
}
if(stop){
clearInterval(obj.timer);
if(typeof fn === 'function'){
fn();
}
}
},30)
}
三.放大镜
1.瀑布流
响应式布局
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
img {
border: 0;
}
div.wrap {
width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
background: #DDD;
}
div.wrap div {
width: 200px;
padding: 4px;
border: 1px solid #000;
float: left;
position: absolute;
}
div.wrap div h3 {
line-height: 35px;
}
div.wrap div img {
width: 200px;
}
</style>
<script>
/*
*
*/
window.onload = function(){
loading('wrap');
}
window.onresize = function(){
loading('wrap');
}
//加载图片
function loading(id,child,space){
//初始化参数
if(!id){
return;
}
child = child || 'div';
space = space || 10;
//获取瀑布流的大盒子
let oBigBox = document.getElementById(id);
//获取所有的子节点
let oChilds = oBigBox.getElementsByTagName(child);
//获取大盒子的宽度
let bigBoxWidth = oBigBox.offsetWidth;
//获取单个子节点的宽度
let childWidth = oChilds[0].offsetWidth;
//alert(childWidth)
//计算列数
let colNum = Math.floor(bigBoxWidth / childWidth);
//alert(colNum);
//计算左右间隙
let padding = Math.floor((bigBoxWidth - childWidth * colNum) / (colNum + 1));
//初始化最一行的位置
var arr = []; //放置所有子节点的坐标值{left:x,top:x}
for(let i = 0;i < colNum;i ++){
arr[i] = new Object();
arr[i].left = padding * (i + 1) + (i * childWidth);
arr[i].top = space;
}
//加载
for(let i = 0,len = oChilds.length;i < len;i ++){
var index = minTop(arr);
oChilds[i].style.position = 'absolute';
oChilds[i].style.left = arr[index].left + 'px';
oChilds[i].style.top = arr[index].top + 'px';
//改变数组中top值
arr[index].top += oChilds[i].offsetHeight + space;
oBigBox.style.height = arr[index].top + 'px';
}
}
//求最小高度列的top值（下标）
function minTop(arr){
var min = arr[0].top; //第一个对象中top值
var index = 0;
for(let i = 0,len = arr.length;i < len;i ++){
if(min > arr[i].top){
min = arr[i].top;
index = i;
}
}
return index;
}
</script>
</head>
2.放大镜
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
/*
* 一。当鼠标移入遮罩时，滑块和大图所在的盒子显示
* 二。当鼠标移出遮罩时，滑块和大图所在的盒子隐藏
* 三。在遮罩上设置鼠标移动事件，做鼠标跟随的效果---边界
* 四。计算滑块在小图上的移动比例
* 五。设置大图的移动距离
*
* 及格率： 及格人数 / 总人数
* 移动比例： 当前滑块的left值 / 当前滑动移动的总范围
*
*/
window.onload = function(){
//获取页面所需元素
const oBigBox = document.getElementById("div1");
//获取小图
const oSmallPic = document.querySelector('.small_pic');
//获取遮罩
const oMark = document.querySelector('.mark');
//获取滑块
const oFloat = document.querySelector('.float_layer');
//获取大图盒子
const oBigPic = document.querySelector('.big_pic');
//获取大图
const oBigImg = document.querySelector('.big_pic img');
//给遮罩添加移入事件，滑块和大图所在的盒子显示
oMark.onmouseenter = function(){
oFloat.style.display = 'block';
oBigPic.style.display = 'block';
}
//给遮罩添加移出事件，滑块和大图所在的盒子隐藏
oMark.onmouseleave = function(){
oFloat.style.display = 'none';
oBigPic.style.display = 'none';
}
//给遮罩添加移动事件，实现滑块跟随并设置边界
oMark.onmousemove = function(evt){
var e = evt || window.event;
let left = e.pageX - oBigBox.offsetLeft - oMark.offsetLeft - oFloat.offsetWidth / 2;
let top = e.pageY - oBigBox.offsetTop - oMark.offsetTop - oFloat.offsetHeight / 2;
//设置边界
if(left <= 0){
left = 0;
}else if(left >= oMark.offsetWidth - oFloat.offsetWidth){
left = oMark.offsetWidth - oFloat.offsetWidth;
}
if(top <= 0){
top = 0;
}else if(top >= oMark.offsetHeight - oFloat.offsetHeight){
top = oMark.offsetHeight - oFloat.offsetHeight;
}
oFloat.style.left = left + 'px';
oFloat.style.top = top + 'px';
//滑块在小图的移动比例
let pX = left / (oMark.offsetWidth - oFloat.offsetWidth);
let pY = top / (oMark.offsetHeight - oFloat.offsetHeight);
//设置大图的坐标值
oBigImg.style.left = - pX * (oBigImg.offsetWidth - oBigPic.offsetWidth) + 'px';
oBigImg.style.top = - pY * (oBigImg.offsetHeight - oBigPic.offsetHeight) + 'px';
}
}
</script>
</head>
<body>
<div id="div1">
<div class="small_pic">
<span class="mark"></span> <!--遮罩层-->
<span class="float_layer"></span>
<img src="img/small.jpg" />
</div>
<div class="big_pic">
<img src="img/big.jpg" />
</div>
</div>
</body>
3.碰撞检测
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="btn" id="btn" value="创建鸟" />
<script type="text/javascript" src="js/create.js" ></script>
<script type="text/javascript">
//获取按钮
let oBtn = document.getElementById("btn");
oBtn.onclick = function(){
new Bird();
}
</script>
</body>
</html>
js:
class Bird{
constructor(){
this.ele = document.createElement('img'); // 创建img
//初始化鸟
this.init();
}
init(){
//设置src属性
this.ele.src = 'img/2.gif';
//将鸟放到body里
document.body.appendChild(this.ele);
//初始化鸟的大小
this.ele.style.width = '200px';
this.ele.style.height = '200px';
//定位
this.ele.style.position = 'absolute';
//设置速度
this.speedX = this.randomInt(5,10);
this.speedY = this.randomInt(5,10);
this.fly(); //调用飞的方法
this.drag(); //调用拖拽的方法
}
//随机数
randomInt(min,max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
//飞
fly(){
setInterval(()=>{
let left = this.ele.offsetLeft + this.speedX;
let top = this.ele.offsetTop + this.speedY;
//设置边界
if(left <= 0){
left = 0;
this.speedX *= -1;
}else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
left = document.documentElement.clientWidth - this.ele.offsetWidth;
this.speedX *= -1;
}
if(top <= 0){
top = 0;
this.speedY *= -1;
}else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
top = document.documentElement.clientHeight - this.ele.offsetHeight;
this.speedY *= -1;
}
this.ele.style.left = left + 'px';
this.ele.style.top = top + 'px';
},30)
}
drag(){
this.ele.onmousedown = (evt)=>{
var e = evt || window.event;
this.disX = e.offsetX;
this.disY = e.offsetY;
document.onmousemove = (evt) =>{
var e = evt || window.event;
let left = e.pageX - this.disX;
let top = e.pageY - this.disY;
//设置边界
if(left <= 0){
left = 0;
}else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
left = document.documentElement.clientWidth - this.ele.offsetWidth;
}
if(top <= 0){
top = 0;
}else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
top = document.documentElement.clientHeight - this.ele.offsetHeight;
}
this.ele.style.left = left + 'px';
this.ele.style.top = top + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
}
document.ondragstart = function(){
return false;
}
}
}
}
