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