javascript运动框架用法实例分析(实现放大与缩小效果)

本文实例讲述了javascript运动框架用法。分享给大家供大家参考，具体如下：

该运动框架可以实现多物体任意值运动

运行效果截图如下：

例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>运动框架</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
 startMove(oDiv, {width:200, height:200, opacity:100}, function(){
  startMove(oDiv, {width:100, height:100, opacity:30});
 });
 };
};
function getStyle(obj, attr)
{
 if(obj.currentStyle){
 return obj.currentStyle[attr];
 }else{
 return getComputedStyle(obj, false)[attr];
 }
}
function startMove(obj, json, fn)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var bStop = true;
 for(var attr in json){
  var iCur = 0;
  if(attr == 'opacity'){
  iCur = Math.round(parseFloat(getStyle(obj, attr))*100);
  }else{
  iCur = parseInt(getStyle(obj, attr));
  }
  var iSpeed = (json[attr] - iCur)/8;
  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  if(iCur != json[attr]){
  bStop = false;
  }
  if(attr == 'opacity'){
  obj.style.filter = 'alpha(opacity='+(iCur+iSpeed)+')';
  obj.style.opacity = (iCur+iSpeed)/100;
  }else{
  obj.style[attr] = iCur + iSpeed + 'px';
  }
 }
 if(bStop){
  clearInterval(obj.timer);
  if(fn){
  fn();
  }
 }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动"/>
<div id="div1"></div>
</body>
</html>

更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》

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

赞 (0)

相关推荐

  • JavaScript 创建运动框架的实现代码

    封装好的运动框架Move(obj,attr,iTarget),可直接调用: 可用于设置width.border.fontSize.marginLeft.opacity等许多常见属性值的变速变化,实现各种有趣效果. 兼容IE和FF. 复制代码 代码如下: /****************    *    *   IE-BUG:    *   在IE中,设置opacity属性时,元素样式中需要设置opacity属性,才能读取到opacity值.    *    *   obj:元素对象.   at

  • JavaScript运动框架 链式运动到完美运动（五）

    基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如很多网站中,一个方框的出现和退出:出现时先变宽再变高,退出时先变矮再变窄退出! 之前的模型是: startMove(obj, json); 现在改为: startMove(obj, json, fn); 也就是在第一次运动结束的时候执行fn(); fn是传过来的一个参数,这个参数是个函数,定时器清理之后手动运行fn();如果想采用链式运动,那就是在fn中再调用startMove(obj, json, fn),再在里面

  • JavaScript运动框架 解决速度正负取整问题（一）

    JavaScript运动框架 解决速度正负取整问题（一）

    这里说的运动是指缓冲运动,缓冲运动会使物体逐渐'着陆',而不是'硬着陆',到达目标位置的过程中速度越来越慢,看起来很舒服. 缓冲的特点: 速度随着距离的缩短而降低 速度 = (目标值 - 当前值) / 缩放系数: 速度一定要是整数 比如,一个div从最左边运动到left等于400的位置停下,可以如下实现: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运

  • JS运动框架之分享侧边栏动画实例

    本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <title></title>          <style type="text/css">         

  • JavaScript运动框架 多物体任意值运动（三）

    JavaScript运动框架 多物体任意值运动（三）

    前面两篇都是单物体的运动,本文开始讲多物体的运动,比如多个div的各自不同的属性如宽,高,字体大小,透明度的缓冲运动变化. 从本文起,就不再使用offsetWdith,offsetHeight了等等,因为会出现问题,比如加个border,offsetWidth就会出现严重问题,参见我个人的博客JavaScript中offsetWidth的'bug'及其对策解决方案就是封装getStyle(obj, attr) 函数,用了获取运动中的当前值! function getStyle(obj, name

  • JavaScript运动框架 解决防抖动问题、悬浮对联（二）

    JavaScript运动框架 解决防抖动问题、悬浮对联（二）

    本文实例是对JavaScript运动框架(一)的应用 scrollTop:有时候网页很长,其高度大于显示器高度,会产生滚动,那么在高度方向上,"滚走"的部分就是scrollTop var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; offsetTop:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离.所谓的定

  • Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMov

  • js运动框架_包括图片的淡入淡出效果

    复制代码 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><font face="Verdana, Geneva, sans-serif"></font>&l

  • JavaScript运动框架 多值运动（四）

    JavaScript运动框架 多值运动（四）

    多值运动,也就是对于某个对象来说,不仅仅只是其中一个属性值在变化,而是好多个,比如宽,高,字体,透明度等等同时变化 当然了,多值运动会产生一个问题,就是定时器何时关闭的问题!当然是所有的属性值都运动到目标值了才能清理定时器,也就是等最慢的.就好比十个人一起聚餐,不能等到来一个人就开吃! 前几篇讲的都是一个元素对象中某一个属性的运动,这次讲同一个元素对象中多个属性值的缓冲运动,那么每个属性都有个终点(目标点),我们把这些属性及其目标值写成一个对象的形式,或者是json状!容易产生的问题就是上面说的

  • JS多物体 任意值 链式 缓冲运动

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </h

随机推荐