jsday17

最新推荐文章于 2024-11-18 17:22:13 发布

weixin_30621919

最新推荐文章于 2024-11-18 17:22:13 发布

阅读量65

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/cqdd/p/10279028.html

版权

sport3.js:

//支持 缓冲 + 多物体 + 链式
//  obj ： 运动的对象  
//  attr : 运动的样式
// target ： 目标值
//callback ：代表一个功能    一个函数  当一个函数作为参数时，这样的函数叫做回调函数
//回调 ：回头再调用
function startMove(obj,attr,target,callback){
    clearInterval( obj.timer );
    obj.timer = setInterval( function(){
        //获取实际样式值
        var current = 0;
        if( attr == "opacity" ){
            current = getStyle( obj , attr )*100;
        }else{
            current = parseInt( getStyle( obj , attr ) );
        }
        //获取速度
        var speed = (target - current)/10;
        speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
        //判断结束条件 并设置样式
        if( target == current ){
            clearInterval( obj.timer );
            //上一个动作完成了  开始进入到下一个动作
            //下一个动作不确定  此处有一个功能 是可变的
            if( callback ){//如果用户传递了该参数 就执行下一个动作
                callback();
            }
        }else{
            if( attr == "opacity" ){
                obj.style[attr] = (current + speed)/100;
            }else{
                obj.style[attr] = current + speed + "px";
            }
        }
    },30 )
}

//封装一个函数 功能是获取非行内元素样式值
function getStyle( obj ,attr ){
    if( getComputedStyle ){
        return getComputedStyle( obj,false )[attr];
    }else{
        return obj.currentStyle[attr];
    }
}

sport4.js:

//支持 缓冲 + 多物体 + 链式 + 完美 有bug
//  obj ： 运动的对象  
// json :存储多个attr和target
//callback ：代表一个功能    一个函数  当一个函数作为参数时，这样的函数叫做回调函数
//回调 ：回头再调用
function startMove(obj,json,callback){
    clearInterval( obj.timer );
    obj.timer = setInterval( function(){
        for( var attr in json ){
            //获取实际样式值
            var current = 0;
            if( attr == "opacity" ){
                current = getStyle( obj , attr )*100;
            }else{
                current = parseInt( getStyle( obj , attr ) );
            }
            //获取速度
            var speed = (json[attr] - current)/10;
            speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
            //判断结束条件 并设置样式
            if( json[attr] == current ){
                clearInterval( obj.timer );
                //上一个动作完成了  开始进入到下一个动作
                //下一个动作不确定  此处有一个功能 是可变的
                if( callback ){//如果用户传递了该参数 就执行下一个动作
                    callback();
                }
            }else{
                if( attr == "opacity" ){
                    obj.style[attr] = (current + speed)/100;
                }else{
                    obj.style[attr] = current + speed + "px";
                }
            }
        }
    },30 )
}

//封装一个函数 功能是获取非行内元素样式值
function getStyle( obj ,attr ){
    if( getComputedStyle ){
        return getComputedStyle( obj,false )[attr];
    }else{
        return obj.currentStyle[attr];
    }
}

sport5.js:

//支持 缓冲 + 多物体 + 链式 + 完美
//  obj ： 运动的对象  
// json :存储多个attr和target
//callback ：代表一个功能    一个函数  当一个函数作为参数时，这样的函数叫做回调函数
//回调 ：回头再调用
function startMove(obj,json,callback){//{ width:3,height:200 }
    clearInterval( obj.timer );
    obj.timer = setInterval( function(){
        var flag = true;//假设值为true时  可以停止定时器了
        for( var attr in json ){
            //获取实际样式值
            var current = 0;
            if( attr == "opacity" ){
                current = getStyle( obj , attr )*100;
            }else if( attr == "zIndex" ){
                current = parseInt( getStyle( obj , attr ) );
            }else{
                current = parseInt( getStyle( obj , attr ) );
            }
            //获取速度
            var speed = (json[attr] - current)/10;
            speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
            
            if( json[attr] != current ){
                flag = false;//假设不成立
            }
            //设置样式继续发生变化
            if( attr == "opacity" ){
                obj.style[attr] = (current + speed)/100;
            }else if( attr == "zIndex" ){
                obj.style[attr] = json[attr];
            }else{
                obj.style[attr] = current + speed + "px";
            }
        }
    
        //循环结束后 如果flag的值还是true  就可以停止定时器了
        if( flag ){//判断结束条件 并设置样式
            clearInterval( obj.timer );
            //上一个动作完成了  开始进入到下一个动作
            //下一个动作不确定  此处有一个功能 是可变的
            if( callback ){//如果用户传递了该参数 就执行下一个动作
                callback();
            }
        }
    },30 )
}

//封装一个函数 功能是获取非行内元素样式值
function getStyle( obj ,attr ){
    if( getComputedStyle ){
        return getComputedStyle( obj,false )[attr];
    }else{
        return obj.currentStyle[attr];
    }
}

公式实现抛物线运动：添加购物车功能

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>购物车</title>  
    <style>  
        *{
            margin:0;
            padding:0;
        }
        #addToCart {  
            position: fixed;  
            left: 600px;  
            cursor: pointer;  
            width: 100px;  
            height: 40px;  
            line-height: 40px;  
            border: 1px solid deeppink;  
            text-align: center;  
            color: deeppink;  
            top:500px;
        }  
        #addToCart:hover {  
            color: #fff;  
            background-color: deeppink;  
        }  
  
        #shopCart {  
            position: fixed;  
            right: 0;  
            top: 200px;  
            color: red;  
        }  
        #shopNum{
            width: 60px;
            height: 25px;
            background: deeppink;
            color:black;
            text-align: center;
            line-he0ight: 25px;
        }
        .good{
            width: 30px;
            height: 30px;
            position: absolute;
            background: skyblue;
        }
    </style>
    <body>
        <div id="addToCart">  
           添加到购物车  
        </div>      
        <div id="shopCart">  
            购物车  
          <p id="shopNum"></p>
        </div>
    </body>
</html>  
<script type="text/javascript">
     /*
      第一步 ： 确定三点坐标
      第二步 ：根据三点坐标确定抛物线轨迹
      第三步 ：创建一个商品 
      第四步 ：让商品运动 运动到购物车按钮后停下来
      */
     var startBtn = document.getElementById("addToCart");//起始按钮
     var endBtn = document.getElementById("shopCart");//结束按钮
     var shopCar = document.getElementById("shopNum");
     var num = 0;//商品数量统计 
     
     startBtn.onclick = function(){
         //第一步 ： 确定三点坐标
         //起始点
         var startPoint = {
             x : startBtn.offsetLeft + startBtn.offsetWidth/2,
             y : startBtn.offsetTop
         }
         //结束点
         var endPoint = {
             x : endBtn.offsetLeft + endBtn.offsetWidth/2,
             y : endBtn.offsetTop
         }
         //最高点
         var topPoint = {
             x : endPoint.x - 100 ,
             y : endPoint.y - 80
         }
         
         //第二步 ：根据三点坐标确定抛物线轨迹   先确定抛物线中的三个 abc系数
         var a = ((startPoint.y - endPoint.y) * (startPoint.x - topPoint.x) - (startPoint.y - topPoint.y) * (startPoint.x - endPoint.x)) / ((startPoint.x * startPoint.x - endPoint.x * endPoint.x) * (startPoint.x - topPoint.x)-(startPoint.x * startPoint.x - topPoint.x * topPoint.x) * (startPoint.x - endPoint.x));  
        
        var b = ((endPoint.y - startPoint.y) - a * (endPoint.x * endPoint.x - startPoint.x * startPoint.x)) / (endPoint.x - startPoint.x);  
                
        var c = startPoint.y - a * startPoint.x * startPoint.x - b * startPoint.x;
         
         //抛物线方程 ：y = a*x*x + b*x + c
         
         //第三步 ：创建一个商品
         var good = document.createElement("div");
         good.className = "good";
         document.body.appendChild(good);
         //设置商品的起始点坐标
         good.style.left = startPoint.x + "px";
         good.style.top = startPoint.y + "px";
         
         var x = startPoint.x;//商品运动轨迹的横坐标起始点
         //第四步 ：让商品运动 运动到购物车按钮后停下来
         var timer = setInterval( function(){
             x += 5;//left
             y = a*x*x + b*x + c;//top
             if( x < endPoint.x ){
                 //根据商品运动轨迹的变化 设置商品的left值和top值
                 good.style.left = x + "px";
                 good.style.top = y + "px";
             }else{
                 clearInterval( timer );
                 good.remove();
                 shopCar.innerHTML = ++num;
             }
         },10 )
     }
</script>

//支持缓冲 + 多物体 + 链式 + 完美有bug// obj ：运动的对象 // json :存储多个attr和target//callback ：代表一个功能一个函数当一个函数作为参数时，这样的函数叫做回调函数//回调：回头再调用function startMove(obj,json,callback){clearInterval( obj.timer );obj.timer = setInterval( function(){for( var attr in json ){//获取实际样式值var current = 0;if( attr == "opacity" ){current = getStyle( obj , attr )*100;}else{current = parseInt( getStyle( obj , attr ) );}//获取速度var speed = (json[attr] - current)/10;speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );//判断结束条件并设置样式if( json[attr] == current ){clearInterval( obj.timer );//上一个动作完成了开始进入到下一个动作//下一个动作不确定此处有一个功能是可变的if( callback ){//如果用户传递了该参数就执行下一个动作callback();}}else{if( attr == "opacity" ){obj.style[attr] = (current + speed)/100;}else{obj.style[attr] = current + speed + "px";}}}},30 )}
//封装一个函数功能是获取非行内元素样式值function getStyle( obj ,attr ){if( getComputedStyle ){return getComputedStyle( obj,false )[attr];}else{return obj.currentStyle[attr];}}

转载于:https://www.cnblogs.com/cqdd/p/10279028.html