zoukankan      html  css  js  c++  java
  • js基础之动画(三)

    一、链式运动

    首先,要改进运动框架

    function getStyle(obj,attr){
      if(obj.currentStyle){
        return obj.currentStyle[attr];
      }else{
        return getComputedStyle(obj,false)[attr];
      }
    }
     function startMove(obj,attr,iTarget,fn){//多div运动
    //var obj = document.getElementsByClassName('menu');

    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
      var iCur=0;
      if(attr=='opacity'){
        var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
      }else{
        var iCur=parseInt(getStyle(obj,attr));
    }

    var iSpeed=(iTarget-iCur)/8;
    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);console.log(iSpeed+'/'+iCur);
      if(iCur==iTarget){
        clearInterval(obj.timer);

        if(fn){fn()};
      }else{
        if(attr=='opacity'){
            obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
          obj.style.opacity=(iCur+iSpeed)/100;
        }else{
          obj.style[attr]=iCur+iSpeed+'px';console.log(obj.style.attr);
        }

      }
    },30);
      }

    然后引用即可

    var oBtn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');

    oBtn.onmouseover=function(){
      startMove(oDiv,'width',300,function(){
        startMove(oDiv,'height',333,function(){
          startMove(oDiv,'opacity',100);
        });
      });
    }
    oBtn.onmouseout=function(){
      startMove(oDiv,'opacity',50,function(){
        startMove(oDiv,'height',20,function(){
          startMove(oDiv,'width',0);
        });
      });
    }

    二、用json打造完美框架

     function getStyle(obj,attr){
      if(obj.currentStyle){
        return obj.currentStyle[attr];
      }else{
        return getComputedStyle(obj,false)[attr];
      }
    }
     function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    var bStop=true;//如为真,这次运动结束,所有值都达到目标
    for(var attr in json){
    //1.取当前的位置
    var iCur=0;
    if(attr=='opacity'){
    var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
    }else{
    var iCur=parseInt(getStyle(obj,attr));
    }
    //2.算速度
    var iSpeed=(json[attr]-iCur)/8;
    iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//console.log(iSpeed+'/'+iCur);

    //3.检测停止
    if(iCur!=json[attr]){
    bStop=false;
    }
    if(attr=='opacity'){
      obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
    obj.style.opacity=(iCur+iSpeed)/100;
    }else{
    obj.style[attr]=iCur+iSpeed+'px';
    }
    }
    if(bStop){
    clearInterval(obj.timer);
    if(fn){fn()};
    }
    },30);
    }

    三、照片墙——多图展开、收缩

    var oUl = document.getElementById('ul1');
    var aLi = oUl.getElementsByTagName('li');
    var oImg = document.getElementsByClassName('img1');
    //js布局
    var minIndex=2;//设置层级初始值
    var i=0;
    for(i=0;i<aLi.length;i++){
    //aLi[i].innerHTML='left:'+aLi[i].offsetLeft+',top:'+aLi[i].offsetTop;
    aLi[i].style.left=aLi[i].offsetLeft+'px';
    aLi[i].style.top=aLi[i].offsetTop+'px';
    }
    for(i=0;i<aLi.length;i++){
    aLi[i].style.position='absolute';
    }
    //加事件
    for(i=0;i<aLi.length;i++){

    aLi[i].onmouseover=function(){
    this.style.zIndex=minIndex++;//console.log(this.style.zIndex);确保当前图片的层级为最高
    startMove(this,{200,height:200,margin:-50});


    }
    aLi[i].onmouseout=function(){
    startMove(this,{100,height:100,margin:10});
    }
    }
    for(i=0;i<oImg.length;i++){
    oImg[i].onmouseover=function(){
    startMove(this,{300,height:200,margin:0});
    }
    oImg[i].onmouseout=function(){
    startMove(this,{100,height:100,margin:0});
    }
    }

    四、新浪微博之大家正在说

    var oTxt = document.getElementById('txt1');
    var oBtn = document.getElementById('btn1');
    var oUl = document.getElementById('ul1');

    oBtn.onclick=function(){
      var oLi = document.createElement('div');//这里要用div替换li,否则IE7的移动效果会卡
    var aLi = oUl.getElementsByTagName('div');//这里要用div替换li,否则IE7的移动效果会卡

    oLi.innerHTML=oTxt.value;
    oTxt.value='';

    if(aLi.length){
    oUl.insertBefore(oLi,aLi[0]);
    }else{
    oUl.appendChild(oLi);
    }

    var iHeight=oLi.offsetHeight;
    oLi.style.height=0;

    startMove(oLi,{height:iHeight},function(){
    startMove(oLi,{opacity:100});//alert();
    });
    }

    布局的时候也要用div套div代替ul套li

    五、无缝滚动

     var oDiv = document.getElementById('div1');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var oLi = oUl.getElementsByTagName('li');
    var aA = document.getElementsByTagName('a');
    var timer=null;
    var iSpeed=-3;

    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.width=oLi.length*oLi[0].offsetWidth+'px';
    function fnMove(){
      if(oUl.offsetLeft<-oUl.offsetWidth/2){
        oUl.style.left=0;
      }else if(oUl.offsetLeft>0){
        oUl.style.left=-oUl.offsetWidth/2+'px';
      }
    oUl.style.left=oUl.offsetLeft+iSpeed+'px';
    }
    timer=setInterval(fnMove,30);

    aA[0].onclick=function(){
      iSpeed=-3;
    };
    aA[1].onclick=function(){
      iSpeed=3;
    };
    oDiv.onmouseover=function(){
      clearInterval(timer);
    }
    oDiv.onmouseout=function(){
      timer=setInterval(fnMove,30);
    }


    作者:狂流
    出处:http://www.cnblogs.com/kuangliu/
    欢迎转载,分享快乐! 如果觉得这篇文章对你有用,请抖抖小手,推荐一下!

  • 相关阅读:
    231. Power of Two
    204. Count Primes
    205. Isomorphic Strings
    203. Remove Linked List Elements
    179. Largest Number
    922. Sort Array By Parity II
    350. Intersection of Two Arrays II
    242. Valid Anagram
    164. Maximum Gap
    147. Insertion Sort List
  • 原文地址:https://www.cnblogs.com/kuangliu/p/3483041.html
Copyright © 2011-2022 走看看