JS-WEB-API-Day6
2019-07-31 本文已影响0人
小可_34e0
scroll系列
图片发布于简书APP
//时时的获取向上卷曲出去的距离的值
//div的滚动事件
my$('dv').onscroll=function(){
console.log(this.scrollTop);
}；
案例：变速动画封装
<body>
<div id="dv"></div>
<input type="button" name="" value="移动到400" id="btn1" >
<input type="button" name="" value="移动到800" id="btn2" >
</body>
<script src="xiec.js"></script>
<script>
my$('btn1').onclick=function(){
animate(my$('dv'),400);
};
my$('btn2').onclick=function(){
animate(my$('dv'),800);
};
//动画函数：
function animate (element,target){
//先清理定时器
clearInterval(element.timeId);//------------->是element.timeId;
element.timeId=setInterval (function(){
//获取当前位置
var current=element.offsetLeft;//数字类型，没有px
//div每次移动多少像素
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
//每次移动后的距离
current+=step;
element.style.left=current+"px";
//判断当期那移动后的位置是否到达目标位置
if(current==target){
//清除定时器
clearInterval(element.timeId);
}
//测试代码
console.log("目标位置："+target+"，当前位置："+current+"，每次移动步数："+step);
},20);
}
</script>
获取元素计算后的样式属性值
<style >
*{
padding: 0%;
margin:0%;
}
div{
width:200px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background-color: pink;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" name="" value="显示效果" id="btn">
</body>
<script src="xiec.js"></script>
<script>
my$('btn').onclick=function(){
//获取元素距离左边位置的距离
console.log(my$('dv').offsetLeft);
//谷歌，火狐支持
//console.log(window.getComputedStyle(my$('dv'),null).left);
//console.log(window.getComputedStyle(my$('dv'),null)['left']);
//ie8支持
//console.log(my$('dv').currentStyle.left);
};
//获取任意一个元素的任意一个样式属性的值
function getStyle(element,attr){
//判断浏览器是否支持这个方法
if(window.getComputedStyle){
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
my$('btn').onclick=function(){
console.log(getStyle(my$('dv'),"top"));
};
};
</script>
封装缓动动画增加任意多个属性
<style >
*{
padding: 0%;
margin:0%;
}
div{
width:200px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background-color: pink;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" name="" value="显示效果" id="btn">
</body>
<script src="xiec.js"></script>
<script>
//获取任意一个元素的任意一个样式属性的值
function getStyle(element,attr){
//判断浏览器是否支持这个方法
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
function animate(element,json){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true;//默认，假设全部达到目标
for(var attr in json){
//获取元素这个属性的当前的值
var current=parseInt(getStyle(element,attr));
//获取当前属性对应的目标值
var target=json[attr];
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
//是否达到目标
if(current!=target){
flag=false;
}
}
if(current==target){
//清除定时器
clearInterval(element,attr);
}
//测试
console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
},20);
}
my$('btn').onclick=function(){
animate(my$('dv'),{"width":400,"height":500,"left":500,"top":80});
}
</script>
封装缓动动画函数增加回调函数
<style >
*{
padding: 0%;
margin:0%;
}
div{
width:200px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background-color: pink;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" name="" value="显示效果" id="btn">
</body>
<script src="xiec.js"></script>
<script>
//获取任意一个元素的任意一个样式属性的值
function getStyle(element,attr){
//判断浏览器是否支持这个方法
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
function animate(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true;//默认，假设全部达到目标
for(var attr in json){
//获取元素这个属性的当前的值
var current=parseInt(getStyle(element,attr));
//获取当前属性对应的目标值
var target=json[attr];
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
//是否达到目标
if(current!=target){
flag=false;
}
}
if(current==target){
//清除定时器
clearInterval(element,attr);
if (fn) {
fn();
}
}
//测试
console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
},20);
}
my$('btn').onclick=function(){
var json1={"width":300,"height":300,"top":200,"left":100};
animate(my$('dv'),json1,function(){
var json2={"width":100,"height":200,"top":400,"left":300};
animate(my$('dv'),json2,function(){
var json3={"width":300,"height":300,"top":200,"left":100};
animate(my$('dv'),json3);
});
});
};
</script>
动画函数增加透明度和层级
<style >
*{
padding: 0%;
margin:0%;
}
div{
width:200px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background-color: pink;
}
input{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" name="" value="显示效果" id="btn">
</body>
<script src="xiec.js"></script>
<script>
//获取任意一个元素的任意一个样式属性的值
function getStyle(element,attr){
//判断浏览器是否支持这个方法
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
function animate(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true;//默认，假设全部达到目标
for(var attr in json){
//判断这个属性attr是不是opacity
if(attr=="opacity"){
//获取当前元素的透明度，并放大一百倍
var current=getStyle(element,attr)*100;
//获取当前属性对应的目标值
var target=json[attr]*100;
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移动后的值
element.style[attr]=current/100;
}else if(attr=="zIndex"){
//层级改变就是直接改变这个属性的值
element.style[attr]=json[attr];
}else{//普通属性
//获取元素这个属性的当前的值
var current=parseInt(getStyle(element,attr));
//获取当前属性对应的目标值
var target=json[attr];
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
}
if(current!=target){
flag=false;
}
}
if(current==target){
//清除定时器
clearInterval(element,attr);
if (fn) {
fn();
}
}
//测试
console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
},20);
}
my$('btn').onclick=function(){
var json1={"width":300,"height":300,"top":200,"left":100,"opacity":0.2};
animate(my$('dv'),json1,function(){
animate(my$('dv'),{"width":200,"height":200,"top":0,"left":200,"opacity":1,"z-index":1000});
});
};
</script>
案例：手风琴
<style >
*{
padding: 0%;
margin:0%;
}
#box{
width: 1200px;
height: 300px;
border:1px solid red;
margin:0 auto;
}
ul{
list-style: none;
overflow: hidden;
}
ul li{
width: 200px;
height: 300px;
float: left;
display: list-item;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script src="xiec.js"></script>
<script>
//获取任意一个元素的任意一个样式属性的值
function getStyle(element,attr){
//判断浏览器是否支持这个方法
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
function animate(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true;//默认，假设全部达到目标
for(var attr in json){
//判断这个属性attr是不是opacity
if(attr=="opacity"){
//获取当前元素的透明度，并放大一百倍
var current=getStyle(element,attr)*100;
//获取当前属性对应的目标值
var target=json[attr]*100;
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移动后的值
element.style[attr]=current/100;
}else if(attr=="zIndex"){
//层级改变就是直接改变这个属性的值
element.style[attr]=json[attr];
}else{//普通属性
//获取元素这个属性的当前的值
var current=parseInt(getStyle(element,attr));
//获取当前属性对应的目标值
var target=json[attr];
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
}
if(current!=target){
flag=false;
}
}
if(current==target){
//清除定时器
clearInterval(element,attr);
if (fn) {
fn();
}
}
//测试
console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
},20);
}
//先获取所有的li标签‘
var list =my$('box').getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundImage="url(./image/"+(i+1)+".jpg)";
//鼠标进入
list[i].onmouseover=mouseoverHandle;
//鼠标离开
list[i].onmouseout=mouseoutHandle;
}
//进入
function mouseoverHandle(){
for (var j = 0; j < list.length; j++) {
animate(list[j],{"width":100});//动画效果
}
animate(this,{"width":600});
}
//离开
function mouseoutHandle(){
for (var j = 0; j < list.length; j++) {
animate(list[j],{"width":200});//动画效果
}
}
</script>
案例：开机动画
<style >
*{
padding: 0%;
margin:0%;
}
.box{
width: 300px;
border:1px solid red;
position: fixed;
right: 0;
bottom: 0;
overflow: hidden;
}
#closeButton{
width: 20px;
height: 20px;
border:1px solid green;
position: absolute;
right: 0;
top: 5px;
}
.hd{
width: 300px;
height: 300px;
border:1px solid yellow;
}
.bd{
width: 300px;
height: 100px;
border:1px solid black;
}
</style>
</head>
<body>
<!--
为什么div既设置了id又设置了class？
是为了方便后面的使用，id可以更快的为某些元素设置其特有的样式，而不会影响其他的，有些样式大家的都要一样，就用的class
-->
<div class="box" id="box">
<span id="closeButton"></span>
<div id="headPart" class="hd"></div>
<div id="bottomPart" class="bd"></div>
</div>
</body>
<script src="xiec.js"></script>
<script>
//获取任意一个元素的任意一个样式属性的值
function getStyle(element,attr){
//判断浏览器是否支持这个方法
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
function animate(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
var flag=true;//默认，假设全部达到目标
for(var attr in json){
//判断这个属性attr是不是opacity
if(attr=="opacity"){
//获取当前元素的透明度，并放大一百倍
var current=getStyle(element,attr)*100;
//获取当前属性对应的目标值
var target=json[attr]*100;
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移动后的值
element.style[attr]=current/100;
}else if(attr=="zIndex"){
//层级改变就是直接改变这个属性的值
element.style[attr]=json[attr];
}else{//普通属性
//获取元素这个属性的当前的值
var current=parseInt(getStyle(element,attr));
//获取当前属性对应的目标值
var target=json[attr];
//移动步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
}
if(current!=target){
flag=false;
}
}
if(current==target){
//清除定时器
clearInterval(element.timeId,attr);
if (fn) {
fn();
}
}
//测试
console.log("目标："+target+"，当前："+current+"，每次移动步数："+step);
},20);
}
my$('closeButton').onclick=function(){
//设置最下面的div的高渐渐变成0；
animate(my$('bottomPart'),{"height":0},function(){
animate(my$('box'),{"width":0});
});
};
</script>
offset系列：获取元素的宽，高，left，top，offsetParent
图片发布于简书APP
scoll系列：卷曲出去的值
图片发布于简书APP
client系列：可视区域
图片发布于简书APP
clientTop：上面的 边框的宽度
