常见的取整函数的认识
- 向上取整函数
如果是正数，那么向上取整得到的是绝对值大的
如果是负数，那么向上取整得到的是绝对值小的
Math.ceil()
- 向下取整函数
如果是正数，那么向下取整得到的是绝对值小的
如果是负数，那么向下取整得到的是绝对值大的
Math.floor()
缓动动画的补丁
- 一般对于缓动动画，我们速度一般是小数，所以永远得不到对应的 target 值
所以我们要取整，但是取的是绝对值大的那个
var speed = Math.ceil((target - begin)*0.2);
缓动动画的封装
fucntion buffer(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
begin = box.offsetLeft;
var speed = target > begin?Math.ceil((target - begin)*0.2):Math.floor((target - begin)*0.2);
obj.style.left = begin + speed + 'px';
if(begin == target){
clearInterval(obj.timer);
}
},20)
}
获取某个标签的初始值
- 通过 style 获取不了页内样式的值
但是可以获取行内样式的值
- 获取页内样式的值
ie box.currentStyle.width
一般浏览器window.getComputedStyle(boxm,null).width
- 获取某个标签标签样式的值，是一个功能，所以我们抽取一个函数，其中 obj 表示获取哪一个标签， attr 表示抽取哪一个属性
function getCssAttr(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,null)[attr];
}
}
//对于属性如果用点语法访问不到就用[]来访问
封装单值动画
function buffer(obj,target,attr){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var begin = parsetInt(getCssAttr(obj,attr)) || 0;
var speed = target > begin?Math.ceil((target - begin)*0.2):Math.floor((target - begin)*0.2);
obj.style[attr] = begin + speed + 'px';
if(begin == target){
clearInterval(obj.timer);
}
},20)
}
封装多值动画
function buffer(obj,json){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var key in json){
var begin = parseInt(getCssAttr(obj,key)) || 0;
var target = parseInt(json[key]);
var speed = target > begin ? Math.ceil((target - begin)*0.2) : Math.floor((target - begin)*0.2);
obj.style[key] = begin + speed + 'px';
if(begin != target){
flag = false;
}
}
if(flag == true){
clearInterval(obj.timer);
}
},20)
}
//只要有一个值达到了 begin == target 条件时，计时器就会停止，所以不能保证所有的值同时到达，但是我们需要他们同时到达，所以需要加节流器 var flag
封装多值动画的回调
- 为了达到结束一个动画然后再开始一个新的动画目的，我们需要监听动画结束，然后回调自身,在形参里加函数
buffer(box,{width:800,height:300},function(){
buffer(box,width:100,height:300)
});
function buffer(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
for(var key in json){
var begin = parseInt(getCssAttr(obj,key)) || 0;
var target = parseInt(json[key]);
var speed = target > begin ? Math.ceil((target - begin)*0.2) : Math.floor((target - begin)*0.2);
obj.style[key] = begin + speed + 'px';
if(begin != target){
flag = false;
}
}
if(flag == true){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},20)
}
缓动动画的多值动画其他需要动画属性设置
function buffer(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
/*设置一个值用来表示是否清空定时器*/
var flag = true;
var begin = 0;
var target = 0;
/*设置多个值，要遍历字典*/
for(var key in json){
/*对于opcity类似的值，我们通过现在的代码没法设置对应的值
* 我们区别对待,要在取出值的时候和设置值的时候都有重新设置*/
if('opacity' == key){
begin = parseInt( parseFloat(getCssAtt(obj,key))*100)||100;
target = parseInt(json[key]*100) ;
}else {
begin = parseInt(getCssAtt(obj,key))||0;
target = parseInt(json[key]) ;
}
var speed = target > begin ?Math.ceil((target - begin)*0.2):Math.floor((target - begin)*0.2);
/**/
if ('opacity' == key){
/*普通浏览器*/
obj.style.opacity =( begin + speed)/100;
/*ie浏览器*/
obj.style.filter = 'alpha(opacity:'+(begin + speed)+')';
}else if ('zIndex'== key){
obj.style.zIndex = json[key];
}
else {
obj.style[key] = begin +speed +'px';
}
/*只要有一个值，到达对应目标值，就会停止定时器，所以不能保证所有的值同时到达，但是我们需要让他同时到达*/
if (begin != target){
flag = false;
}
}
if(flag == true){
/*回调：就是表示当上一次动画完成后，我们要做的事情*/
clearInterval(obj.timer);
/*一般为了严格，我们需要判断这个函数是否实现，如果实现我们采取调用
* 如果没有实现就不调用*/
if(fn){
fn();
}
}
},20)
}
楼层效果的实现
<script>
window.onload = function(){
/*1.获取标签*/
var oul = document.getElementById('ul');
var ol = document.getElementById('ol');
var oulis = oul.children;
var olis = ol.children;
/*1.0设置值用来记录是否点击了ol中li*/
var isClick = false;
/*2.设置颜色*/
/*2.1用来记录颜色*/
var bgColors = ['red','blue','purple','green','pink'];
for(var i = 0;i < oulis.length;i++){
oulis[i].style.background = bgColors[i];
}
/*3.当点击ol中的li的时候，让对应的ul中的li滚动*/
/*当点击的时候，会触发对应动画，在动画中我们设置scroll，但是在scroll中会触发
* winodow.onscroll方法，所以在这个方法中我们会重新设置每一个ol中的li的位置
* 所以出先来回晃动的现象，
* 解决：点击的时候触发动画的期间不要触发滚动事件中设置ol中li的位置的代码*/
for(var i = 0;i < olis.length;i++){
olis[i].index = i;
olis[i].onclick = function(){
isClick = true;
/*3.1切换不同的ol中的位置，就是排他*/
for(var j = 0;j < olis.length;j ++){
olis[j].className = '';
}
olis[this.index].className = 'curr';
/*3.2让对应的ul中li动起来*/
var screenH = client().height *this.index ;
/*动画结束后要设置对应的点击为false*/
buffer(document.body,{scrollTop: screenH},function(){
isClick = false;
});
}
}
/*4.当滚动的时候了，让对应的ol中选项发生变化*/
window.onscroll = function(){
/*4.1判断滚动的距离和每一个ul中li的offset值比较，如果大于对应的offset值
* 就让对应的ol中的li发生变化*/
/*4.11获取滚动的距离*/
/*4.12如果没有点击就执行代码*/
if(!isClick){//表示没有点击，没有触发点击的动画
var myStop = scroll().top;
for(var i = 0;i < oulis.length;i++){
var myOffTop = oulis[i].offsetTop;
if(myStop>=myOffTop){
/*就是设置排他*/
for(var j = 0;j <olis.length;j ++ ){
olis[j].className = '';
}
olis[i].className = 'curr';
}
}
}
}
}
</script>
音乐导航的实现
<script>
window.onload = function(){
/*1.获取标签*/
var oul = document.getElementById('ul');
var lis = oul.children;
/*2.设置每一个li的图片*/
for(var i = 0;i < lis.length;i ++){
if (i == 0){
lis[i].style.backgroundPosition = '0 0';
}else
{
lis[i].style.backgroundPosition = '0'+ i *-40 + 'px';
}
}
/*3.当移动到li上的时候设置让span出现，而且显示音乐*/
for(var i = 0;i < lis.length;i++){
lis[i].onmouseover = function(){
/*采用缓动动画让对应的span出现*/
buffer(this.children[1],{top:0});
/*开始音乐*/
this.children[2].play();
this.children[2].currentTime = 0;
}
lis[i].onmouseout = function(){
buffer(this.children[1],{top:40});
}
}
/*4.当点击键盘的时候触发音乐*/
/*一般键盘事件由最大事件源触发*/
document.onkeydown = function(event){
/*4.1获取keyCode值*/
/*想要获取keyCode值，需要通过事件对象*/
var event = event ||window.event;
var myKeyCode = event.keyCode - 49;
/*4.2设置对用li中span显示以及设置对应音乐响起来*/
buffer(lis[myKeyCode].children[1],{top:0},function(){
buffer(lis[myKeyCode].children[1],{top:40});
});
/*4.3设置音乐*/
lis[myKeyCode].children[2].play();
lis[myKeyCode].children[2].currentTime = 0;
}
}
</script>
- 获取 keyCode 值，有 keyCode 表
需要通过事件对象获取event.keyCode
内存管理
- JS 和 Java 采用垃圾内存回收，回定时清除垃圾内存，因此，会造成垃圾内存堆积
- iOS 采用实时垃圾内存回收，只要产生垃圾内存就会被回收
- 内存分栈区和堆区
- 栈区保存变量名称（指针），系统自动管理
- 堆区保存赋值型数据，不会自动管理，需要我们手动管理，管理方式有计数回收法，和标记回收法
- 数据主要两种，一般性数据类型，和引用型数据类型，前者保存在栈区，后者保存在堆区
