Javascript动画效果(四)

前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果。我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢?

首先我们我们完成该效果的html和css代码,代码如下:

html部分代码:
<div id="move">
<a href="#"><i><img src="data:images/1.jpg"/></i><p>彩票</p></a>
<a href="#"><i><img src="data:images/2.jpg"/></i><p>电影</p></a>
<a href="#"><i><img src="data:images/3.jpg"/></i><p>点外卖</p></a>
<a href="#"><i><img src="data:images/4.jpg"/></i><p>理财</p></a>
<a href="#"><i><img src="data:images/6.jpg"/></i><p>找服务</p></a>
<a href="#"><i><img src="data:images/7.jpg"/></i><p>音乐</p></a>
<a href="#"><i><img src="data:images/8.jpg"/></i><p>水煤电</p></a>
<a href="#"><i><img src="data:images/9.jpg"/></i><p>火车票</p></a>
</div> css部分代码:
*{ margin: 0; padding: 0; }
#move{ padding: 10px; width: 400px; background-color: #f4f4f4; margin: 10px auto; border: 1px solid #ccc; border-radius: 10px; }
#move a{ color: #3c3c3c; display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; margin: 10px 17px; position: relative; padding-top: 40px; font-size: 12px; text-decoration: none; line-height: 25px; overflow: hidden; }
#move a i{ position: absolute; top: 10px; left: 0; display: inline-block; width: 100%; text-align: center; fliter:alpha(opacity=100); opacity:1; }
#move a p{ text-align: center; } #move a:hover{ color: #F40; }
#move img{ border: none; }

【用自制动画js插件来实现】

首先我们应该引入我们的插件:foodoir.animate.js,然后我们就可以写我们想要的动画效果了,代码如下:

window.onload = function() {
var oMove = document.getElementById('move');
var oA = oMove.getElementsByTagName('a');
for(var i = 0; i < oA.length; i++) {
oA[i].onmouseenter = function() {
var _this = this.getElementsByTagName('i')[0];
startMove(_this, {
top: -15,
opacity: 0
}, function() {
_this.style.top = 20 + 'px';
startMove(_this, {
top: 10,
opacity: 100
});
});
}
}
};

注意:在这里我们用的是onmouseenter代替onmouseout,目的是防止鼠标事件的多次触发。另外在执行后一个函数之前,我们先让i的位置到top:20px位置处,这样我们看到的将是滚动效果,代码:_this.style.top = 20 + 'px';

【用jquery框架来实现】

我们引入官方jquery框架后,写如下代码:

$(document).ready(function() {
$('#move a').mouseenter(function() {
$(this).find('i').animate({
top: "-15px",
opacity: "0"
}, 300, function() {
$(this).css({
top: "20px"
})
$(this).animate({
top: "10px",
opacity: "1"
}, 200)
})
})
})

下面我们通过一张图片来比较jquery和原生js的异同点,如图:不同点:

1、两种方法的加载方式的写法不同,在jquery中是$(document).ready(),而在原生js中是window.onload = function(){};

2、由于jquery对很多方法进行了封装,二者间获取元素的方法也不同,在jquery中是$(...),而在原生js中是DOM操作符来获取;

3、紧跟着jquery通过$(this).find('i')函数就将所有需要改变的i得到了,在原生js中,我们还需要通过for方法来遍历所需要的i;

4、在jquery中是mouseenter后接函数,然户在函数中获取i然后对i进行相应操作(我们所看到的代码中好像不涉及操作是否对应了具体的i),而在原生js中是先获取到‘i’,然后进行onmouseenter事件,其对应的是一个函数,且在当前函数中要进一步获取到具体的i;

5、在jquery中是通过animate函数来控制动画,这个是jquery封装好的,而在原生js中是通过startMove函数来控制动画,而startMove使我们自己封装在foodoir.animate.js的一个函数;

6、虽然都是用json传值,但是传的值不一样(比如说带单位和没带单位),这个就跟我们自己封装的插件有关;

7、在jquery中,还多了一个数值300(200),这个在jquery中表示速度,而我们的插件中,直接对速度也进行了封装,如果我们再要去改变运动的速度,我们需要自己在foodoir.animate.js中修改;

相同点:

1、都是在页面加载完后进行

2、对于同时运动,都是采用json传值

小结:在这,我们能很明显的看到,写jquery代码比原生js代码少,且要方便很多。以后可以先研究原生js的实现方法,再去思考jquery为什么要这样去实现,这样学的更快,了解的东西越多,出错的概率也会减少。其次就是对于我们之前的插件,与jquery进行比较后觉得还有很多需要改进的地方。

在这里我们的Javascript动画就告一段落了,后面有新的需求会继续更新~

Javascript动画效果(四)的更多相关文章

  1. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  2. Javascript动画效果(一)

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  3. Javascript动画效果(二)

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  4. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  5. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  6. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  7. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

  8. javascript动画效果

    之前工作项目中,运用了缓动动画的效果,在网上看到其他大牛写的相关公式,结合工作需要,进行了整理,拿出来跟大家分享下,js代码中,只运用了一个小功能进行了测试 <!DOCTYPE html> ...

  9. javascript动画效果之任意效果任意值

    通过学习,我发现当同一个ul下的li标签如果想要不同的效果,那怎么办? 比如第一个li是width变化,第二个li为透明度(opacity)变化,而opacity的值和width的值类型不同,不能通用 ...

随机推荐

  1. 浏览器 onbeforeunload 事件 兼容写法

    window.onbeforeunload = onbeforeunload_handler; function onbeforeunload_handler() { var warning = &q ...

  2. vCPU估算的几个基本概念

    物理CPU数量:实际服务器插槽上的CPU个数: 核:一块CPU上面能处理数据的芯片组的数量: 超线程:在一个实体芯片组中提供两个逻辑线程: 逻辑CPU数量:物理CPU数量*核*超线程(若支持超线程,该 ...

  3. dojo/dom-style样式操作学习笔记

    基础总结 一个元素的样式信息由三个来源根据层叠规则确定.三个来源分别是: 由DOM元素style特性设置的内联样式 由style元素中嵌入的样式规则 由link元素引入的外部样式表 元素的样式 任何支 ...

  4. Spring AOP在函数接口调用性能分析及其日志处理方面的应用

    面向切面编程可以实现在不修改原来代码的情况下,增加我们所需的业务处理逻辑,比如:添加日志.本文AOP实例是基于Aspect Around注解实现的,我们需要在调用API函数的时候,统计函数调用的具体信 ...

  5. 第二次作业:Github的优点和缺点

    ---恢复内容开始--- GitHub的优势和劣势 简介: Github是一个代码托管平台和开发者社区,开发者可以在Github上创建自己的开源项目并与其他开发者协作编码.创业公司可以用它来托管软件项 ...

  6. 使用ACE_Get_Opt解析命令行

    当我们用C++开发一些C++控制台小工具时,会需要一些用户输入的参数来决定程序如何工作和执行,而用户输入参数的方式大部分都是采用命令行参数的方式. 比如上一篇文章 玩转Windows服务系列--命令行 ...

  7. Android自定义View的构造函数

    自定义View是Android中一个常见的需求,每个自定义的View都需要实现三个基本的构造函数,而这三个构造函数又有两种常见的写法. 第一种 每个构造函数分别调用基类的构造函数,再调用一个公共的初始 ...

  8. Oracle日期时间函数大全

    ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02 13:45:25为例) Year: yy two digits 两位年 显示值:07 yyy three digits ...

  9. WebApi系列~基于单请求封装多请求的设计

    回到目录 怎么说,单请求封装多请求,这句话确实有点绕了,但还是要看清楚,想明白这到底是怎么一回事,单请求即一次请求(get,post,put,delete),封闭多请求,即在客户端发送的一个请求中可能 ...

  10. 状态栏 a.getBoolean(1, false) 报错

    状态栏 a.getBoolean(1, false) 报错 这个错误在编译运行时候并不会出现,但是当需要编译打包的时候,就会报出这个异常. TypedArray a = mContext.obtain ...