1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>完美运动框架</title>
  6. <style>
  7. body,ul,li{
  8. 	margin:0;
  9. 	padding:0;
  10. }
  11. ul,li{
  12. 	list-style:none;
  13. }
  14. ul li{
  15. 	width:200px;
  16. 	height:100px;
  17. 	background:yellow;
  18. 	margin-bottom:20px;
  19. 	border:4px solid #000;
  20. 	filter:alpha(opacity:30);
  21. 	opacity:0.3;
  22. }
  23. </style>
  24. <script src="move.js"></script>
  25. <script>
  26. window.onload = function(){
  27. 	var oLi = document.getElementById('li1');
  28. 	oLi.onmouseover = function(){
  29. 		startMove(oLi,{width:400,height:200,opacity:100});
  30. 	}
  31. 	oLi.onmouseout = function(){
  32. 		startMove(oLi,{width:200,height:100,opacity:30});
  33. 	}
  34. }
  35. </script>
  36.  
  37. </head>
  38. <body>
  39. <ul>
  40. 	<li id = "li1">我是什么颜色</li>
  41. </ul>
  42. </body>
  43. </html>

move.js

  1.  function getStyle(obj, attr)
  2. {
  3. 	if(obj.currentStyle)
  4. 	{
  5. 		return obj.currentStyle[attr];
  6. 	}
  7. 	else
  8. 	{
  9. 		return getComputedStyle(obj, false)[attr];
  10. 	}
  11. }
  12.  
  13. function startMove(obj, json, fn)
  14. {
  15. 	clearInterval(obj.timer);
  16. 	obj.timer=setInterval(function (){
  17. 	flag=true;//定义标杆，假设所有运动都到达目标值
  18. 	for(var attr in json)
  19. 	{
  20. 		//1.取当前的值
  21. 		var iCur=0;
  22.  
  23. 		if(attr=='opacity')
  24. 		{
  25. 			iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
  26. 		}
  27. 		else
  28. 		{
  29. 			iCur=parseInt(getStyle(obj, attr));
  30. 		}
  31.  
  32. 		//2.算速度
  33. 		var iSpeed=(json[attr]-iCur)/8;
  34.  
  35. 		iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  36. 		//3.检测停止
  37. 		if(iCur!=json[attr])
  38. 		{
  39. 			flag=false;
  40. 		}
  41. 		if(attr=='opacity')
  42. 		{
  43. 			obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
  44. 			obj.style.opacity=(iCur+iSpeed)/100;
  45. 		}
  46. 		else
  47. 		{
  48. 			obj.style[attr]=iCur+iSpeed+'px';
  49. 		}
  50. 	}
  51. 		    if(flag)
  52. 		    {
  53. 		   		clearInterval(obj.timer);
  54. 			    if(fn)
  55. 			    {
  56. 			    	fn();
  57. 			    }
  58. 		    }
  59. 	}, 30)
  60. }

JS完美运动框架【利用了Json】的更多相关文章

  1. JS完美运动框架

    这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...

  2. js 完美运动框架

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JS 之完美运动框架

    完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...

  4. 完美运动框架(js)

    一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...

  5. 【repost】JavaScript完美运动框架的进阶之旅

    运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...

  6. JavaScript “完美运动框架”

    /* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...

  7. 2015.8.2js-19(完美运动框架)

    /*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...

  8. Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  9. 纯js写“运动”框架

    所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...

随机推荐

  1. NX二次开发-算法篇-判断找到两个数组里不相同的对象

    NX9+VS2012 #include <uf.h> #include <uf_curve.h> #include <uf_modl.h> #include < ...

  2. C++ string的大小写转换【转载】

    转载自https://www.cnblogs.com/balingybj/p/4678850.html 将一个string转换成大写或者小写,是项目中经常需要做的事情,但string类里并 没有提供这 ...

  3. iOS13适配/黑暗模式的适配/KVC访问私有属性/模态弹窗ViewController 默认样式改变 /LaunchImage即将废弃/蓝牙的权限申请/推送Device Token适配/UIKit 控件变化/StatusBar新增样式

    目录 1. KVC访问私有属性 2. 模态弹窗ViewController 默认样式改变 3. 黑暗模式的适配 4. LaunchImage即将废弃 5. 新增一直使用蓝牙的权限申请 6. Sign ...

  4. mysql查看数据库大小或者表大小

    要想知道每个数据库的大小的话,步骤如下: 1.进入information_schema 数据库(存放了数据库的信息) use information_schema; 2.查询所有数据库的大小: sel ...

  5. [kuangbin带你飞]专题一 简单搜索 - N - Find a way

    正确代码: #include<iostream> #include<queue> #define N 210 #define inf 0xffffff using namesp ...

  6. codeforces round#524 D - Olya and magical square /// 大概算是数学规律题？

    题目大意: t 个测试用例  (1≤t≤103) 给定n k  (1≤n≤10^9,1≤k≤10^18) 表示有一个边长为2^n的正方形格子 每次操作只能将一个格子切割为左上左下右上右下的四等分格子 ...

  7. 【POJ】3259 Wormholes

    题目链接:http://poj.org/problem?id=3259 题意:n个农场,m条双向路径,w条单向路径(虫洞).单向虫洞路径是负值.农夫想知道自己能不能看到自己(X). 题解:其实刚开始没 ...

  8. linux下使用自带mail发送邮件

    linux下使用自带mail发送邮件 mailx工具说明: linux可以通过安装mailx工具,mailx是一个小型的邮件发送程序,一般可以通过该程序在linux系统上,进行监控linux系统状态并 ...

  9. List<> ，string[]和string的相互转换

    1.string转换成string[]数组 string str = "aaa,bbb,ccc,dddd"; string[] strs = str.Split(','); 2.s ...

  10. 安装Epson打印机但因lsb依赖错误而中断的驱动程序

    sudo apt-get install printer-driver-escpr 安装Epson打印机但因lsb依赖错误而中断的驱动程序 问题: 我正在安装 Epson XP-310 驱动程序,从这 ...