Javascript动画效果(四)
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动画就告一段落了,后面有新的需求会继续更新~
转载于:https://www.cnblogs.com/foodoir/p/5891218.html
Javascript动画效果(四)相关推荐
- 【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
- JavaScript 动画效果
文章目录 JS动画实现 概述 匀速动画 缓速动画 无缝连续滚动特效 轮播图 轮播图淡入淡出效果 JS动画实现 概述 在CSS3中可以通过transition过渡属性可以实现动画 JS可以利用CSS3中 ...
- JavaScript 动画效果的实现(附带示例)
在学习 CSS 时我们知道,通过 CSS 可以实现简单的动画效果,但对于比较复杂的动画,使用 CSS 实现起来就会比较麻烦. 除了可以使用 CSS 来实现外,也可以使用 JavaScript 来实现. ...
- html js 动画效果,JavaScript 动画效果
使用JavaScript可以生成图像的动画效果. ----------------------- JavaScript 动画 使用JavaScript可以生成图像的动画效果,技巧是使用JavaScri ...
- Javascript动画(四):帧速率
上一节结尾说到,当小球数量增加到成千上万时,明显感觉到小球跑的慢了,这节我们来了解下为什么会这样. 帧速率 动画是由一系列叫做"帧"的图像组成的,这些图像的显示频率就叫做" ...
- javascript动画效果之透明度
在css中的filter对应老版本的ie浏览器,opacity对应的是其他浏览器 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 & ...
- html动画之制作烟花效果,JavaScript实现烟花绽放动画效果
先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Fi ...
- 使用CSS3实现超炫的Loading(加载)动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
- 利用MATLAB实现图片切换动画效果详解
内容摘要:本博文介绍MATLAB图片切换动画效果的制作以及GIF文件保存,并结合具体代码详细解释.介绍了利用MATLAB编程进行几幅图片的轮流切换,切换时实现与幻灯片切换相似的炫酷的图片切换特效.其中 ...
最新文章
- layui学习资料汇总
- 2013-12-7 在超市给思杨买东西-思杨踢球
- 正态分布||方差、均值的概念
- 直接输入地址访问服务器上的静态资源
- HBase 的存储结构
- Tomcat部署项目的几种常见方式
- [蓝桥杯]算法提高 天天向上(记忆化搜索)
- 求凸包(两遍扫描,求上下凸包的方法)
- Django-ORM数据库操作
- 信息学奥赛一本通(1315:【例4.5】集合的划分)
- 杭电 hdu 2019
- C#/WPF学习笔记:起始
- 12_首页显示热门商品和最新商品
- PMP知识点速记——4.1制定项目章程
- 网络流——基础,Dinic和Sap(Gap优化)算法
- 打印机如何取消打印任务
- 文本居中(内容居中)
- python调音_浅谈滕尼—欧氏调音与调律量度
- 根据数据库中提供的坐标(经纬度) 在前端地图上标示坐标点、并显示
- 学习强国十年磨剑最新分数及排名
热门文章
- 一维卷积filter_从零开始学Pytorch(七)之卷积神经网络
- java课程设计 mysql_Java课程设计---安装解压版mysyql
- 计算机英语考试试题一附答案,计算机英语考试试题一附答案
- java 生成pdf itext_使用Java组件itext 生成pdf介绍
- python write和writelines的区别_简单了解Python write writelines区别
- 查询两张表 然后把数据并在一起_工作表数据查询时,类似筛选功能LIKE和NOT LIKE的应用...
- java 连接 oracle 10_java 怎么把原本连接32位oracle10g换到连接64位oracle10g
- java 启动参数_网红框架SpringBoot2.x之定制参数浅析(一)
- 自贡市职称计算机考试,四川省自贡市2012年职称计算机考试时间
- Linux进程通信中IPC对象——IPC_PRIVATE与ftok