May 15th, 2008
7 Comments
7 Comments
30个 Ajax/Javscript 滑动门, 滚动栏和滚动条技术
Ajax最主要是为了达到良好的互动效果, 其中滑动和滚动技术的应用是一个重要的设计领域. 在一个有限的空间内, 通过导航或滚动操作查看到全部要展示的内容, 同时, 还要让用户产生觉得操作方便与友好. 下面, 我们收集了30个利用Ajax/Javscript实现的滑动门特效, 滚动栏技术, 滚动条等等滑来滚去的应用示例.
你也可以查看之前发表的一些相关的Ajax和Javascript应用的文章:
- 30个精挑细致的Ajax和Javascript 技巧
- 30多个CSS和JS下拉菜单资源
- 37个Ajax和CSS实现的Tab选项卡切换效果界面
- 40多个Ajax,DHTML和Javascript应用技术
滑动技术
1) Slider- 垂直或水平的滑块.
2) 简单的图片滑动控制 幻灯片展示-一步一步的教你如何创建一个可以利用滑块控制的幻灯片展示.
- 下载教程 Here
3) 易于使用的滑块技术-通过简单的代码实现的滑块技术, 甚至不需要 JavaScript 和 CSS.
4) 个性的滑块展示-一个滑动控制的颜色代码示例.
5) Slider-充分支持鼠标和键盘控制。 皮肤使用不同的CSS文件
6) 图像画廊缩略图滑块教程- 简单的使用JavaScript实现的幻灯片显示，比较特别的是使用了图片的缩略图作为滑动块导航, 生成类似FLASH的效果。该教程详细讲解了如何安装和配置代码。所包含的示例使用不到10行代码。
7) Accessible News Slider- Accessible News Slider是一个基于 jQuery的JavaScript插件.
8 ) Yahoo! UI Library: Slider- 这是一个 UI 滑动控制组件, 可让使用者在有限的范围内沿一或两条轴线调整取值.
9) Fireworks.js- Fireworks.js是一个JavaScript创建的脚本程序, 使用了多个滑块. 可以用来生成烟花效果的特效.
10) Slider Gallery- Apple风格的一个滑动条滚动展示产品或服务的脚本. 非常的酷.
11) 2J News Slider - Joomla Ajax Slider- 一个非常醒目的滑动门效果.
12) Inline Range Slider
13) Ajax Image Sliders Part 2: Intervals with On Demand
14) Multiple Sliders in one page
15) Slider Using PHP, Ajax And Javascript- 一个使用Ajax 和PHP, Javascript建立的滑动脚本.
16) Coda-Slider- 神奇的 jQuery Coda-Slider滑动门, 效果非常棒.
17) jQuery Multimedia Portfolio- 这个插件基于jquery, 最大的特点是可以自动侦测延长滑动条.
滚动技术
18)Ultimate JavaScript Scroller and Slider- 这种多用途的和轻量级的JavaScript可以很容易滚动文本块，制作幻灯片，投影片之间的内容，代号和创造更多。
.
19) df Javascript Smooth Scroll- 一个超级小巧平滑滚动的JavaScript 。此脚本是过于简单，理解和使用。只不过是在玩弄锚标记。包括JavaScript和您的设定，以smoooooooooth滚动。
20) jQuery.SerialScroll- 这个插件让你可以轻松地将任何动画的一系列要素按顺序滚动。你可以使用它来作为一节滑块，滚轮的文本，幻灯片和股票新闻等。
22) Easy Scroll: Accessible Content Scroller- 由Alen Grakalic开发的一个轻量级的脚本, 容易滚动，独立运行, 不需要任何脚本框架.
21) Scrolling Div Content with Graphical Scrollbars- 可以实现纵向或横向内容的滚动，滚动地区可以定位是绝对或相对。拥有许多附加功能。
22) Scrollable content -显示内容只限于在一个地区。用户可以查看整个内容，通过自定义/下卷动图像。
23) Pamoorama- 基本上它是只显示一部分内容，你可以通过鼠标的移动查看其它内容。 类似于FLASH的小窗口/帧.
24) How To Unobtrusively Scroll A Div With Prototype & Scriptaculous
25) mooSlideBox 3- mooSlideBox v3 一个简单小巧的类Lightbox 灯箱效果脚本, 兼容 IE 6/7, Opera and Firefox.
26) jqGalScroll v2.1 (Photo Gallery)-这是一个图像滚动画廊脚本，可以创建一个平滑滚的动图片库, 支持垂直，水平，或对角的图片入场和出场效果, 支持分类, 让你方便切换.
27) DHTML Scroller- 此脚本可以实现通过简单的函数调用达到一个完全可拖动和直观的滚动。它是小巧且快速的.
优秀的自定义滚动栏
28)Mootools Styled Scrollbar- 这个示例教你如何使用Mootools自定义你网页中出现的滚动栏.
29) FleXcroll- 灵活和易于使用的自定义滚动栏. 可以生成各种漂亮的滚动栏样式, 且兼容各大主流浏览器.
30)Slider Demos
31)jsScrollbar- 很难找到一个很好的JavaScript滚动栏, 但jsScollbar或许会为你解决这个问题.
英文原文: 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars
翻译: 帕兰映像
留言列表
Comments List图床出问题了？全都看不到啊。
留名不容易
@冷月孤心
谢谢, 已经更正.
貌似在哪儿见到过一个完全用css的滑动，不需要js支持。
@不是俺
是的, 有纯CSS的方法. 如果只是一般需求, 用纯CSS也够了. 但要想效果漂亮, 可控制性强, 还得用JS和AJAX.
不错!