最近一直在看运动的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. Linux达人养成计划1（第2章 Linux系统安装）

    2.3 系统分区之分区与格式化 1. 分区类型 主分区:最多只能有四个. 扩展分区: 最多只能有1个. 主分区加扩展分区最多有4个. 不能写入数据,只能包含逻辑分区. 逻辑分区: 2. 格式化(高级格 ...

  2. Android基于XMPP Smack Openfire下学习开发IM(六)总结

    不管学习什么都应该总结 这里我把关于Xmpp的一些方法整理到一个工具类中了 我就分享给大家 XmppConnection.java package com.techrare.utils; import ...

  3. 高级IO复用应用：聊天室程序

    简单的聊天室程序:客户端从标准输入输入数据后发送给服务端,服务端将用户发送来的数据转发给其它用户.这里采用IO复用poll技术.客户端采用了splice零拷贝.服务端采用了空间换时间(分配超大的用户数 ...

  4. Android中利用OpenMax 编程的基本流程

    近期因为公司在做数字电视,播放器和模块由供应商打包一起卖,驱动调通了,但是播放器要硬件解码,和平台差异,原厂又没有相关文档,就自己试着看了一个系统的播放器流程,顺便整理了一下,也方便以后查询,希望对播 ...

  5. Android中应用程序如何获得系统签名权限

    有些库的使用条件比较苛刻,要求同一签名的程序才可以获得访问权.此时即便是在AndroidManifest.xml中添加了相应的permission,依旧会得到没有xx访问权限的问题.比如android ...

  6. JS家的排序算法

    由于浏览器的原生支持(无需安装任何插件),用JS来学习数据结构和算法也许比c更加便捷些.因为只需一个浏览器就能啪啪啪的调试了.比如下图我学习归并排序算法时,只看代码感觉怎么都理解不了,但是结合chro ...

  7. Spring XD 1.1 M2 and 1.0.3 released---support kafka

    官方地址:http://spring.io/blog/2014/12/23/spring-xd-1-1-m2-and-1-0-3-released On behalf of the Spring XD ...

  8. Visual Studio 调试技巧 （三） -- 调试第三方组件代码

    上次我们提到,没有源代码而且没有调试符号,我们也可以 Debug.有人可能会问,我什么时候需要在这种情况下调试吗?! 是的.比方说,我们用了某些第三方的组件,这些组件里面难免也会有 Bug.就算是微软 ...

  9. safe_mode（php安全模式）

    简单说,PHP安全模式就是以安全模式运行php. php的安全模式提供一个基本安全的共享环境,在一个有多个用户帐户存在的php开放的web服务器上.当一个web服务器上运行的php打开了安全模式,那么 ...

  10. boost.log要点笔记

    span.kw { color: #007020; font-weight: bold; } code > span.dt { color: #902000; } code > span. ...