H5+JS+CSS3实现七夕言情_技术问答

首页免费课 H5+JS+CSS3实现七夕言情问答

H5+JS+CSS3实现七夕言情

                
                Aaron艾伦
            Web前端工程师

                    查看讲师更多课程 
                    Aaron艾伦讲师的其他课程
                
H5+JS+CSS3 实现圣诞情缘
中级·122015
免费课程
                                
jQuery基础(二)—DOM篇
入门·114009
免费课程
                                
jQuery基础(四)—动画篇
初级·85049
免费课程
                                
jQuery基础(三)—事件篇
入门·89994
免费课程
                                
jQuery基础 (一)—样式篇
入门·217503
免费课程
                                
jQuery源码解析（DOM与核心模块）
高级·71436
免费课程
                                
                难度中级
            
                时长 2小时25分
            
                学习人数
            
综合评分9.47
                            88人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.2
                                简洁易懂
                            
                                9.4
                                逻辑清晰

全部评论问答未解决精华

qq_一直很安静_8

要实现动画的方式有很多，可以控制小男孩让他向前走，也可以控制场景向后退，方法也很多，可以用css3的animation方法，也可以用jQuery的动画效果，还可以用transform和transition的组合，状态控制可用相对定位绝对定位的top和left值，也可以用translate3d的x轴、y轴、z轴，方式方法和状态也能进行合理的组合

3 3-3 走路的实现

2016-08-23

qq_一直很安静_8

来此解释一下比较受关注的几个问题，var pathY = function() {}（），意思是定义了一个名叫pathY的函数，而且是自动运行的；44行 var $elem就是声明一个jQuery对象，是通过dom节点的className来获取的；getValue（）是一个函数，在前面var getValue = function(className) {}就声明过了，把“.className”传过去就可以得到一个有height和top属性的对象，也就是后面的data对象，有了这个对象就可以得到pathY的值了，OK，解释完毕，大神表喷我。。。

18 3-1 布局的自适应动态调整

2016-08-23

qq_一直很安静_8

要想看得轻松，仅仅会js是远远不够的，还需要css3、jQuery打底

0 2-2 页面之间的卷滚切换效果

2016-08-23

qq_一直很安静_8

js部分最后设置每一个页面li的宽度可以直接用slides.css（）方法，自带隐式的循环处理，这就是jQuery的好处

1 2-1 页面的横向布局

2016-08-23

死了3239144

大笑。。。到这就所有人已经都吓跑了。

0 7-4 转身与logo效果

2016-08-22

error_zhu

当然为了防止混淆自己可以这样定义
var aa = {};
aa.scrollTo =function(x,speed){
element.css({
'transition-timing-function':'linear',
'transition-duration':speed+'ms',
'transform':'translate3d(-'+x+'px,0px,0px)'
});
//return this;
};
return aa;//返回定义的对象

1 2-3 页面切换部分的代码封装

2016-08-22

error_zhu

在swipe.js里声明对象var swipe = {};
对象定义接口的时候才不会出错：
swipe.scrollTo =function(x,speed){
element.css({
'transition-timing-function':'linear',
'transition-duration':speed+'ms',
'transform':'translate3d(-'+x+'px,0px,0px)'
});
return this;//swipe对象方法里的语句，因为HTML不需要也可以
};

1 2-3 页面切换部分的代码封装

2016-08-22

去南极给企鹅洗热水澡

最后一个js文件，直接在这个网页中即可还原压缩，http://tool.oschina.net/codeformat/js

1 9-1 最终效果与总结

2016-08-18

Smile_Mylife

真心觉得没有视频看着好垃圾，看的人反感的不行，还不如直接视频给思路，自己敲代码。

0 2-1 页面的横向布局

2016-08-17

乃尧

很简练的介绍了css3动画效果。

对于触发动画效果的button不可见处理，添加了style属性：

<div class="button" style="position: absolute; bottom:0px">
<button>点击开始动画</button>
</div>

0 3-2 精灵动画的实现

2016-08-16

去南极给企鹅洗热水澡

我遇到这个情况：在每个星星左边会有一个黑色的圆圈。应该是ul自带的格式，在.stars样式下添加list-style: none;即可解决。

1 7-2 星星与水波

2016-08-14

去南极给企鹅洗热水澡

botton是个什么。。。？ button--按钮，bottom--底端

0 7-1 页面的布局

2016-08-14

慕粉3480070

太阳向上移动了！！！

0 5-1 太阳动画效果

2016-08-14

xieqianting

哈哈，老师的声音有特点

1 1-1 课程简介

2016-08-13

去南极给企鹅洗热水澡

我的“灯亮”效果还是会闪烁一下，加不加预加载图片都是这样，怎样能不闪烁呢？

0 6-3 灯光效果

2016-08-12

首页上一页 23 24 25 26 27 28 29 下一页尾页

开始学习

课程须知: 本课程为高级案例课程，其中所用的大部分知识点不做深入剖析，只讲解如何使用，部分代码需要由你自己填充。需要具备如下知识： 1、HTML4、HTML5 2、CSS2、CSS3 3、JavaScript、jQuery 4、面向对象思想

老师告诉你能学到什么？: 1、如何实现页面的无缝滚动 2、如何实现视觉差效果 3、异步编程处理 4、CSS3动画过渡 5、JS动画实现 6、H5的音乐效果

微信扫码，参与3人拼团

热搜

最近搜索清空

H5+JS+CSS3实现七夕言情