最近一直在看运动的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. Unicode与 utf8的互相转换

    <?php function unicode_encode($name) { $name = iconv('UTF-8', 'UCS-2', $name); $len = strlen($nam ...

  2. java从mysql导出数据例子

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  3. VC++深入详解-第一章学习心得(二)

    前面介绍到了注册窗口,接下来进行窗口的创建,利用CreateWindow函数,结构如下 CreateWindowExW( DWORD dwExStyle, LPCWSTR lpClassName, / ...

  4. 基于Shading Model（对光照变化一定不变性）的运动目标检测算法

    光照模型(Shading Model)在很多论文中得到了广泛的应用,如robust and illumination invariant change detection based on linea ...

  5. uva 167 - The Sultan&#39;s Successors（典型的八皇后问题）

    这道题是典型的八皇后问题,刘汝佳书上有具体的解说. 代码的实现例如以下: #include <stdio.h> #include <string.h> #include < ...

  6. linux 安装软件的地方

    用下边这个命令:mysqladmin -u root -p variables root是你的数据库帐号回车后会提示你输入密码,输入上边填写的帐号对应的密码 回车后出来一个大表,找到datadir这一 ...

  7. PHP安全外延

    接下来,我们讲一下:php语言与Apache等中间.MySQL等数据库结合使用时所产生的一些安全问题. 1.文件解析漏洞分析 2.编码注入漏洞分析 3.is_numeric漏洞分析

  8. Linux下搭建Oracle11g RAC(4)----配置oracle,grid用户SSH对等性

    虽然在安装软件的过程中,oracle会自动配置SSH对等性,建议在安装软件之前手工配置. 配置oracle用户对等性: node1: [root@node1 ~]# su - oracle node1 ...

  9. 购买SSD固态硬盘须当心，你知道什么是SLC、 MLC、TLC闪存芯片颗粒吗？

    固态硬盘凭借其存取速率超快等自身优势,被越来越多的电脑爱好者所青睐,并迅速普及到了广大用户的电脑中,因为固态硬盘与传统机械硬盘相比,确实在运行效率等方面有了质的提升,但是亦是美网络小编要提醒大家的是, ...

  10. 如何快速学习bootstrap

    bootstrap中文网http://www.bootcss.com/解决了我所有使用bootstrap的问题,从0开始,下面的全部链接都是该网站的子链接.例子http://v3.bootcss.co ...