-
运动框架的实现思路
1，速度（left,right,width,height,opacity）
2 ，缓冲运动
3,，多物体运动
4，任意值变化
5，链式运动
6，同时运动
查看全部 -
ss
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多物体运动</title> <style type="text/css"> *{ padding:0; margin:0; } ul,li{ list-style: none; } ul li{ width:200px; height:100px; line-height: 100px; background-color: chartreuse; margin-bottom:20px; opacity: 0.3; border: 2px solid #000; font-size: 18px; color: #000; } </style> <script type="text/javascript"> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].timer=null; //width运动与opacity运动分开设定定时器 aLi[i].timerOpacity=null; aLi[i].alpha=30; aLi[i].onmouseover=function(){ startMove(this,400,100); } aLi[i].onmouseout=function(){ startMove(this,100,20); } } // var timer=null; //设置共用定时器会导致多个目标争抢同一个定时器，导致每一个之前触发的物体运动无法结束，多物体运动不能设置共用变量，所以需要为每个li设置单独定时器 function startMove(obj,iTarget,iOpacity){ clearInterval(obj.timer); clearInterval(obj.timerOpacity); obj.timer=setInterval(function(){ //这里不使用offsetWidth是因为它包含了边框等宽度，无法使元素本身的width达到目标值 var speed=(iTarget-parseInt(getStyle(obj,'width')))/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(parseInt(getStyle(obj,'width'))==iTarget){ clearInterval(obj.timer); }else{ //parseInt()取整数数字，去掉属性单位 obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px'; obj.style.fontSize=parseInt(getStyle(obj,'fontSize'))+speed/10+'px'; } },30) function getStyle(obj,attr){ if(obj.currentStyle){ //针对IE获取元素某项css属性 return obj.currentStyle[attr]; }else{ //针对其他浏览器 return getComputedStyle(obj,false)[attr]; } } obj.timerOpacity=setInterval(function(){ // var oSpeed=(iOpacity-obj.style.opacity)/10; //变速的值使得无法达成obj.alpha==iOpacity(小数存在)，先使用匀速 if(obj.alpha>iOpacity){ oSpeed=-10; }else{ oSpeed=10; } if(obj.alpha==iOpacity){ clearInterval(obj.timerOpacity); }else{ obj.alpha+=oSpeed; obj.style.opacity=obj.alpha/100; } },30) } } </script> </head> <body> <ul> <li>ABC</li> <li>EFG</li> <li>123</li> </ul> </body> </html>查看全部 -
//Start运动框架 //json语句 // var json = {a:2,b:7,c:0}; // for(var i in json){ // //alert(i); //依次弹出变量a,b,c // alert(json[i]); //依次弹出变量的值2,7,0 // } //startMove(obj,{attr1:itarget1,attr2:itarget2},fn) //attr表属性，iTarget表目标值，多个属性目标值组成json数组 function startMove(e,json,fn){ //e表对象，json表{attr1:itarget1,attr2:itarget2,···}，fn表回调函数 clearInterval(e.timer); //清除定时器，e.timer表示给每个对象定义一个定时器，避免共用一个定时器 e.timer = setInterval(function(){ for(var attr in json){ //定义attr为json中的变量，即属性，遍历所有属性。避免一个属性变化完后，其他属性也停止变化 var flag = true; //假设所有属性都已经满足icur == json[attr]时，flag为true //取当前的值 var icur=0; if(attr == 'opacity'){ icur=Math.round(parseFloat(getStyle(e,attr))*100); } else{ icur=parseInt(getStyle(e,attr)); } //算速度 var speed=(json[attr]-icur)/5; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if(icur != json[attr]){ //json[attr]表示iTarget,即如果当前存在属性值不等于目标值,flag值为false flag=false; } if(attr == 'opacity'){ e.style.opacity=(icur+speed)/100; e.style.filter="alpha(opacity:"+icur+speed+")"; } else{ e.style[attr]=icur+speed+"px"; } } if(flag){ //flag为true，即所有当前属性值等于目标值时时，执行下面的方法 clearInterval(e.timer3); if(fn){ fn(); } } },50) } //获取样式,兼容处理 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //IE } else{ return getComputedStyle(obj,false)[attr]; //FireFox及谷歌 } } //End运动框架查看全部 -
function startMove(obj,json,fn){
var flag =true; //设定所有假设都成立
clearInterval(obj.timer);
obj.timer =setInterval(function(){
for(attr in json){
var icur =0;
if(attr =='opacity'){
var icur =parseFloat(getStyle(obj,attr)*100);
}else{
var icur =parseInt(getStyle(obj,attr));
}
var speed =(json[attr] - icur)/8;
speed =speed>0? Math.ceil(speed) : Math.floor(speed);
if(json[attr] != icur){
flag = false;
} // 如果遍历所有只要有不等于的假设不成立，继续执行该进行的操作。
if(attr == 'opacity'){
obj.style.filter = "alpha(opacity:"+(icur +speed)+")";
obj.style.opacity= (icur+speed)/100;
}else{
obj.style[attr] = icur +speed+'px';
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
} //基于IE
else{
return getComputedStyle(obj,false)[attr];
}
}
查看全部 -
定时器
onmouseover 鼠标移入
onmouseout鼠标移除
odiv.offsetLeft odiv的当前left值
在两个代码很相似的情况下，可以把不同的地方挑出来作为参数传进去（如鼠标移入与鼠标移除的函数）
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变透明度</title>
<style type="text/css">
#div1{
width:160px;
height:160px;
background-color:red;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
startMove(100);
}
oDiv.onmouseout = function(){
startMove(30);
}
var timer = null;
var alpha = 30;
function startMove(target){
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(alpha > target){
speed = -10;
}else{
speed = 10;
}
if(alpha == target){
claerInterval(timer);
}else{
alpha+=speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30);
}
}
</script>
</head>
<body>
<div id=div1></div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体改变透明度</title>
<style type="text/css">
div{
width:160px;
height:160px;
background-color:red;
float:left;
margin:10px;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName("div");
for(var i=0;i<oDiv.length;i++){
oDiv[i].alpha = null;
oDiv[i].onmouseover = function(){
startMove(this,100);
}
oDiv[i].onmouseout = function(){
startMove(this,30);
}
}
// var timer = null;
// var alpha = 30;
function startMove(obj,target){
// var oDiv = document.getElementById("div");
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = 0;
if(obj.alpha > target){
speed = -10;
}else{
speed = 10;
}
if(obj.alpha == target){
claerInterval(obj.timer);
}else{
obj.alpha+=speed;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
obj.style.opacity = obj.alpha/100;
}
},30);
}
}
</script>
</head>
<body>
<div id=div1></div>
<div id=div2></div>
<div id=div3></div>
<div id=div4></div>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体运动</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,li{
list-style: none;
}
ul li{
width:200px;
height:100px;
background-color: chartreuse;
margin-bottom:20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName('li');
for(var i = 0;i < oDiv.length;i++){
oDiv[i].timer = null;//在对象上定义一个单独的属性值
oDiv[i].onmouseover = function(){
startMove(this,400);//this来指定所选择的当前元素
}
oDiv[i].onmouseout = function(){
startMove(this,200);
}
}
//var timer = null;
function startMove(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.offsetWidth)/8;
speed = speed >0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+'px';
}
},30);
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
查看全部 -
getStyle()
查看全部 -
查看全部 -
1、dom.style.xxx 这种写法只能获取行内样式 例如 <div ></div> div.style.width能获取到是200px，但是没有出现在 引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 function getStyle(obj,style){//引用时style要带引号 if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }
设置width的style写在div里和写在文档开头的<style></style>里，获取的div元素的oDiv.style.width不一样（后者会把border padding等的宽度也加上）
parseInt（）是获取整数
查看全部 -
parseInt(string, radix) parseInt() 函数可解析一个字符串，并返回一个整数。 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。 当忽略参数 radix , JavaScript 默认数字的基数如下: 如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。 如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。 如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。查看全部
-
存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。 li[i].timer = null; li[i].alpha = 30; clearInterval(obj.timer); obj.style.opacity = obj.alpha;查看全部
-
<script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startOpacity(100); }; oDiv.onmouseout = function(){ startOpacity(30); }; }; var alpha = 30; var timer = 0; function startOpacity(opac){ var oDiv = document.getElementById("div1"); clearInterval(timer); var speed = 0; timer = setInterval(function(){ if(alpha > opac){ speed = -10; }else if(alpha < opac){ speed = 10; }else{ clearInterval(timer); } alpha+=speed; oDiv.style.filter = alpha+"(opacity:"+alpha+")"; oDiv.style.opacity = alpha / 100; },30); } </script>查看全部
-
所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)查看全部
举报