最近一直在看运动的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 学习笔记4

    (1)      线程的强制运行 先看线程强制运行的实例 ,再解释程序中是如何让程序强制运行的 public class ThreadTest1 implementsRunnable { public ...

  2. Code Forces Gym 100886J Sockets（二分）

    J - Sockets Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Valera ...

  3. jmeter http get 登录

      登录页url:http://www.ablesky.com/login.do?fromurl=http%3A%2F%2Fwww.ablesky.com%2Findex.do 登录参数用firebu ...

  4. 有用的javascript外部文件或其他外部文件引用

    1.<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/ ...

  5. cocos2d-x 事件分发机制 ——加速计事件监听

    加速计事件监听机制 在上一篇中介绍了cocos2d-x中的触摸事件机制,这篇来介绍下游戏中也常常常使用到的加速计事件,这些都是游戏中的常常要用到的. 移动设备上一个非常重要的输入源是设备的方向.大多数 ...

  6. wpf DataGrid CheckBox列全选

    最近在wpf项目中遇到当DataGrid的header中的checkbox选中,让该列的checkbox全选问题,为了不让程序员写自己的一堆事件,现写了一个自己的自定义控件 在DataGrid的 &l ...

  7. richTextBoxBulletClass

    设置和获取选中的样式为 1. 2. 3. #region 数字序列 1. 2. 3. 4. 5. ... private bool bOrder = false; public bool Select ...

  8. Java jdbc数据库连接池总结!(转)

    1. 引言 近年来,随着Internet/Intranet建网技术的飞速发展和在世界范围内的迅速普及,计算机 应用程序已从传统的桌面应用转到Web应用.基于B/S(Browser/Server)架构的 ...

  9. Btrace

    http://www.iteye.com/topic/1005918 背景 周五下班回家,在公司班车上觉得无聊,看了下btrace的源码(自己反编译). 一些关于btrace的基本内容,可以看下我早起 ...

  10. epoll使用实例说明

    之前一直在讲如何epoll如何好用,但是并没有实例来演示epoll的使用,下面我们就看一个服务器端使用epoll监听大量并发链接的例子. 首先看一下epoll的几个函数的介绍.1.epoll_crea ...