近几年来,一个页面的滑动式网站越来越多。尽管这种风格不是适合所有的人,但是还是有必要了解它是怎样实现的。今天我们就通过jQuery来动手制作一个简单的页内滑动式页面。
正式开始之前你可以先下载源码,或者查看Demo。
我们讲要得到的页面是这样:
现在我们开始吧…
HTML
页面只是用了非常简单的HTML – 只有导航栏和一些文字。
首先我们来制作导航。
0...
四月 01, 2012
暂无评论
这是一个在网页设计师中间常常讨论的话题。Adobe Photoshop 入门很难,当你完成你第一个页面设计的时候你的心情好极了。但是如果你不能把这个网站做出来,那又有什么意义呢?
按理说设计者不需要明白任何编程的东西。设计就是——图片中的完美像素。然而还是有很多有才华的人挺身而出,花时间同时学习这两个领域。你可以向你期望的工作推销自己,“是的,我精通设计和标记语言”。我想就几个观点谈论一下这个话题...
三月 28, 2012
暂无评论
50个新近的免费Photoshop笔刷包
Chaos (10 Brushes)
Download Page →
Ribbon (14 Brushes)
Download Page →
Compass (10 Brushes)
Download Page →
Skin & Hair (8 Brushes)
Download Page →
Sa...
九月 14, 2011
2 条评论
前几天我浏览苹果官网的时候,看到苹果MAC页面对不同产品类别的导航切换用到了缓动特效,我非常喜欢这个特效。当用户点击导航的时候看起来就像一个产品消失另外一个产品出现,在运动结束的时候缓动,比如水平反弹。
如果你查看苹果页面的源代码,就会看到他用的是 prototype.js,在jQuery出现以前,曾经非常流行的一个js框架。在本文里面我想用jQuery的easing插件来制作一个跟苹...
九月 08, 2011
2 条评论
在这个photoshop的教程里,我将演示如何绘制一个逼真的摩托罗拉XOOM,它是一个基于Android的平板电脑。我们将使用Photoshop里面的基本矢量绘图工具,图层样式,使用笔刷,手动调整高光和阴影,等等。
预览:
用到的资源:
Icons: Round Theme Icon
Font: AndroidClock
Font And...
九月 05, 2011
2 条评论
随着手机应用的增加卡片式滑动的拖拽效果越来越流行,在不同层次之间滑动给人一种良好的触感,在一些移动WEB应用框架也开始具备这样的特征了,但是我想,这应该能做的更好,不仅仅是移动WEB应用,为什么桌面WEB应用就不能有呢?我来分享一个基于Query UI 制作的一个可拖拽的卡片效果。基本思想很简单,就是结合jQuery UI 的draggable 和 animate属性,当需要滑动卡片的时候通过鼠标...
八月 29, 2011
2 条评论

