zoukankan      html  css  js  c++  java
  • 运动框架

    function getStyle(obj, attr){
     if(obj.currentStyle){
      return obj.currentStyle[attr];
     }
     else{
      return getComputedStyle(obj, false)[attr];
     }
    }//获取样式

    function startMove(obj, json, fn){
    /*obj 进行运动的节点
     
    json 要进行哪些运动 如:{300,height:200}{opacity:100} 300 、200为目标点
     
    fu 运动结束后进行的 操作 如 :运动结束后出现一个弹窗什么的*/

    clearInterval(obj.timer);
     obj.timer=setInterval(function (){
      var bStop=true;  //这一次运动就结束了――所有的值都到达了
      for(var attr in json) {
     var iCur=0;//1.取当前的值
         if(attr=='opacity'){
        iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
       }
       else{
        iCur=parseInt(getStyle(obj, attr));
       }
       //2.算速度
       var iSpeed=(json[attr]-iCur)/8;
       iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
       //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)
    }

    注意事项:对运动框架进行调用时一定要设初值。

    例:starMove(oDiv,{left:500});时,需要在css样式中的div设定left的值。

  • 相关阅读:
    Sass
    Less文件的建立
    面试问题整理
    高光谱图像分类部分名词解析
    监督学习,无监督学习和半监督学习
    git
    node.js安装及其环境配置
    浏览器从输入网址到渲染出页面的过程
    node的api
    模块与包管理工具
  • 原文地址:https://www.cnblogs.com/pcd12321/p/4456368.html
Copyright © 2011-2022 走看看