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 相关文章推荐
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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 PDO函数库详解
2010/04/27 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
JavaScript中的面向对象介绍
2012/06/30 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
学校运动会广播稿
2014/10/11 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
活动经费申请报告
2015/05/15 职场文书
初中物理教学反思
2016/02/19 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers