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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
写一个Vue Popup组件
Feb 25 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
原生js+canvas实现下雪效果
Aug 02 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
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
值得收藏的10道python 面试题
2019/04/15 Python
python爬虫基础之urllib的使用
2020/12/31 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
《新型玻璃》教学反思
2014/04/13 职场文书
好的促销活动方案
2014/08/21 职场文书
规范化管理年活动总结
2014/08/29 职场文书
转学证明范本
2015/06/19 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server