-
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> <style type='text/css'> *{ margin:0px; padding:0px; } li{ width:200px; height:100px; margin:20px; list-style:none; background-color:yellow; opacity: 0.3; filter: alpha(opacity:30); } </style> <script type='text/javascript'> window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(this,'opacity',100); } Li1.onmouseout=function(){ startMove(this,'opacity',30); } Li2.onmouseover=function(){ startMove(this,'height',400); } Li2.onmouseout=function(){ startMove(this,'height',100); } } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } function startMove(obj,attr,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=null; if(attr=='opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,attr)); } var speed=(target-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==target){ clearInterval(obj.timer); } else{ if(attr == 'opacity'){ obj.style.filter='alpha(opacity:'+icur+speed+')'; obj.style.opacity=(icur+speed)/100; } else{ obj.style[attr]=icur+speed+'px'; } } },30) } </script> </head> <body> <ul> <li id='li1'></li> <li id='li2'></li> </ul> </body> </html>查看全部 -
move.js 框架
function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, iTarget, fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ //1、取当前的值 var icur = 0; if(attr == 'opacity'){ icur = Math.round(parseFloat(getStyle(obj, attr))*100); }else{ icur = parseInt(getStyle(obj, attr)); } //2、算速度 var speed = (iTarget - icur) / 8; speed = speed>0?Math.ceil(speed):Math.floor(speed); //3、检测停止 if(icur == iTarget){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:' + (icur+speed) + ')'; obj.style.opacity = (icur + speed)/100; }else{ obj.style[attr] = icur + speed + 'px'; } } },30) }JavaScript
鼠标移入先变宽，再变高，然后变透明度
鼠标移出先变透明度，再变高，最后变宽
window.onload = function(){ var Li = document.getElementById('li1'); Li.onmouseover = function(){ startMove(Li, 'width', 400, function(){ startMove(Li, 'height', 200, function(){ startMove(Li, 'opacity', 100); }); }); } Li.onmouseout = function(){ startMove(Li, 'opacity', 30, function(){ startMove(Li, 'height', 100, function(){ startMove(Li, 'width', 200); }); }); } }查看全部 -
运动框架实现思路
查看全部 -
fliter标签查看全部
-
fliter标签查看全部
-
阿里巴巴矢量图标库
www.iconfont.cn
查看全部 -
function startMove(obj,attr,iTarget,fn){ //添加一个回调函数fn clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ //判断是否存在回调函数,并调用 fn(); } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }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]; } }
查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
<style type='text/css'>
*{
margin:0px;
padding:0px;
}
li{
width:200px;
height:100px;
margin:20px;
list-style:none;
background-color:yellow;
}
</style>
<script type='text/javascript'>
window.onload=function(){
var Li1=document.getElementById('li1');
var Li2=document.getElementById('li2');
Li1.onmouseover=function(){
startMove(this,'width',400);
}
Li1.onmouseout=function(){
startMove(this,'width',200);
}
Li2.onmouseover=function(){
startMove(this,'height',400);
}
Li2.onmouseout=function(){
startMove(this,'height',100);
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=parseInt(getStyle(obj,attr));
var speed=(target-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur==target){
clearInterval(obj.timer);
}
else{
obj.style[attr]=icur+speed+'px';
}
},30)
}
</script>
</head>
<body>
<ul>
<li id='li1'></li>
<li id='li2'></li>
</ul>
</body>
</html>
查看全部 -
window.onload = function(){ var Li1 = document.getElementById('li1'); Li1.timer = null; // 为 需要运动的对象添加一个计时器 // var Li2 = document.getElementById('li2'); // var Li3 = document.getElementById('li3'); // alert(Math.round(0.3000009)); Li1.onmouseover = function(){ StartMove(this, 'opacity', 100); }; Li1.onmouseout = function(){ StartMove(this, 'opacity', 30); }; }; // var timer = null; 多物体运动时不要使用公用值 // var alpha = 30; function StartMove(obj, attr, Target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var attr_cur = 0; // 需要改变的属性的当前值 if (attr === 'opacity'){ attr_cur = parseFloat(getStyle(obj, attr)) * 100; } else { attr_cur = parseInt(getStyle(obj, attr)); } var speed = (Target - attr_cur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (attr_cur === Target){ clearInterval(obj.timer); } else if (attr === 'opacity'){ obj.style[attr] = (attr_cur + speed)/100; obj.style.filter = 'Alpha(opacity = '+ (attr_cur + speed) +')'; } else { obj.style[attr] = attr_cur + speed + 'px'; } },30); }; function getStyle(obj, attr){ if (obj.currentStyle){ return obj.currentStyle[attr]; } else { return window.getComputedStyle(obj, false)[attr]; } }我用的Html5 没有遇到透明度小数不精确的现象，我通过输出观察发现透明度确实有不精确的现象，但是经过下一次变化后小数就会被清除掉。
查看全部 -
offsetLeft会越来越大，与目标差值越来越下，speed越来越小。
查看全部 -
用offsetLeft是因为left可读写，且offset返回的是数值，left返回的是字符串
查看全部 -
2、只要是多物体运动所有的东西都不能共用。记住！！！查看全部
-
1、对这节课取个好理解的名字，多个物体设置相同动画，如何实现。查看全部
-
1、对这节课取个好理解的名字，多个物体设置相同动画，如何实现。查看全部
-
老师这个例子很好。用剩余路程的改变来作为变化速度的改变。很好的解法。学习了，将来类似的情况就用这个解法。查看全部
举报