zoukankan      html  css  js  c++  java
  • 模拟CSS3 多组位移运动属性的框架封装

    obj是将要运动的对象,json是运动完成时的位移结果。

    封装要点:

      1.定时器开关flag的定义要放在for in结构的外面,否则,每遍历一次,都会定义一个 新的flag

      2.if(current != json[attr]) {     flag = false;  }要放到遍历的里面,因为定时器每运行一次,都要判断一下是否到达终点

      3.if(flag == false) {clearInterval(obj.timer)}放到遍历结构的外面,当所有的位移都达到json给的数值的时候,才关闭定时器。否则,只有一个json[attr]达到位移终点时,定时器就会关闭,此时,可能别的位移还没有到达json数据给的终点。

        function animate(obj,json){ 
    		clearInterval(obj.timer);
    		var flag = true;
    		obj.timer = setInterval(function (){
    			for (var attr in json) {
    				// var current = parseInt(getCss(obj,attribute))
    				// getCss(obj,attr)中的attr是从json中获取到的,因此不能用attribution了
    				var current = parseInt(getCss(obj,attr));
    				var step = (json[attr] - current) /10;
    				step = step >0 ? Math.ceil(step) : Math.floor(step);
    				// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;
    				obj.style[attr] = current + step + 'px' ;
    				if(current != json[attr]) {
    					flag = false;
    				}
    			}
    		},30);
    		if(flag == false) {clearInterval(obj.timer)}
    		
    	}
    

      案例

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                 100px;
                height: 100px;
                background-color: pink;
                position: absolute;
                left: 0;
                opacity: 0.3;
            }
        </style>
    </head>
    <body>
    <button id="btn200">200</button>
    <button id="btn400">400</button>
    <div id="box"></div>
    </body>
    </html>
    <script>
        var btn200 = document.getElementById("btn200");
        var btn400 = document.getElementById("btn400");
        var box = document.getElementById("box");
        btn200.onclick = function() {
            animate(box,{top: 300,height:200,width : 600});
        }
        btn400.onclick = function() {
            animate(box,{top: 100,height:500,width : 300});
        }
    
        function animate(obj,json){ 
    		clearInterval(obj.timer);
    		var flag = true;
    		obj.timer = setInterval(function (){
    			for (var attr in json) {
    				// var current = parseInt(getCss(obj,attribute))
    				// getCss(obj,attr)中的attr是从json中获取到的,因此不能用attribution了
    				var current = parseInt(getCss(obj,attr));
    				var step = (json[attr] - current) /10;
    				step = step >0 ? Math.ceil(step) : Math.floor(step);
    				// obj.style[attr] = parseInt(getCss(obj,attr)) + step + 'px' ;
    				obj.style[attr] = current + step + 'px' ;
    				if(current != json[attr]) {
    					flag = false;
    				}
    			}
    		},30);
    		if(flag == false) {clearInterval(obj.timer)}
    		
    	}
    	function getCss(obj,attribute) {
    		if(obj.currentStyle) {
    			return obj.currentStyle[attribute];}else {
    		return window.getComputedStyle(obj,null)[attribute];}
    	}
    </script>
    

      

  • 相关阅读:
    支付宝支付-扫码支付
    安装agent
    设置微服务环境变量脚本
    曹工说Spring Boot源码(23)-- ASM又立功了,Spring原来是这么递归获取注解的元注解的
    matlab文件拷贝
    hive优化之调整mapreduce数目
    软件测试面试题
    wtforms第三方校验库
    flask貌似可以学习和参考的网站
    flask 接受(获取)url 请求的参数 的方法 和 表单 post过来的数据
  • 原文地址:https://www.cnblogs.com/darkterror/p/6218210.html
Copyright © 2011-2022 走看看