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. [MySQL][Spider][VP]Spider-3.1 VP-1.0 发布

    我很高兴的宣布 Spider 存储引擎 3.1 Beta 版本和垂直分区存储引擎 1.0 Beta 版本发布了. Spider 是数据库拆分的存储引擎: http://spiderformysql.c ...

  2. beetle.express针对websocket的高性能处理

    客户需要对websocket服务应用,其要求每秒同时给3W个在线的websocket连接进行广播消息.以下针对beetle.express扩展websocket简单的性能测试.从测试结果来看基本没什么 ...

  3. entityframework使用oracle的几个小问题

    问题一:Operation is not valid due to the current state of the object 生成的edmx文件有问题,解决方法参考链接 问题二:InvalidO ...

  4. Kylin查询性能低下原因分析

    在处理指数行情数据时(IDXD),我遇到一个KYLIN性能查询低下的问题,非常奇怪.经过一番研究发现了其中的原因并顺利解决: 症状: select count(*) from sensitop.idx ...

  5. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  6. 解决SQLSERVER数据库表被琐死!

    ) )     BEGIN   Exec (@spId)   FETCH NEXT FROM TmpCursor INTO @spId   END     CLOSE TmpCursor DEALLO ...

  7. No resource found that matches the given name 'android:Widget.Material.A解决方案

    1:首先新建空白工作区 2:先import appcompat_v7 appcompat_v7在一个类似这样的地方, C:\mywork\android\android-sdk-windows\ext ...

  8. Chrome扩展程序的二次开发:把它改得更适合自己使用

    我当然知道未经作者允许修改别人程序是不道德的了,但作为学习研究之用还是无可厚非,这里仅供交流. 一切都是需求驱动的 话说某天我在网上猎奇的时候无意间发现这么一款神奇的谷歌浏览器插件:Extension ...

  9. Git学习笔记(1)——安装,配置,创建库,文件添加到库

    初次接触git,为了记忆深刻,把学习的简单流程记录下来. 本文记录了Git在Ubuntu上的安装,配置,以及创建版本库和往库中添加文件的过程. 1.Git的安装:(Ubuntu-Linux非常友好的安 ...

  10. i++ and ++i efficiency

    其实这个问题,百度的话,有一大堆的参考资料,但是,在这里,我产生了一些困惑,他们所分析的结果,和我的测试代码不一致,这让我纠结了,所以,再次的写一下这个问题,顺顺思路. 我的测试环境:系统:Windo ...