js实现类似jquery里animate动画效果的方法

87374459 2015-04-10

本文实例讲述了js实现类似jquery里animate动画效果的方法。分享给大家供大家参考。具体分析如下：

该实例可实现鼠标移上，先宽度变化，再高度变化，最后透明度变化，鼠标移出，再依次变回去的效果。

要点一：

startrun(obj,attr,target,fn)
box.onmouseover = function(){
startrun(box,"width",200,function(){
startrun(box,"height",200,function(){
startrun(box,"opacity","100")
});
});
}

如上面，函数也可以做为参数使用，就可以达到先执行某个动作，再执行某个动作的效果了。

要点二：

if(cur == target){
clearInterval(obj.timer);
if(fn){
fn();
}
}

当运动到达目标点，关闭定时器，然后就可以执行新的函数了。

最后，上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body{margin:0; padding:0; font:12px/1.5 arial;}
#box{width:100px; height:100px; position:absolute;
background:#06c; left:0;filter:alpha(opacity=30); opacity:0.3;}
-->
</style>
<script>
<!--
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
window.onload = function(){
 var box = document.getElementById("box");
 box.onmouseover = function(){
  startrun(box,"width",200,function(){
   startrun(box,"height",200,function(){
    startrun(box,"opacity","100")
   });
  });
 }
 box.onmouseout = function(){
  startrun(box,"height",100,function(){
   startrun(box,"width",100,function(){
    startrun(box,"opacity","30");
   });
  });
 }
}
function startrun(obj,attr,target,fn){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var cur = 0;
  if(attr == "opacity"){
   cur = Math.round(parseFloat(getstyle(obj,attr))*100);
  }else{
   cur = parseInt(getstyle(obj,attr));
  }
  var speed = (target-cur)/8;
  speed = speed>0?Math.ceil(speed):Math.floor(speed);
  
  if(cur == target){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }else{
   if(attr == "opacity"){
    obj.style.filter = "alpha(opacity="+(cur+speed)+")";
    obj.style.opacity = (cur+speed)/100;
   }else{
   obj.style[attr] = cur + speed + "px";
   }
  }
 },30)
}
//-->
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

87374459

87374459

相关推荐

56-58-前端-jQuery

python导入模块发生了哪些事？"""我不想下载jQuery文件 能不能使用呢？w.fn.init [p.c1, prevObject: w.fn.init]0: p.c1length: 1prevObject: w.fn.

tztzyzyz / 0评论 2020-07-05

jquery-实现加入购物车效果

jquery中提供了很多方便的方法，本案例使用jquery的动画、获取鼠标手机位置、创建dom以及删除dom等方法，实现加入购物车，即点击当前物品滑入购物车

87281248 / 0评论 2020-07-04

jQuery基础

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。它包含以下功能：1、HTML元素选取；2、HTML元素操作；3、CSS操作；4、HTML事件函数；5、JavaScript特效和动画；6、HTML DOM遍历和修改；

tztzyzyz / 0评论 2020-05-31

《jQuery基础教程_李松峰译_带书签》高清pdf下载链接

本书由jQuery API网站维护者亲自撰写，第一版自2008上市以来，一版再版，累计重印14次，是国内首屈一指的jQuery经典著作！作为最新升级版，本书涵盖jQuery 1.10.x和jQuery 2.0.x。本书前6章以通俗易懂的方式讲解了jQuer

81463166 / 0评论 2020-05-17

很有点意思的特效，本人很喜欢

jquery图片对联广告制作jQuery侧面浮动图片广告点击》jquery图片对联广告制作jQuery侧面浮动图片广告jquery浮动对联图片广告制作一个侧面浮动图片广告特效，类似滚屏效果的图片广告。id=c1ch0cb0jjQuery幻灯片图片切换制作F

81463166 / 0评论 2020-05-16

分享一些经典的特效效果,希望对大家有帮助

id=2cjibhjaajquery单排图片切换效果，通过左右按钮点击单排图片切换，且带分页数提示，支持自动切换。适用于各大商城产品图片切换展示。id=2cj12chhjjquery制作两种查看原图按钮收缩展开，隐藏关闭。比较实用的的图片查看jQuery网

donghongbz / 0评论 2020-05-15

jQuery 简介

jQuery 库可以通过一行简单的标记被添加到网页中。如果您需要首先学习这些科目，请在我们的 首页 查找这些教程。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。目前网络上有大量开源的 JS 框架, 但是 jQue

89510194 / 0评论 2020-05-15

jQuery 效果- 隐藏和显示

隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！简单的jQuery hide()方法演示。可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参

donghongbz / 0评论 2020-05-15

jQuery三组基本动画与自定义动画操作实例总结

本文实例讲述了jQuery三组基本动画与自定义动画操作。分享给大家供大家参考，具体如下：。jQuery提供了三组基本动画，分别是显示与隐藏、淡入与淡出、滑入与画出，这三组基本动画都是标准的、有规律的的效果，jQuery还提供了一个自定义动画。固定字符串，s

88284453 / 0评论 2020-05-09

jquery实现手风琴案例

<!DOCTYPE html>. margin: 0;padding:0;width: 500px;height:250px;width: 900px;height: 300px;margin: 20px auto;border: 1px so

GDYG / 0评论 2020-05-04

分享一些经典的特效效果,希望对大家有帮助

id=j22ibc12jjquery图片滤镜特效插件轻松实现颜色不断渐变。jQuery slide焦点图片滚动插件仿京东商城首页焦点图片滚动轮播点击》jQuery slide焦点图片滚动插件仿京东商城首页焦点图片滚动轮播京东商城顶部幻灯片。jQuery图片

88570299 / 0评论 2020-05-12

分享一些酷酷的特效，希望你也能够喜欢

js动态创建table点击按钮dom table tr添加操作 (原创)点击》js动态创建table点击按钮dom table tr添加操作 (原创)表单添加，修改，删除，全选，反选。jquery简单的鼠标悬停按钮显示浮动提示框效果代码点击》jquery简

89510194 / 0评论 2020-05-07

珍藏了很久的特效例子，分享给前端感兴趣的同学

id=bh2k12h0j同时适应手机端与pc端的轮播代码。jQuery ui制作web qq登录界面代码_webqq登录桌面代码点击》jQuery ui制作web qq登录界面代码_webqq登录桌面代码js实现立体式界面灵活拖拽。id=bhcjk0bbb

tthappyer / 0评论 2020-05-04

开发中经常用到的特效效果

jQuery选项卡形式图片瀑布流布局选项卡切换效果代码点击》jQuery选项卡形式图片瀑布流布局选项卡切换效果代码。简洁网站后台表单下载_会员注册登录后台提交表单html下载点击》简洁网站后台表单下载_会员注册登录后台提交表单html下载。jQuery带缩

80437916 / 0评论 2020-05-03

很有点意思的特效，本人很喜欢

id=ijkkbbkaajQuery分页按钮控制文字列表切换，当鼠标悬浮文字列表时滑动效果。id=i2ahbiakjjQuery自定义时间轴，响应式时间轴，时间轴样式。id=i2a00k0jbjQuery美化单选框，美化textarea，评论表单代码，星级

牵手白首 / 0评论 2020-04-29

很有点意思的特效，本人很喜欢

id=hkbkk0ikjjQuery css3图片动画效果。jQuery自定义图片上做标记代码点击》jQuery自定义图片上做标记代码jQuery图片标注，图片做标记效果。id=hk10ic12jjs选择div区块，点击鼠标右键弹出菜单效果。id=hk1b

80437916 / 0评论 2020-04-25

对前端特效感兴趣的同学可以留意下这些例子，有点意思

js简单的注册表单密码验证代码点击》js简单的注册表单密码验证代码js简单的注册表单验证，支持会员名称验证，表单密码验证，确认密码验证代码。id=hki0ihbibjQuery、jqGrid列表详细页表格布局，生成表格内容，表格查询代码。id=hkibc2

89463661 / 0评论 2020-04-25

很有点意思的特效，本人很喜欢

id=hbihch22jjQuery鼠标悬停div容器框，线条边框动画效果。id=hbi0ibkaajQuery根据文章内容自动生成目录索引导航菜单，点击导航锚点页面滚动到相应的文章内容效果代码。id=hbibjcakjjQuery表格插件制作左右两侧固定

83510998 / 0评论 2020-04-21

jQuery快速入门

<1>jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。<2>jQuery是继prototype之后又一个优秀的Javascript框架。<4>jQue

89463661 / 0评论 2020-04-19

详解jQuery动画

隐藏显示切换 标签对象.fadeToggle()参数1: 毫秒 也就是动画的执行时间参数2: 运动的方式 linear 线性参数3: 回调函数 当运动结束时,执行的函数程序

83510998 / 0评论 2020-03-26

jQuery 源码解析(三十一) 动画模块 便捷动画详解

jquery在$.animate()这个接口上又封装了几个API，用于进行匹配元素的便捷动画，如下:. $.hide ;如果被选的元素已被显示，则隐藏该元素。$.slideToggle; ;在 slideDown() 与 slideUp() 方法之

小仙儿 / 0评论 2020-02-23

jQuery---文档操作

<!DOCTYPE html>. height: 100px;position: fixed;right: 15px;bottom: 15px;background-color: #336699;display: none;

82550495 / 0评论 2020-02-20

jQuery动画效果之滑入滑出slideDown,slideUp

<!

82550495 / 0评论 2020-02-19

jQuery动画效果之fadeIn,fadeOut（淡入淡出）

<!

89463661 / 0评论 2020-02-19

jQuery 实例

演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。演示 jQuery jQuery click() 事件.演示jQuery hide() 和 show() 方法。另外一个隐藏文本的实例。演示如何在 jQuery animate() 方

牵手白首 / 0评论 2020-02-18

GitHub已完全弃用jQuery，问题是为什么？

最近，我们将 jQuery 完全从 GitHub.com 的前端代码中移除了，这标志着我们数年来逐步移除 jQuery 这个渐进式的过程终于结束了，这对我们来说是一件里程碑式的事件。这篇文章将介绍过去我们是如何依赖上 jQuery 的，随着时间地推移，我们

小仙儿 / 0评论 2020-02-18

jQuery学习-w3cschool-(1)jQuery 教程

使用 Google 的 CDN引入jQuery库：。jQuery 库包含以下特性：。jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。//若将jq库文件放在body底

小仙儿 / 0评论 2020-02-09

jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

tthappyer / 0评论 2020-01-23

jQuery---停止动画详解 stop();

停止动画详解 stop();<!DOCTYPE html>. width: 400px;height: 400px;background-color: pink;display: none;$("div").slideDow

89463661 / 0评论 2020-01-17

210 jQuery淡入淡出：fadeIn() 、fadeOut() 、fadeToggle() 、fadeTo()

淡入淡出动画，常见有四个方法：fadeIn() 、fadeOut() 、fadeToggle() 、fadeTo()

donghongbz / 0评论 2020-01-16

jQuery 操作

js对象与jQery对象相互转换：jQ==>JS: $[0] JS==>jQ: $. 简单的说 就是JS的封装版，它简化了js的操作。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Aj

牵手白首 / 0评论 2020-01-02

jQuery 动画

jQuery animate() 方法用于创建自定义动画。必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 c

81463166 / 0评论 2020-01-08

Jquery基础（动画效果的轮播图特效）

var python = allLis.filter; //返回带有类名 " python‘"

81463166 / 0评论 2020-01-04

jQyery简史和下载引用方法

jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API，使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。2013年jqu

89463661 / 0评论 2019-12-21

Jquery

hover() 用于模拟光标悬停,移上去触发mouseenter，离开触发mouseleave. focus()获得焦点，blur()失去焦点。callback:可选,隐藏或显示完成后所执行的函数名。可用toggle()切换hide()和show()方法。

81463166 / 0评论 2019-12-22

jQuery

　　jQuery是js的一个工具库，由John Resig在2006年发布。j代表JavaScript，query是“查询”的意思。也就是说，这个库的意图是基于JavaScript的查询。答案是DOM结构中的Node（节点）。一个网页就是一个html文档，

donghongbz / 0评论 2019-12-09

jquery animate()方法 语法

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画。大理石平台怎么样字符串值无法创建动画（比如 " padding: 0px 10px; -webkit-tap-highl

89463661 / 0评论 2019-12-04

jQuery弹出层登录和全屏注册表单

jQuery弹出层登录和全屏注册表单，这是一款很漂亮的jQuery登录和注册表单，点击登录时弹出一个登录窗口并伴随动画效果，注册页面则是全屏显示，非常时尚的jQuery表单。<meta name="viewport" conten

suis / 0评论 2014-01-13

jQuery实现的书本翻页动画效果源码

jQuery书本翻页动画效果，这是一款基于jQuery的书本翻页特效，这款翻页插件非常适合你应用在在线阅读上，这个翻页插件可以让用户有真实的阅读感觉。

EdwardSiCong / 0评论 2013-07-02

jquery的tab插件封装

jquery插件的封装过程。使用过很多的jquery的插件，但是不了解它们到底是怎样做的，今天就来封装一个最常见的tab插件，看看具体的封装过程。常见的tab支持自动切换，点击切换，动画切换，默认选择等等，根据这些功能先来把html结构搭建起来：。body

88570299 / 0评论 2019-11-19

jQuery之模拟实现$().animate()（上）

<!DOCTYPE html>. <div id="A" style="width:100px;height:50px;background-color: deeppink">这是A</

suis / 0评论 2019-11-16

jQuery源码解析之$.queue()、$.dequeue()和jQuery.Callbacks()

作用2：作为getter，取出特定队列中function(){}的数组。如果是 fx 动画，并且队头没有inprogress锁的话，就执行jQuery.dequeue()方法。// Not public - generate a queueHooks ob

Jensony / 0评论 2019-11-16

前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂，本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。前面我们已经基本掌握常规的语法语义，以及基本

sunnylin / 0评论 2019-11-16

jQuery源码解析之$().animate()（上）

// Operate on a copy of prop so per-property easing won't be lost. var opt = speed && typeof speed === "object"

LingPF / 0评论 2019-11-08

另外一款超棒的响应式布局jQuery插件 – Freetile.js

我们曾经介绍过俩款知名的响应式布局插：isotope和masonary，今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js，使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢！Freetie来自于Assemblage 和 As

81497307 / 0评论 2014-05-31

jQuery带动画效果的二级下拉导航

<!</style><script type="text/javascript">$(function(){ Menu(".nav_list");});

李应鹏 / 0评论 2011-07-10

Jquery中的动画

Jquery中的任何动画效果都可以指定三种速度参数，即”slow“”normal“”fast“时间长度分别为0.6s 0.4s 0.2s 的那个是用速度关键字是需要加上引号。只改变元素的不透明度。fadeOut（）方法会在指定的一段时间内降低元素的不透明度

donghongbz / 0评论 2019-11-05

【JQuery】（1）JQuery基础

除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。目前，在百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

小仙儿 / 0评论 2019-11-03

菊花转动的jquery加载动画效果

-- 添加jq的loading插件-->

85453862 / 0评论 2018-08-19

JQuery

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。一款轻量级的JS框架。jQuery核

tthappyer / 0评论 2019-10-23