js原生简单实现animate操作Css3属性

最近写HTML5+CSS3页面发现Jquery没法操作transform:旋转等一些效果所以自己简单写了个

<script type="text/javascript">
    window.onload = function(){var func = function(){
            var isdie = false;
            this.animate = function(obj,name,time){
                var arr1 = [‘rotate‘];
                if(!isdie){
                    var num = 0.0000000001;
                    isdie = true;
                    var isCss3 = false;

                    var isdie = true;
                    var isZ = true;

                    for(var o in name){
                        if(o.indexOf(‘:‘) > 0){
                            isCss3 = true;
                            O = o.split(":");
                        }
                        if(isCss3){
                            var num = parseFloat(obj.style[""+O[0]+""].match(/([0-9])+/, ""));
                        }else{
                            var num = parseFloat(func.getStyle(obj,""+o+"").match(/([0-9])+/, ""));
                        }
                        // alert(num)
                        if(!num){
                            var num = 0;
                        }
                        var Interval = setInterval(function(){
                            if(parseFloat(name[o]) > num){

                                num+=0.9876543210;
                            }else if(parseFloat(name[o]) < num){
                                num-=0.9876543210;
                                isZ = false;

                            }else{
                                num = 0;
                            }
                            // alert(num);
                            if(isCss3){
                                var val = O[1]+"("+num+name[o].replace(/[(\d+)||(\d+.\d+)]+/,"")+")";
                                obj.style[""+O[0]+""]=val;
                            }else{
                                var val = ""+num+name[o].replace(/[(\d+)||(\d+.\d+)]+/,"")+"";
                                obj.style[""+o+""]=val;
                            }
                            // alert(val);
                            if(num > name[o].replace(/([a-z])+/, "") && isZ || num < name[o].replace(/([a-z])+/, "") && !isZ){
                                isdie = false;
                                clearInterval(Interval);
                                if(isCss3){
                                    obj.style[""+O[0]+""]=O[1]+"("+name[o].replace(/([a-z])+/, "")+name[o].replace(/[(\d+)||(\d+.\d+)]+/,"")+")";
                                }else{
                                    obj.style[""+o+""]=""+name[o].replace(/([a-z])+/, "")+name[o].replace(/[(\d+)||(\d+.\d+)]+/,"")+"";

                                }

                            }
                        },time);
                    }
                }
                return this;
            }
            this.inarray = function(b,a){
                for (var i = 0; i <= a.length - 1; i++) {
                    if(a[i] == b){
                        return true;
                    }
                    return false;
                };
            }
            this.getStyle = function (el, style){
               if(!+"\v1"){
                 style = style.replace(/\-(\w)/g, function(all, letter){
                   return letter.toUpperCase();
                 });
                 return el.currentStyle[style];
               }else{
                 return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
               }
                }
            }
        var func = new func();
        func.animate(line[3].getElementsByClassName(‘sanjiao‘)[0],{"height":"200px"},1);// func.animate(要操作的对象,{要操作的属性},变换的速度);//使用方法和jquery 如果要操作 width height等一些元素直接{"height":"200px"}就可以了如果是css3比如transform:rotate(100deg)就应该这么写{"transform:rotate":"100deg"}//暂时不支持操作多个属性进行动画效果(待添加!)//暂时不支持负数(待添加!)//写的不好还请多多见谅!
    }
</script>
时间: 2024-10-12 16:58:01

js原生简单实现animate操作Css3属性的相关文章

js原生复杂实现animate操作Css3属性(升级版!)

<!DOCTYPE html> <html> <head> <title> sadsadsadsadsadsadsa </title> <style type="text/css" media="screen"> #box { width: 200px; height: 200px; background: red; } </style> <script type="

JavaScript复习 js登录简单实现 dom操作练习

js登录简单实现: html源代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="denglu.js/dengluyanzheng.js"></script&g

js原生设计模式——8单例模式之简约版属性样式方法库

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>单例模式——在js中就是指的单个对象,可用于命名空间声明</title> </head><body>    <div id="box"></div></body><

写插件时遇到的一个小问题,关于animate和css3的问题

昨天写代码时,偶然想到了如果我们把css3属性放在animate中,指定时间.能否实现动画呢.举个例子吧: <script> $(".box").animate({ "-webkit-transform":"rotate(90deg)" },1000); </script> 如上代码,box会在一秒种从0deg旋转到90deg吗?答案是否定的. 于是我查了下jquery的手册,发现animate的第一参数中确实不能放css

move.js操作CSS3动画

move.js是一款简单的支持CSS3动画的JavaScript库,对于对CSS3的操作不是很熟悉的人来说,使用move.js提供的方法操作CSS3动画更简单方便. 要想使用move.js提供的方法,首先应在我们的HTML页面中引入move.js: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

JS的简单操作和表单以及事件

HTML:主要用于往页面上放置所需要的控件. CSS:主要用来控制页面以及上面控件的样式. JS:主要用来控制页面上的特效以及数据交互. JS也分为顺序,条件(IF()... ELSE()),循环(FOR())三种语句,与C#基本一致. JS定义变量统一用var,定义数组不固定长度和类型,类似C#中的集合. JS的简单操作: DOM操作: 一.window: 1.window.onload 页面打开完再执行后面的操作 2.window.open(1,2,3,4) - 打开新页面, 1 - 打开页

Java节点操作(JS原生+JQuery)

Java节点操作(JS原生+JQuery) 节点关系与类型 任何HTML元素,都有nodeType属性.值有1~12,常用的有: 1.元素节点 2.文本节点 8.注释节点 9.document节点(HTML文档对象) 10.DTD(文档类型定义) box.nodeType       //返回值1,获得nodeType属性 box.childNodes            //获得全部子元素 //兼容性问题 注意:在chrome,IE9 IE10高版本的浏览器里面的回车都认为是节点,IE6,7

jQuery框架使用,jq选择器,jq操作页面内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息,js/jq页面加载完毕事件,jq事件

jq选择器 // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来 box1 = $box.g