脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现类似jquery里animate动画效果

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

 更新时间：2015年04月10日 09:30:46   作者：jingangel  
这篇文章主要介绍了js实现类似jquery里animate动画效果的方法,实例分析了javascript模拟实现jQuery中animate动画效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Code：loadScript( )加载js的功能函数

    Code：loadScript( )加载js的功能函数

    Code：loadScript( )加载js的功能函数...
    2007-02-02
  • javascript Array对象基础知识小结

    javascript Array对象基础知识小结

    感觉自己对Array对象总是有种朦胧的感觉，今天自己手写总结，加深一下印象。
    2010-11-11
  • JavaScript实现获取用户单击body中所有A标签内容的方法

    JavaScript实现获取用户单击body中所有A标签内容的方法

    这篇文章主要介绍了JavaScript实现获取用户单击body中所有A标签内容的方法,涉及javascript针对页面元素及事件响应相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • 如何利用JS检查元素是否在视口内

    如何利用JS检查元素是否在视口内

    这篇文章主要给大家介绍了关于如何利用JS检查元素是否在视口内的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • javascript设计模式Constructor（构造器）模式

    javascript设计模式Constructor（构造器）模式

    这篇文章主要为大家详细介绍了javascript设计模式Constructor（构造器）模式 ，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript多功能甘特图组件jsGantt详解

    JavaScript多功能甘特图组件jsGantt详解

    jsGantt是一个可定制的、灵活的、多语言的甘特图组件，由原生 JavaScript构建，它使用客户端渲染以获得快速的性能和动态的交互性，非常适用于任何需要交互式时间线或时间表显示的项目，本文就给大家介绍一下JavaScript多功能甘特图组件jsGantt
    2023-07-07
  • DOM_window对象属性之--clipboardData对象操作代码

    DOM_window对象属性之--clipboardData对象操作代码

    clipboardData 对象提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。
    2011-02-02
  • 基于JavaScript构建高级视频播放器

    基于JavaScript构建高级视频播放器

    这篇文章主要为大家详细介绍了如何基于JavaScript构建高级视频播放器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • JavaScript实现平滑滚动效果

    JavaScript实现平滑滚动效果

    页面平滑滚动是网页一种常见的效果,平滑滚动的原理其实很简单,无非就是让页面一种肉眼可见的速度从当前位置滚动到指定位置,那如何用原生的JS实现这也效果呢？本文给大家介绍了JavaScript实现平滑滚动效果,需要的朋友可以参考下
    2024-06-06
  • Taro集成Redux快速上手的方法示例

    Taro集成Redux快速上手的方法示例

    这篇文章主要介绍了Taro集成Redux快速上手的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论