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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
vue实现简单跑马灯效果
May 25 Javascript
VSCode 配置uni-app的方法
Jul 11 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
什么是短波收听SWL
2021/03/01 无线电
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
金讯Java笔试题目
2013/06/18 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
赞美老师的演讲稿
2014/05/22 职场文书
导游词范文
2015/02/13 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
Python中的 Set 与 dict
2022/03/13 Python
Docker安装MySql8并远程访问的实现
2022/07/07 Servers