<div id="my"></div>
#my{
position: absolute;
left:50px;
top:100px;
background: #de3226;
width:200px;
height: 200px;
}
a{
text-decoration:none;
color:#000;
}
a:focus{
color:red;
}
var my=document.getElementById("my");
var ss=document.getElementById("ss");
var handle = 0;
var lPos = 0;
var nul=null;
function renderLoop(){ //右边移动
my.style.left=(lPos+=1)+"px";
handle=window.requestAnimationFrame(renderLoop);
}
function rightLoop(){ //左边移动
my.style.left=(lPos-=1)+"px";
handle=window.requestAnimationFrame(rightLoop);
}
document.getElementById("ms").addEventListener("click",function(){
renderLoop();
});
document.getElementById("mr").addEventListener("click",function(){
rightLoop();
});
ss.addEventListener("click",function(){ //监听暂停按钮,然后停止循环,再点击暂停按钮的时候往左边移动
if(handle){
window.cancelAnimationFrame(handle);
handle = null;
}
// else{
// renderLoop();//这块是向右边移动 那么问题来了 。如果点击左边移动,暂停会判断向右移动。
// }
});
http://jsbin.com/qikutiviqo/edit?html,cs... 在线demo
昨天提问,然后晚上我修改了一下,发现有个stop按钮问题。动画不能跟着stop方向移动。
if 暂停这块是怎么判断动画是左向,然后可以停止可以开始继续让动画向左。
反之就是这样。
css3可以实现,原生js用定时器
css写动画类,动态改变元素的样式类
在现代浏览器上,不用写什么缓动函数。用CSS就可以实现,transform
https://.com/n/1330000004887...
刚弄一个旋转笔记可以看看哦
css代码:
#an{
width: 200px;
height: 200px;
background: red;
}
@keyframes go
{
from {width: 200px;height: 200px;}
to {width: 300px;height: 540px;}
}
@-moz-keyframes go
{
from {width: 200px;height: 200px;}
to {width: 300px;height: 540px;}
}
@-webkit-keyframes go
{
from {width: 200px;height: 200px;}
to {width: 300px;height: 540px;}
}
@-o-keyframes go
{
from {width: 200px;height: 200px;}
to {width: 300px;height: 540px;}
}
.anim{
animation: go 5s forwards ;
-moz-animation: go 5s forwards ;
-webkit-animation: go 5s forwards ;
-o-animation: go 5s forwards ;
}
js代码
var an=document.getElementById("an");
an.onclick=function(){
an.className="anim";
};
object.style.transform="rotate(7deg)";类似这样写其实还是用的css3样式!
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
看这个吧,关于requestAnimationFrame:http://www.zhangxinxu.com/wordpress/2013...
CSS3的动画效率要高很多了
具体自己实现
使用定时器,每过一段时间就改变一下宽高
你可以引用jquery库,然后利用其中的animate方法
$(".main").animate({
//这里可以添加css属性
transform: 'all 2s linear',
}, 2500)//后面的2500代表整个动作完成时间
原生JavaScript的实现不清楚,不能用jQuery,那就用css3来实现
在你的基础上用CSS3实现的
css3 > requestAnimationFrame > setIterval