-
1.JSON格式像极了python里面的字典dict{} 2.利用JSON的键值对格式，实现多个属性同时改变; PS: 本例中使用的是“对象”而不是“JSON”。JSON要用双引号把键和值括起来，而对象不需要双引号； JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 JSON 语法规则：JSON 语法是 JavaScript 对象表示语法的子集。 数据在键值对中，数据由逗号分隔，花括号保存对象，方括号保存数组 JSON 名称/值对：JSON 数据的书写格式是：名称/值对。名称/值对组合中的名称写在前面（在双引号中），值对写在后面(同样在双引号中)，中间用冒号隔开： "firstName":"John"； 这很容易理解，等价于这条 JavaScript 语句： firstName="John"查看全部
-
样式展示代码查看全部
-
CSS3 opacity 属性（透明度） 1.规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 2.所有浏览器都支持 opacity 属性。 注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。 二、Math对象 Math这个对象的很多方法很好用. Math.ceil：对数进行向上舍入。 Math.floor：对数进行向下舍入。 Math.round：把数四舍五入为最接近的整数。 Math.random：返回 0 ~ 1 之间的随机数。查看全部
-
1.过程：obj.stlye.width是样式中的块width；而obj.offsetWidth是显示的width(包括border之类的)，故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,当borderWidth＞1时,其实这是在加宽度而不是减宽度; 2.原型为parseInt ( String s , [ int radix ] )，用于解析一个字符串，并返回一个整数。还有parseFloat,则解析一个字符串，返回一个浮点数; 3.用js的style属性可以获得html标签的样式，但是不能获取非行间样式。即： 用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。所以js用currentStyle和getComputedStyle获取css的非行间样式； 3.var style = window.getComputedStyle("元素", "伪类");第二个参数“伪类”（如果不是伪类，设置为null） (但是课堂里老师设置为false是何解？)查看全部
-
json = {name1：key1,name2:key2...nameN:keyN} for(var i in json) { alert(i);//此时弹出的是json里的name alert(json[i])；//此时弹出的是json里的key }查看全部
-
照着老师的代码打，发现有个问题，就是flag没有定义在定时器内。因为flag如果定义在定期器外，flag只执行了一遍，当循环了一次后，flag变成了false就不会再改变了。flag一直都是false，就无法关闭定时器和执行下一个函数了。 结论：flag要定义在定期器内（旗子要立好！！）查看全部
-
//最终封装的'完美移动框架' function startMove(obj,json,fn){ var flag=true;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fu(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
本节示例代码： //获取样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // if IE }else{ return getComputedStyle(obj,false)[attr]; //if FireFox } } function animation(obj,attr,target,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var val = 0; if(attr == 'opacity'){ val = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ val = parseInt(getStyle(obj,attr)); } var speed = (target-val)/8; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(val == target){ clearInterval(obj.timer); //判断是否传入了fn if(fn){ fn(); } }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:' + val+speed + ')'; obj.style.opacity = (val+speed)/100; } else{ obj.style[attr] = val + speed +"px"; } } },30); };查看全部
-
function starMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=0; //用if判断属性 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))); //由于opacity的值是小数，需要用parseFloat转为小数值，Math.round四舍五入 }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer); }else{ if (attr=='opacity') { obj.style.filter='alpha(opacity:'+icur+speed+')'; obj.style.opacity=(icur+speed)/10; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,null)[attr]; } } </script>查看全部
-
window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(Li1,'height',400); } Li1.onmouseout=function(){ startMove(Li1,'height',200); } Li2.onmouseover=function(){ startMove(Li2,'width',400); } Li2.onmouseout=function(){ startMove(Li2,'width',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=parseInt(getStyle(obj,attr)); var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }else{ obj.style[attr]=icur+speed+'px'; } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
function getStyle(obj,style){//引用时style要带引号 if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }查看全部
-
缓冲运动： 1、速度的定义： var speed=(目标值-当前值（offset）)/20； 2、取整函数： 向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、由于运算出现浮点数，而px无法显示小数值，所以需要取整 速度的取整判断： speed=speed>0?Math.ceil(speed):Math.floor(speed);// 条件操作位 这个表达式的意思是如果speed大于0（关系表达式返回true），则将Math.ceil(speed)向下去整赋值给 speed，反之则将Math.floor(speed)向上去整赋值给 speed查看全部
-
div{filter:alpha(opacity=50);} /* for IE8 and earlier */ div{opacity:.5;} /* for IE9 and other browsers */查看全部
-
运动框架实现思路查看全部
-
分享运动查看全部
举报
0/150
提交
取消