【JS封装运动框架（另一种写法）】的更多相关文章

JS封装运动框架（另一种写法）

function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; function getStyle(obj, arr) { if(obj.currentStyle){ return obj.currentStyle[arr]; //针对ie } else { return document.defaultView.getComputedStyle(obj, nu…

JS封装动画框架,网易轮播图,旋转轮播图

JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面 for(var attr in json){ // attr 属性 json[attr] 值 //开始遍历 json //…

第61天：json遍历和封装运动框架（多个属性）

一.json 遍历  for in  关键字  for ( 变量 in  对象)  { 执行语句;  } 例如: var json = {width:200,height:300,left:50}console.log(json.width);for(var k in json){    console.log(k);   // k 遍历的是json  可以得到的是  属性    console.log(json[k]);  // json[k]  得到 是属性的  值} 二.回调函数 等动画执…

[js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ? Math.ceil(speed) : Math.floor(speed); if (cur != target) { bFlag = false; if (key == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.st…

JS完美运动框架

这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (opera没测) 备注:参考了智能社blur老师的代码 */ /*-------------------------------------------------------- 功能: 获取某个节点下的带有某个class的所有节点 输入: oParent:要获取的class元素的父级节点 sClas…

js中创建命名空间的几种写法

在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hello var'; }; function sayHello(name) { return 'Hello function'; }; sayHello(); 最终的输出为 > "Hello var" 为什么会这样,实际上JavaScript的是按如下顺序解析的. function sa…

在js中创建命名空间的几种写法

在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子:   var sayHello = function() { return 'Hello var'; }; function sayHello(name) { return 'Hello function'; }; sayHello();   最终的输出为   > "Hello var"   为什么会这样,根据 StackOverFlow 的解释,实际上Java…

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…

纯js写“运动”框架

所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target) { // body... if (element.currentStyle) { return element.currentStyle[target]; }else{ return window.getComputedStyle(element, null)[target]; } } //填充…

js中运动框架的封装

//获取非行间样式的封装 function setStyle(obj,name){ // 考虑兼容性问题 if(obj.currentStyle){//不兼容火狐和谷歌 return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name];//不兼容IE } } function move(obj,json,complete) {// 用计时器前先清除,防止多次点击 clearInterval(obj.tim…