帝堵抢车位动画制作_学习笔记

首页免费课帝堵抢车位动画制作笔记

帝堵抢车位动画制作

                
                慕课官方号
            页面重构设计

                    查看讲师更多课程 
                    慕课官方号讲师的其他课程
                
JavaScript入门篇 
入门·741426
免费课程
                                
JavaScript进阶篇
入门·468966
免费课程
                                
                难度初级
            
                时长 1小时 0分
            
                学习人数
            
综合评分9.57
                            177人评价
                        查看评价
                                9.6
                                内容实用
                            
                                9.6
                                简洁易懂
                            
                                9.5
                                逻辑清晰

最热最新

深海苏眉鱼 05:40

笔记的

查看全部

0 采集收起来源：抢车位动画效果制作
2017-04-14
qq_我是你不可遗失的半边天_0

实现汽车上下滑动代码 1.html代码 <!DOCTYPE html> <html> <head> <title>停车动画</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <img class="car" src="http://img1.sycdn.imooc.com//5343d553000107a107200701.jpg" width="350" height="341"/> </body> </html> 2.css代码 *{ padding:0px; margin:0px; } body{ background:#D5DEE7; } .car{ position:relative; top:30; left:300; } 3jquery代码 $(document).ready(function(){ $('.car').hover(function(){ $(".car").animate({top:'500px'},{duration:600}); },function() { $(".car").animate({top:'0px'}); } ); });

查看全部

0 采集收起来源：挑战实战题
2018-03-22
慕粉3749008

<html> <head> <title>停车动画</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head>

查看全部

0 采集收起来源：挑战实战题
2018-03-22
黑娃_0001

$(document).ready(function(){ $(".car").hover( function(){ $(".car").animate({top:"300px"},{duration:"300"}); }, function(){ $(".car").animate({top:"0px"},{duration:"300"}); }); }); *{ padding:0px; margin:0px; } body{ background:#D5DEE7; } .car{ position:absolute; top:0; left:0; }

查看全部

0 采集收起来源：挑战实战题
2018-03-22
我的名字你的姓

.boxgrid{ width: 720px; height: 701px; border: solid 2px #8399AF; } .boxgrid img.car{ position:absolute; top:0; left:720px; }

查看全部

1 采集收起来源：基础实践题
2017-01-17
我的名字你的姓

$('.boxgrid').hover(function(){ $(".car".)animate({left:'0px'},{duration:300});)},function(){ $(".car").animate({left:'720px'},{duration:300});});

查看全部

0 采集收起来源：基础实践题
2018-03-22
Captain72

.hover() .animate()

查看全部

0 采集收起来源：挑战实战题
2016-11-29
im 05:34

hover函数 animate动画 duration属性

查看全部

0 采集收起来源：抢车位动画效果制作
2016-11-26
im 01:31

思路123

查看全部

0 采集收起来源：抢车位动画效果制作
2016-11-26
rhyme027

$(document).ready(function(){ $('.car').hover(function(){ $('.car').animate({top:"600px"},{duration:600}); },function(){ $('.car').animate({top:"0"},{duration:600}); }) });

查看全部

0 采集收起来源：挑战实战题
2018-03-22
channel_ho

CSS样式定位车图片位置（.boxgrid img.car） position:absolute; top:0; left:720px; 用jQuery代码让车动起来 1.设置移进车位 $(".car").animate({left:'0px'},{duration:300}); 2.设置移出车位 $(".car").animate({left:'720px'},{duration:300});

查看全部

0 采集收起来源：基础实践题
2018-03-22
channel_ho 06:11

光标移入执行函数1（车移进车位），移除执行函数2（车移出车位） $(document).ready(function(){ $(".boxgrid").hover(function(){ $(".car").animate({left:0px},{duration:300}); },function(){ $(".car").animate({left:720px},{duration:300}); }); });

查看全部

0 采集收起来源：抢车位动画效果制作
2018-03-22
channel_ho 06:25

完整代码

查看全部

0 采集收起来源：抢车位动画效果制作
2016-09-08
channel_ho 06:05

光标移入执行函数1，移除执行函数2

查看全部

0 采集收起来源：抢车位动画效果制作
2016-09-08

首页上一页 1 2 3 4 5 6 7 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1、熟练掌握html基础知识。 2、熟练掌握css样式基础知识。

老师告诉你能学到什么？: 1、掌握position:absolute定义绝对定位方法。 2、掌握position:relative定义相对坐标原点方法。 3、掌握jQuery中hover(函数1，函数2 )事件用法，模拟光标悬停。 4、掌握jQuery中animate( )函数用法，创建自定义动画。

微信扫码，参与3人拼团

热搜

最近搜索清空

帝堵抢车位动画制作