纯js写“运动”框架
所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”。
先写几个会用到的函数
//获取某一元素的指定样式
function getstyle (element, target) {
// body...
if (element.currentStyle) {
return element.currentStyle[target];
}else{
return window.getComputedStyle(element, null)[target];
}
}
//填充digits长度的十六进制数
function zero_fill_hex(num, digits) {
var s = num.toString(16);
while (s.length < digits)
s = "0" + s;
return s;
} //rgb颜色转成十六进制颜色
function rgb2hex(rgb) { if (rgb.charAt(0) == '#')
return rgb; var ds = rgb.split(/\D+/);
var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]);
return "#" + zero_fill_hex(decimal, 6);
}
最后是“运动”框架部分
/*
*在连续时间内改变某一样式(运动框架)
*@element 要改变样式的元素
*@target 要改变的样式
*@end 目标样式最终的值
*@speed 改变的速度
*@flag 是否变速改变,true为变速,false为匀速
*/
function changeStyle (element, target, end, speed, flag) {
// body...
if(target.indexOf("color") != -1){
var begin = $$.getStyle(element, target)+"";
begin = rgb2hex(begin).replace(/#/, '');
end = end.replace(/#/, '');
speed = Math.ceil(Math.abs(parseInt(begin, 16)-parseInt(end, 16))/speed); clearInterval(element[target+"Timer"]);
element[target+"Timer"] = setInterval(function(){
var intBegin = parseInt(begin, 16);
var intEnd = parseInt(end, 16);
speed = intEnd > intBegin ? Math.abs(speed) : (-Math.abs(speed)); if (Math.abs(intBegin-intEnd) <= Math.abs(speed)) {
clearInterval(element[target+"Timer"]);
element.style[target] = '#'+end;
}else {
var sum = intBegin + speed
begin = sum.toString(16);
element.style[target] = '#' + zero_fill_hex(begin, 6);
}
}, 30);
}
else if (target == "opacity") {
var begin = $$.getStyle(element, target)+"";
clearInterval(element[target+"Timer"]);
element[target+"Timer"] = setInterval(function(){
if (Math.abs(begin-end) <= Math.abs(speed)){
clearInterval(element[target+"Timer"]);
element.style.opacity = end;
}else{
begin = begin*1.0 + speed;
element.style.opacity = begin;
}
}, 30);
}else{
var begin = $$.getStyle(element, target)+"";
console.log("begin--- "+begin);
begin = begin.replace(/px/g, '');
clearInterval(element[target+"Timer"]);
element[target+"Timer"] = setInterval(function(){
var realSpeed = Math.abs(end-begin)/speed;
realSpeed = realSpeed > 0 ? Math.ceil(realSpeed) : Math.floor(realSpeed); if (Math.abs(begin-end) <= Math.abs(realSpeed)){
clearInterval(element[target+"Timer"]);
element.style[target] = end + "px";
}else{
if (flag)
begin = begin*1.0 + realSpeed;
else
begin = begin*1.0 + speed;
element.style[target] = begin + "px";
console.log(target+" "+begin+" "+realSpeed);
}
}, 30);
}
}
纯js写“运动”框架的更多相关文章
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- JS完美运动框架【利用了Json】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 纯手写Myatis框架
1.接口层-和数据库交互的方式 MyBatis和数据库的交互有两种方式: 使用传统的MyBatis提供的API: 使用Mapper接口: 2.使用Mapper接口 MyBatis 将配置文件中的每一个 ...
- 使用纯js写的一个分页
上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 纯JS写出日历
封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...
- [JS思路]运动框架思路
匀速运动的思路一: 1.先清除动画,再加载动画 2.方向dir有正值和负值,可以通过 目标值 > 当前值 往右移动,即正数 目标值 < 当前值 往右移动,即负数 来进行判断:dir = ...
- 纯JS写动态分页样式效果
效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...
随机推荐
- [HDU 1520] Anniversary party
Anniversary party Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- c语言时间库函数#include<time.h>
日期与时间函数<time.h> 头文件<time.h>中说明了一些用于处理日期和时间的类型和函数.其中的一部分函数用于处理当地时间,因为时区等原因,当地时间与日历时间可能不相同 ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- 独立线程中实现QT GUI
在网上搜集的资料: http://www.qtcentre.org/threads/16552-Starting-QT-GUI-in-a-seperate-Threadhttp://stackover ...
- 基于duilib实现的可滑动tab标签控件
最近一直在忙棋牌游戏大厅的开发,使用了duilib界面库,在大厅界面游戏菜单的展现上需要用到滑动的效果,类似悠扬棋牌,jj棋牌的菜单左右(上下)滑动的效果.通过自己的设计思路完善了一个可滑动的tab标 ...
- 枚举在c与c++中定义的不同
众所周知的,枚举是在运行期才决定枚举变量的值的,而不是像宏一样在预编译的时候就进行值得替换. 而且c标准规定: size(int) <= size(enum)<=系统所能表示的最大范围的值 ...
- Esper系列(一)初探
Esper介绍 Esper是一个Java开发并且开源的轻量级和可扩展的事件流处理和复合事件处理引擎,并提供了定制的事件处理语言(EPL). 应用场景 某个用户在请求登录服务时,n秒内连续m次未登录成功 ...
- 【转载】linux 技巧:使用 screen 管理你的远程会话
转自:https://www.ibm.com/developerworks/cn/linux/l-cn-screen/ 总结 启动并进入一个screen会话:screen 或者 screen -S 名 ...
- HW3.11
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- Ural1057 - Amount of Degrees(数位DP)
题目大意 求给定区间[X,Y]中满足下列条件的整数个数:这个数恰好等于K个互不相等的B的整数次幂之和.例如,设X=15,Y=20,K=2,B=2,则有且仅有下列三个数满足题意: 输入:第一行包含两个整 ...