Javascript动画效果(4)


Posted in Javascript onOctober 11, 2016

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

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

<div id="move">
 <a href="#"><i><img src="images/1.jpg"/></i><p>彩票</p></a>
 <a href="#"><i><img src="images/2.jpg"/></i><p>电影</p></a>
 <a href="#"><i><img src="images/3.jpg"/></i><p>点外卖</p></a>
 <a href="#"><i><img src="images/4.jpg"/></i><p>理财</p></a>
 <a href="#"><i><img src="images/6.jpg"/></i><p>找服务</p></a>
 <a href="#"><i><img src="images/7.jpg"/></i><p>音乐</p></a>
 <a href="#"><i><img src="images/8.jpg"/></i><p>水煤电</p></a>
 <a href="#"><i><img src="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的异同点,如图:

Javascript动画效果(4)

不同点:

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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
关于vue-router路径计算问题
May 10 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
JavaScript中const、var和let区别浅析
Oct 11 #Javascript
对javascript继承的理解
Oct 11 #Javascript
Javascript动画效果(3)
Oct 11 #Javascript
JavaScript实现自动切换图片代码
Oct 11 #Javascript
Javascript动画效果(2)
Oct 11 #Javascript
Javascript动画效果(1)
Oct 11 #Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 #Javascript
You might like
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
改造一台复古桌面收音机
2021/03/02 无线电
php学习之function的用法
2012/07/14 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
微信JS接口大全
2016/08/25 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
Vue实现简单分页器
2018/12/29 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
实例讲解Python中整数的最大值输出
2019/03/17 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python sep参数使用方法详解
2020/02/12 Python
基于python实现对文件进行切分行
2020/04/26 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
儿园租房协议书范本
2014/12/02 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
2015年防汛工作总结
2015/05/15 职场文书
校园安全主题班会
2015/08/12 职场文书
导游词之无锡东林书院
2019/12/11 职场文书