1、一些样式的获取和设置

//通过id获取当前元素
//params:id
function $id(id) {
return document.getElementById(id);
}
//向css一样获取元素
function $(selector) {
return document.querySelector(selector);
}
//向css一样,获取一组元素
function $all(selector) {
return document.querySelectorAll(selector);
} //下边是有关运动的一些方法
//获取当前元素的样式值(兼容写法)
//param:obj(元素对象),attr(属性)
function getStyle(obj,attr) {
if (window.getComputedStyle) {
if(attr == "opacity"){//如果是透明度,则返回100倍的数
return parseFloat(window.getComputedStyle(obj,false)[attr])*100;
}else if(attr == "zISndex"){
return parseInt(window.getComputedStyle(obj,false)[attr]);
}else{
return parseFloat(window.getComputedStyle(obj,false)[attr]);
}
} else {//ie8及以下浏览器的兼容
if(attr == "opacity"){//如果是透明度,则返回100倍的数
return parseInt(obj.currentStyle["filter"]);
}else if(attr == "zIndex"){
return parseInt(obj.currentStyle[attr]);
}else{
return parseFloat(obj.currentStyle[attr]);
}
}
}
//设置属性值
function setStyle(obj,attr,index) {
if (window.getComputedStyle) {
if(attr == "opacity"){//如果是透明度,则返回100倍的数
obj.style[attr] = index/100;
}else if(attr == "zIndex"){
obj.style[attr] = index;
}else{
obj.style[attr] = index + "px";
}
} else {//ie8及以下浏览器的兼容
if(attr == "opacity"){//如果是透明度,则返回100倍的数
// filter: alpha(opacity=20);
obj.style["filter"] = "alpha(opacity=" + index + ")";
}else if(attr == "zIndex"){
obj.style[attr] = index;
}else{
obj.style[attr] = index + "px";
}
}
}

2、匀速运动

//匀速运动
//params:obj(运动的对象),attr(变化的样式名称),target(目标值),speed(每次运动的距离),time(运动间隔)
function linear(obj,attr,target,speed,time) {
//取消其他该对象的定时器,避免重复点击从而开启多个定时器的bug
clearInterval(obj.timer);
//开启定时器,进行运动
obj.timer = setInterval(function () {
//获取当前元素的属性值,为数字类型
var currentAttr = getStyle(obj,attr);
//判断是否达到了目标值
if (Math.abs(currentAttr - target)<Math.abs(speed)) {
//这里设置的原因是可能不能达到目标值,我们需要手动设置
setStyle(obj,attr,target);
//关掉定时器
clearInterval(obj.timer);
} else {
setStyle(obj,attr,currentAttr+speed);
}
},time);
}
//匀速运动
//params:obj(运动的对象),attr(变化的样式名称),target(目标值),speed(每次运动的距离),time(运动间隔)
function linear2(obj, attr, target, speed, time,callback) {
//取消其他该对象的定时器,避免重复点击从而开启多个定时器的bug
clearInterval(obj.timer);
//开启定时器,进行运动
obj.timer = setInterval(function () {
//获取当前元素的属性值,为数字类型
var currentAttr = getStyle(obj, attr);
//判断是否达到了目标值
if (Math.abs(currentAttr - target) < Math.abs(speed)) {
//这里设置的原因是可能不能达到目标值,我们需要手动设置
setStyle(obj, attr, target);
//关掉定时器
clearInterval(obj.timer);
callback();
} else {
setStyle(obj, attr, currentAttr + speed);
}
}, time);
}

3、缓冲运动

//缓冲运动(从快变慢)
//params:obj(元素对象),attr(属性),target(最终目标),time(时间间隔)
function slower(obj,attr,target,time) {
clearInterval(obj.timer);
//定义初始速度
var speed = 0;
obj.timer = setInterval(function () {
//获取当前元素的属性值
var currentAttr = getStyle(obj,attr);
//计算当前速度(当前值与目标值差值的十分之一)
speed = (target - currentAttr) / 10;
//避免由于精度问题导致的不能达到目标值(取大数)
speed = speed>0? Math.ceil(speed):Math.floor(speed);
if (currentAttr == target) {
clearInterval(obj.timer);
} else {
setStyle(obj,attr,speed+currentAttr);
}
},time);
}
//缓冲运动(从快变慢)添加一个对象的其他运动连续进行
//params:obj(元素对象),attr(属性),target(最终目标),time(时间间隔),callback(回调函数)
function slower2(obj,attr,target,time,callback) {
clearInterval(obj.timer);
//定义初始速度
var speed = 0;
obj.timer = setInterval(function () {
//获取当前元素的属性值
var currentAttr = getStyle(obj,attr);
//计算当前速度(当前值与目标值差值的十分之一)
speed = (target - currentAttr) / 10;
//避免由于精度问题导致的不能达到目标值(取大数)
speed = speed>0? Math.ceil(speed):Math.floor(speed);
if (currentAttr == target) {
clearInterval(obj.timer);
// 上一个动作完成 进入下一个动作
if (callback) {
callback();
}
} else {
setStyle(obj,attr,speed+currentAttr);
}
},time);
}
//缓冲运动(从快变慢)添加一个对象的其他运动连续进行,添加一个对象同时的多个属性运动
//params:obj(元素对象),json {attr:target},time(时间间隔),callback(回调函数)
function slower3(obj,json,time,callback) {
clearInterval(obj.timer);
//定义初始速度
var speed = 0;
obj.timer = setInterval(function () {
//循环所有传入的属性
for (var attr in json) {
//获取当前元素的属性值
var currentAttr = getStyle(obj,attr);
console.log(currentAttr); //计算当前速度(当前值与目标值差值的十分之一)
speed = (json[attr] - currentAttr) / 10;
//避免由于精度问题导致的不能达到目标值(取大数)
speed = speed>0? Math.ceil(speed):Math.floor(speed);
if (currentAttr == json[attr]) {
clearInterval(obj.timer);
// 上一个动作完成 进入下一个动作
if (callback) {
callback();
}
} else {
setStyle(obj,attr,speed+currentAttr);
}
} },time);
}

我的js运动库新的更多相关文章

  1. Raphael Js矢量库API简介:

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  2. 原生javascript写自己的运动库(匀速运动篇)

    网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...

  3. Atitit js es5 es6新特性 attilax总结

    Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...

  4. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

  5. Node.js 基础库

    全局对象 Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 global对象的属性. 我们在 Node.js 中能够直接访问到对象通常都是 global ...

  6. 带无缝滚动的轮播图(含JS运动框架)

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  7. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  8. Gremlins.js – 模拟用户随机操作的 JS 测试库

    Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...

  9. JS运动从入门到兴奋1

    hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

随机推荐

  1. jmeter+ant+jenkins 搭建接口自动化测试环境

    过程参考:http://www.cnblogs.com/lxs1314/p/7487066.html 1. 安装ant 2. 安装jenkins 遇到问题: 启动Tomcat后,访问http://lo ...

  2. The Preliminary Contest for ICPC Asia Nanjing 2019 C. Tsy's number 5

    https://nanti.jisuanke.com/t/41300 题意:求\(\sum_{i=1}^n\phi(i)\phi(j)2^{\phi(i)\phi(j)}\) \(f_i=\sum_{ ...

  3. 计算几何——判线段规范相交+最短路zoj1721

    枚举每个端点,然后i点j点连线作为一条路径,逐一判断这条路径是否可行即可 注意的地方:判一条线段是否可行,需要判其余线段是否和其相交,但是这个相交比较难判(因为会不规范相交),所以将问题转化为墙以外的 ...

  4. php 扫描url死链接 \033[31m ANSI Linux终端输出带颜色

    * 从Packagist上搜索需要的包 https://packagist.org/ * 通过composer下载依赖包 composer require guzzlehttp/guzzlecompo ...

  5. Windbg Step 2 分析程序堆栈实战

    #include "stdafx.h" #include <tchar.h> #ifdef _UNICODE #define _ttol _wtol #else #de ...

  6. (转)Python成长之路【第九篇】:Python基础之面向对象

    一.三大编程范式 正本清源一:有人说,函数式编程就是用函数编程-->错误1 编程范式即编程的方法论,标识一种编程风格 大家学习了基本的Python语法后,大家就可以写Python代码了,然后每个 ...

  7. python基础语法(运算符及优先级)

    python基础语法(运算符及优先级) python语言支持的运算符类型 算数运算符 假设变量a为10,变量b为21 算数符 描述 实例 + 加-两个对象相加 a+b结果31 - 减-得到一个负数或者 ...

  8. CDH spark2切换成anaconda3的问题

    最近spark2有同事想用anaconda3做开发,原因是上面可以跑机器学习的库(服务器因为没外网pip装whl确实麻烦) 1.先在每台机器安装anaconda3 2.把用户的~/.bashrc配置进 ...

  9. Shuffle过程详解

  10. vue中 给router-view 组件的 绑定 key 的原因

    不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...