最近一直在看运动的JS特效，主要看的是原生写法，太麻烦了，最终看到写了个运动的方法，后面可以直接引用，然后发现这个方法和jQ其实差不多了，代码分别如下：

　　基本的HMTL和CSS

　　

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>原生、jQ和CSS3运动模块</title>

</head>

<style type="text/css">

div{border: 1px solid red;margin: 20px;height: 100px;width:100px;background-color:pink;opacity:1;}

</style>

<body>

    <div id='div1'>

    </div>

    <div id='div2'>

    </div>

    <div id='div3'>

    </div>

</body>

一、原生JS写法

//原生写法

window.onload=function(){

    var div11=document.getElementById('div1');

    var div21=document.getElementById('div2');

    var div31=document.getElementById('div3');

    div11.onmouseover=function()

    {startMove(div11,'height',200);};

    div21.onmouseover=function()

    {startMove(div21,'width',200);};

    div31.onmouseover=function()

    {startMove(div31,'opacity',100);};

    div11.onmouseout=function()

    {startMove(div11,'height',100);};

    div21.onmouseout=function()

    {startMove(div21,'width',100);};

    div31.onmouseout=function()

    {startMove(div31,'opacity',30);};

};

function getStyle(obj, attr)

{

    if(obj.currentStyle)

    {

        return obj.currentStyle[attr];

    }

    else

    {

        return getComputedStyle(obj, false)[attr];

    }

}

//function getStyle(obj, attr) {

//    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];

//}

//运动框架

function startMove(obj, attr, iTarget)

{

    clearInterval(obj.timer);

    obj.timer=setInterval(function (){

        var iCur=0;

        if(attr=='opacity')

        {

            iCur=parseInt(parseFloat(getStyle(obj, attr))*100);

        }

        else

        {

            iCur=parseInt(getStyle(obj, attr));

        }

        var iSpeed=(iTarget-iCur)/8;

        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

        if(iCur==iTarget)

        {

            clearInterval(obj.timer);

        }

        else

        {

            if(attr=='opacity')

            {

                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';

                obj.style.opacity=(iCur+iSpeed)/100;

            }

            else

            {

                obj.style[attr]=iCur+iSpeed+'px';

            }

        }

    }, 30)

}

二、jQ写法

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $().ready(function(){

        $('#div1').mouseover(function(){

            $(this).animate(

                    {width:'200px'},"slow"

            );

        });

        $('#div2').mouseover(function(){

            $(this).animate(

                    {height:'200px'},"slow"

            );

        });

        $('#div3').mouseover(function(){

            $(this).animate(

                    {opacity:'1'},"slow"

            );

        });

        $('#div1').mouseout(function(){

            $(this).animate(

                    {width:'100px'},"slow"

            );

        });

        $('#div2').mouseout(function(){

            $(this).animate(

                    {height:'100px'},"slow"

            );

        });

        $('#div3').mouseout(function(){

            $('#div3').animate(

                    {opacity:'0.3'},"slow"

            );

        })

    })

</script>

三、CSS3写法

#div2{transition:height 2s 2s;}

#div1{transition:width 2s;}

#div3{transition: opacity 2s;-moz-transition:opacity 2s;-webkit-transition:opacity 2s;-o-transition:opacity 2s;}

#div1:hover{width: 200px;}

#div2:hover{height: 200px;}

#div3:hover{  opacity:; filter: alpha(opacity=0);}

对比可以看出还是CSS3方法比较合适，通过原先的学习下原理，复杂的运动模式用jQ,最优的选用CSS3（不考虑低版本IE的兼容性的情况下）。

CSS3已经支持IE10及以上的版本。

动画特效的原生、jQ和CSS3方法的更多相关文章

  1. css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用

    <!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...

  2. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  3. 利用CSS3实现div页面淡入动画特效

    利用CSS3实现页面淡入动画特效   摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...

  4. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  5. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  6. 9种CSS3炫酷图片展开预览展示动画特效

    详细内容请点击 在线预览立即下载 这是一组共9款CSS3炫酷图片预览展示动画特效插件.css的新特性可以让我们制作出各种炫酷的动画效果.该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在 ...

  7. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  8. CSS3和js炫酷点击按钮3D翻转动画特效

    简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览   源码下载 ...

  9. 简单的CSS3鼠标滑过图片标题和遮罩层动画特效

    此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有!   这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...

随机推荐

  1. Java程序员25个必备的Eclipse插件

    原文:http://www.fromdev.com/2012/01/25-best-free-eclipse-plug-ins-for-java.html "工欲善其事, 必先利器" ...

  2. Web开发，如何从小工到专家

    最近在研读关于“整体性学习”的一些东西,收获颇丰. 整体性学习强调的东西有三样:结构.模型.与高速通道.特别是关于结构的篇章: 理解是什么?理解就是结构高度发达完善的结果. 是不是有些学科你可以轻松“ ...

  3. liunx shell数字相加

    #!/bin/bash num1= num2= num3= #echo $($num1+$num2+$num3)#错误写法 echo $[$num1+$num2+$num3] echo $(($num ...

  4. Altium Designer6打印PCB 设置

    1.File-->Page Setup     Printer Paper一栏是打印纸的设置,不再罗嗦.     主要是Scaling一栏:ScaleMode项选择:ScaledPrint    ...

  5. 校友信息管理&SNS互动平台之技术框架选择

    前言.提纲及说明: 请移步:<校友信息管理&SNS互动平台之前言.目录及说明>(博客园地址:http://www.cnblogs.com/s6cn/p/3516876.html) ...

  6. requireJS(二)

    一.前言 requireJS(一) 本篇主要整理requirejs的一些用法,相对比较零散. 实例目录 二.优化 requirejs建议我们给每一个模块书写一个js文件.但是这样会增加网站的http请 ...

  7. HTML里面Textarea换行总结

    近期碰到一个数据转来转去转到Textrea里面能否真正按行存放的问题,在这里总结一下:   问题描写叙述: 比方get数据到一个TextArea里面,如“AAA BBB”,想把这段文字在TextAre ...

  8. ubuntu权限管理常用命令 分类： linux ubuntu 学习笔记 2015-07-05 14:15 77人阅读 评论(0) 收藏

    1.chmod 第一种方式 chomd [{ugoa}{+-=}{rwx}] [文件或者目录] u 代表该文件所属用户 g 代表该文件所属用户组 o 代表访客 a 代表所有用户 +-=分别表示增加权限 ...

  9. Windows Server 2008中关闭事件跟踪程序的方法

    Windows Server 2008跟Windows Server 2003一样,在关机的时候会弹出一个“关闭事件跟踪程序”窗口,当然微软这么做是处于安全的考虑啦,但是如果我们只是个人用用的话,那就 ...

  10. Hadoop书籍汇总

    <Hadoop实战>陆嘉恒 <Hadoop - The Definitive Guide>Tom White,中文版<Hadoop权威指南> <Hadoop技 ...