工大学子网站

目的是仿工大学子这个页面。
首先，由于没有看多少JavaScript相关的书，其内容也没有全部看完。所以对于里面的几个简单特效我都很苦恼，后来经过百度，简单的了解了一下jQuery的简单用法，我发现用jQuery可以很好的解决用不来JavaScript的问题。写得出现了不少问题，欢迎大家指正。我写的源码在下面有下载链接
然后以下是我遇到的几个问题

1.滑动的特效

这个我用jquery解决了，感觉还行，jquery的使用确实让这个过程变得很简单

2.旋转的特效

2.1用css解决

以前没有看css3，今天看了一下css3的几个简单动画特效，以及别人给的实例，css3的强大让我顿时惊呆，看了这些特效我也明白了有些网站的那些花哨的东西是哪里来的了。
一些例子

2.2用jQuery解决

然后，我找到了jQuery的旋转插件，直接引入文件就可以使用十分方便。
jquery旋转插件的使用

2.3最终决解方法

使用css3加上jquery控制标签的css来实现

3.发现选择器的使用可以很好的减少代码的重复

以前写代码的时候，我习惯只使用id class这两个选择器，不过我发现有时候专门为了某一个效果写一个id或者class会导致代码的大量重复，然后我就看到了兄弟选择器，子选择器发现非常实用，而且在jquery使用选择器的时候我也减少了不少代码量。
css选择器详解
css选择器

4.position的使用

定位的使用很简单，但是我这次用的时候出现了，在div滑动的时候div的子元素固定不动导致脱离的现象，后来我查了一项发现如果只是实现父子两层的嵌套只需要父亲用position: relative;子元素用position: absolute;就可以实现父子元素的很好合并，改变父元素的参数，子元素会跟着一起跑，实现了他们融为一体，可是如果加上一个孙元素就让我头疼，后来我试了很久发现要想实现三层嵌套需要给父亲用position: relative;子元素写position: relative;孙元素用position: absolute;这样就可以解决问题。

5.未解决问题

最后还有几个问题没有解决，一个是旋转图片归位的效果没有写出来，二是在不同大小的屏幕上面显示的效果不一样，没有做屏幕适配。

源码

下载链接