zoukankan      html  css  js  c++  java
  • js弹性运动

    function fiexible(obj,json,way,fn){
    /*** 按坐标运动 ***/
    if(way === true){
    //检测left 与 top 是否都有值
    if(typeof json.left !='undefined' && typeof json.top !='undefined'){
    var x = Math.floor(json.left + json.width/2); //计算X轴中心点
    var y = Math.floor(json.top + json.height/2); //计算Y轴中心点
    //设置初始的left 和 top 值 并让元素显示
    obj.style.display = 'block';
    obj.style.left = x-(parseInt(getStyle(obj,'width'))/2) + 'px';
    obj.style.top = y-(parseInt(getStyle(obj,'height'))/2) + 'px';
    //清除margin
    obj.style.margin = 0 + 'px';
    }
    }
    var newJson = {}
    /*** 往参数中添加位置属性 用于设置元素的运动初始点 ***/
    for(var arg in json){
    newJson[arg] = [json[arg], parseInt(getStyle(obj,arg))]
    //newJson[arg] = [运动目标点,运动初始点];
    }
    var oSite = {};
    /** 添加单独的属性值 **/
    for(var attr in newJson){
    oSite[attr] ={iSpeed:0,curSite:newJson[attr][1],bStop:false};
    //oSite[attr] = {运动初始速度,运动当前值,判断是否完成运动依据};
    }
    /** 运动开始前关闭本身的定时器 **/
    clearInterval(obj.t);
    obj.t = setInterval(function(){
    /*** 循环运动属性 ***/
    for (var attr in newJson) {
    /** 运动状态 **/
    oSite[attr].bStop = false;
    // iCur 更新运动元素当前的属性值
    if(attr=='opacity'){ //对透明度单独处理
    var iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
    }else{ //普通样式
    var iCur = parseInt(getStyle(obj, attr));
    }
    oSite[attr].iSpeed += (newJson[attr][0] - iCur) /5; //加速
    oSite[attr].iSpeed *= 0.75; //磨擦
    oSite[attr].curSite += oSite[attr].iSpeed; //更新运动的当前位置
    //运动停止条件 速度绝对值小于1 并且 当前值与目标值的差值的绝对值小于一
    if (Math.abs(oSite[attr].iSpeed) < 1 && Math.abs(iCur - newJson[attr][0]) < 1) {

    //设置样式,对透明度单独处理
    if(attr=='opacity'){
    obj.style.filter='alpha(opacity='+newJson[attr][0]+')';
    obj.style.opacity=newJson[attr][0]/100;
    }else{
    obj.style[attr] = newJson[attr][0] + 'px'; //设置到目标点
    }

    oSite[attr].bStop = true; //设置当前属性运动是否完成
    }
    else {
    //更新运动对象的属性值
    if(attr=='opacity'){
    obj.style.filter='alpha(opacity='+oSite[attr].curSite+')';
    obj.style.opacity=oSite[attr].curSite/100;
    }else{
    obj.style[attr] = oSite[attr].curSite + 'px';
    }
    }
    }
    // 校验定时器停止
    if(checkStop(oSite)){
    clearInterval(obj.t);
    if(fn){
    fn.call(obj)
    }
    }
    }, 30);
    /** 校验运动是否完成 **/
    function checkStop(oSite){
    for(var i in oSite){
    if(oSite[i].bStop === false){
    return oSite[i].bStop;
    }
    }
    return true;
    }
    }
  • 相关阅读:
    jquery做的图片挂起的效果
    Android数据存储之DOM解析XML文件(输出部分)
    Android数据存储之JSON数据解析(输出部分)
    Android网络编程之Web Service获取天气预报( 获取省市填充下拉列表)
    Android数据存储之DOM解析XML文件(读取部分)
    Android网络编程之一个Android登录系统模块的实现(服务器端)
    Android数据存储之XmlPull解析XML文件(读取部分)
    Android数据存储之XmlPull解析XML文件(输出部分)
    Android数据存储之JSON数据解析(读取部分)
    Android网络编程之一个Android登录系统模块的实现(客户端)
  • 原文地址:https://www.cnblogs.com/family-spring/p/5415860.html
Copyright © 2011-2022 走看看