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


Posted in Javascript onApril 10, 2015

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

Javascript 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 #Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 #Javascript
js简单的点击返回顶部效果实现方法
Apr 10 #Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 #Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 #Javascript
JavaScript 变量、作用域及内存
Apr 08 #Javascript
JavaScript Function函数类型介绍
Apr 08 #Javascript
You might like
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python psutil模块简单使用实例
2015/04/28 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
二年级上册数学教学计划
2015/01/20 职场文书
政协常委会议主持词
2015/07/03 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers