最近一直在看运动的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. Yii快速入门教程

    Ⅰ.基本概念一.入口文件入口文件内容:一般格式如下:<?php$yii=dirname(__FILE__).'/../../framework/yii.php';//Yii框架位置$config ...

  2. Java多线程——Executors和线程池

    线程池的概念与Executors类的应用 1.创建固定大小的线程池 package java_thread; import java.util.concurrent.ExecutorService; ...

  3. phpstudy配置虚拟主机

    配置 phpstudy 虚拟主机 1在httpd.conf中  把#Include conf/extra/httpd-vhosts.conf前面的#去掉 2在站点域名管理 添加 要配置的 虚拟主机 添 ...

  4. STL源码剖析之_allocate函数

    SGI STL提供的标准std::allocator中的_allocate函数代码如下: template<class T> inline T* _allocate(ptrdiff_t s ...

  5. Stackdump: 一个可以离线看stackoverflow的工具

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Stackdump: 一个可以离线看stackoverflow的工具.

  6. linux系统编程：进程间通信-mmap

    进程间通信-mmap #include <sys/mman.h> void *mmap(void *addr, size_t length, int prot, int flags, in ...

  7. 空格&amp;nbsp在不同浏览器中显示距离不一致问题解决方法

      在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同. 网上资料说不同的浏览器会有不同的默认字体.一般 IE默认字体都是宋体,而firefox和chrome的默 ...

  8. Show Global Status 整理

    原文来源:MySQL 5.5 Reference Manual 部分翻译取自:<MySQL_5.1中文参考手册> 转载请注明原文链接http://www.cnblogs.com/lenag ...

  9. atlassian-jira-confluence-bitbucket破解

    ==================================================================================================== ...

  10. python 验证码

    python写的验证码小程序 ##################验证码,数字+字母 import random check_code="" for i in range(6): ...