JS完美运动框架【利用了Json】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>完美运动框架</title>
<style>
body,ul,li{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
ul li{
width:200px;
height:100px;
background:yellow;
margin-bottom:20px;
border:4px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var oLi = document.getElementById('li1');
oLi.onmouseover = function(){
startMove(oLi,{width:400,height:200,opacity:100});
}
oLi.onmouseout = function(){
startMove(oLi,{width:200,height:100,opacity:30});
}
}
</script> </head>
<body>
<ul>
<li id = "li1">我是什么颜色</li>
</ul>
</body>
</html>
move.js
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 (){
flag=true;//定义标杆,假设所有运动都到达目标值
for(var attr in json)
{
//1.取当前的值
var iCur=0; if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
} //2.算速度
var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
flag=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(flag)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
JS完美运动框架【利用了Json】的更多相关文章
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- js 完美运动框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...
- 完美运动框架(js)
一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...
- 【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
- JavaScript “完美运动框架”
/* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...
- 2015.8.2js-19(完美运动框架)
/*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...
- 纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...
随机推荐
- class1and2_tkinter之 Label & Button 标签和按钮
''' # ------------------------------------------------------------ # # 1. 使用tkinter设置一个标签 # # # 设计tk ...
- Intellij IDEA 撸码最头大的问题。。
想栈长我当初从 Eclipse 转用 IDEA 真是纠结,放弃然后尝试了N次,不过现在已经算是转型成功了,可以完全脱离 Eclipse 撸码了,虽然说我现在真的撸得非常少了.. 说到 IDEA 的痛点 ...
- mssql查询表在哪个数据库中
mssql查询表在哪个数据库中 EXEC sp_MSforeachdb @command1='IF object_id(''?'' + ''..表名'') IS NOT NULL PRINT ''?' ...
- Southern African 2001 Stockbroker Grapevine /// Floyd oj1345
题目大意: 输入n 接下来n行 每行输入m 接下来m对a,b 若干个人之间会传播谣言,但每个人传播给其他人的速度都不一样, 问最快的传播路线(即耗时最短的)中最耗时的一个传播环节. 如果其中有人不在这 ...
- 测试网中用户添加docker yum源
/etc/yum.repo.d 中新建docker.repo 添加 [docker]name=CentOS-$releasever - Mediabaseurl=ftp://10.191.51.X/d ...
- rtsp+rtmp多路流媒体播放
一.前言 之前博主有写过 一篇博文,讲的是使用videojs在谷歌浏览器网页上播放rtmp流媒体,具体可参考我之前的博客:https://www.cnblogs.com/FHC1994/p/99814 ...
- logback日志文件的使用
1.引入Jar包,Maven pom.xml <!-- Logging with SLF4J & LogBack --> <dependency> <groupI ...
- java oop第09章_JDBC02(CRUD操作)
第09章_JDBC02(CRUD操作) CRUD(CREATE . RETIVE . UPDATE . DELETE)增删改查. DAO中会提供一些CRUD操作方法,调用者可以通过调用这些方法完成相应 ...
- OpenCV-Python Tutorials目录
版本 3.4.6 1 Introduction to OpenCV OpenCV介绍Learn how to setup OpenCV-Python on your computer! 2 Gui F ...
- dialogs打开对话框选定文件夹,getopenfilename获取文件名
如果需要使用“打开”.“打印”等Excel内置对话框已经具有的功能,可以使用代码直接调用这些内置的对话框,如下面的代码所示. #001 Sub DialogOpen() #002 Appl ...