为了账号安全,请及时绑定邮箱和手机立即绑定

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
window.onload=function(){
var Oli=document.getElementsByTagName("li");
for (var i = 0; i < Oli.length; i++) {
Oli[i].timer=null;
Oli[i].onmouseover=function(){
startMove(this,400);
}
Oli[i].onmouseout=function(){
startMove(this,200);
}
}
}
<style type="text/css">
*{ margin: 0; padding: 0; list-style: none; }
ul li{ background: #7abcf2; width: 200px; height: 80px; margin: 15px; }
</style>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
这个功能用jq的fadeTo会简单点吧,只要算下渐变的时间就好
zdiv.fadeTo(1000, 0.3)
写的和老师一模一样什么鬼,报错了
老师有个地方写错了,为啥啊它的还有用啊,我的透明度有没变
he老师写的一模一样我的报错还没效果,是视频久了还是?好奇怪
<script>alert('this is script.');</script>
timer = setInterval(function(){
var speed=(target-odiv.offsetLeft)/20;
if(odiv.offsetLeft>=target){
clearInterval(timer);
}else{
odiv.style.left =odiv.offsetLeft + speed+"px"; //变大
}

},500)
function move(target){
clearInterval(timer);
odiv=document.getElementById("div1");

}
我的move可以移除怎么out缩不进去啊 window.onload=function(){
odiv=document.getElementById("div1");
odiv.onmouseover=function(){
move(0);
}
odiv.onmouseout=function(){
move(-200);
}
}
var timer=null;
wode 怎么缩不回去啊?是不是代码有bug呢?可以拉出来,移出及没用
不是最小就1.0倍吗,o.5zenme调的?
vtimer=etinterval(function(target){var speed=0; if(div.offsetleft>target){seed=-10;}else{speed=10;}},30)
window.onload=function(){ var odiv=document.getelemtnbyid("div); odiv.onmouseover=function(){startMOve();}}odiv.stylevar timer=null; function startmove(){ cleatinterval(timer);timer=setinterval(function(){odiv.style.lft=odiv.offsetLeft+10+"px; if(div.offsetleft>=0{clearinterval (timer);}}),30}
没有0.5倍速了
课程须知
1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。
老师告诉你能学到什么?
1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消