>웹 프론트엔드 >JS 튜토리얼 >버퍼 모션 프레임워크의 JavaScript 구현 예

버퍼 모션 프레임워크의 JavaScript 구현 예

黄舟
黄舟원래의
2017-10-02 09:45:031549검색

이 글에서는 자바스크립트 버퍼링 모션 프레임워크 구현에 대한 관련 정보를 주로 소개합니다. 누구나 본능적으로 유사한 기능을 구현하는 데 도움이 되기를 바랍니다. 도움이 필요한 친구들은

자바스크립트 버퍼링 모션 프레임워크 구현

을 참고하세요.

프레임워크 이를 사용하면 코딩 효율성이 크게 향상됩니다. 버퍼링 모션 프레임워크를 공유해 보겠습니다.

예제 코드:


/**
 * Created by wang on 2016/8/3.
 */

//获取非行间样式和行间样式
function getStyle(obj,name) {
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else {
    return getComputedStyle(obj,false)[name];
  }
}
//获取非行间样式和行间样式

//缓冲运动框架
var timer=null;
function startMove(obj,attr,iTarget) {
  clearInterval(obj.timer);
  obj.timer=setInterval(function () {
    var cur=0;

    if(attr=='opacity'){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);
    }
    else {
      cur=parseInt(getStyle(obj,attr));
    }
    var speed=(iTarget-cur)/6;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur==iTarget){
      clearInterval(timer);
    }
    else {
      if(attr=='opacity'){
        obj.style.filter='alpha(opcity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }
      else {
        obj.style[attr]=cur+speed+'px';
      }
    }
  },30)
}
//缓冲运动框架

위 내용은 버퍼 모션 프레임워크의 JavaScript 구현 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.