2008-5-16 09:30
搜索
30个 Ajax/Javscript 滑动门, 滚动栏和滚动条技术
滑动技术1) [url=http://www.phatfusion.net/slider/][color=#0000ff]Slider[/color][/url]- 垂直或水平的滑块. F:l
[0Kn4a9V
e
9s n9F$f5o|T&^)J/B%a7u
[list][*][url=http://www.phatfusion.net/slider/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.phatfusion.net/slider/slider.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]2) [url=http://woork.blogspot.com/2008/03/simple-images-slider-to-create-flickr.html][color=#0000ff]简单的图片滑动控制 幻灯片展示[/color][/url]-一步一步的教你如何创建一个可以利用滑块控制的幻灯片展示.
%?a }"Mf
%\z{)xj
[list][*]下载教程 [url=http://www.box.net/shared/wrujal7s4s][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]3) [url=http://www.filamentgroup.com/lab/developing_an_accessible_slider/][color=#0000ff]易于使用的滑块技术[/color][/url]-通过简单的代码实现的滑块技术, 甚至不需要 JavaScript 和 CSS. ndW([ H9O [ P3V2|
[list][*][url=http://www.filamentgroup.com/examples/slider/index3.php][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]4) [url=http://www.frequency-decoder.com/2007/09/10/unobtrusive-slider-control-revisited][color=#0000ff]个性的滑块展示[/color][/url]-一个滑动控制的颜色代码示例.
Xt
vB'] S B4` e2w
[list][*][url=http://www.frequency-decoder.com/demo/slider-revisited/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.frequency-decoder.com/demo/slider-revisited/slider.js][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]5) [url=http://webfx.eae.net/dhtml/slider/slider.html][color=#0000ff]Slider[/color][/url]-充分支持鼠标和键盘控制。 皮肤使用不同的CSS文件
~b*mv/j4HA
[list][*][url=http://webfx.eae.net/dhtml/slider/demo.html][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://webfx.eae.net/download/slider102.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]6) [url=http://opiefoto.com/articles/photoslider][color=#0000ff]图像画廊缩略图滑块教程[/color][/url]- 简单的使用JavaScript实现的幻灯片显示，比较特别的是使用了图片的缩略图作为滑动块导航, 生成类似FLASH的效果。该教程详细讲解了如何安装和配置代码。所包含的示例使用不到10行代码。 ${C_ Y Y IO\)Dc
[list][*][url=http://opiefoto.com/articles/photoslider#example][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://opiefoto.com/articles/assets/slider/photoslider.tar.gz][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]7) [url=http://www.reindel.com/accessible_news_slider/][color=#0000ff]Accessible News Slider[/color][/url]- Accessible News Slider是一个基于 jQuery的JavaScript插件. "mn
E)fo@*Rb"x
[list][*][url=http://www.reindel.com/accessible_news_slider/#examples][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.reindel.com/accessible_news_slider/accessible-news-slider-1.3-pack.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]8 ) [url=http://developer.yahoo.com/yui/slider/index.html][color=#0000ff]Yahoo! UI Library: Slider[/color][/url]- 这是一个 UI 滑动控制组件, 可让使用者在有限的范围内沿一或两条轴线调整取值.
;Akk1i/A
[list][*][url=http://developer.yahoo.com/yui/examples/slider/slider_vert_swapped.html][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]9) [url=http://www.schillmania.com/projects/fireworks/][color=#0000ff]Fireworks.js[/color][/url]- Fireworks.js是一个JavaScript创建的脚本程序, 使用了多个滑块. 可以用来生成烟花效果的特效. @i+O t7["My i
[list][*][url=http://www.schillmania.com/projects/fireworks/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.schillmania.com/projects/fireworks/fireworks0.9.20050609.zip][color=#0000ff]here[/color][/url][/list][color=#0000ff][/color]10) [url=http://jqueryfordesigners.com/slider-gallery/][color=#0000ff]Slider Gallery[/color][/url]- Apple风格的一个滑动条滚动展示产品或服务的脚本. 非常的酷. %_2~(v&x}
[list][*][url=http://jqueryfordesigners.com/slider-gallery/][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]11) [url=http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,4415/Itemid,35/][color=#0000ff]2J News Slider - Joomla Ajax Slider[/color][/url]- 一个非常醒目的滑动门效果.
bGi
xX,fz
[list][*][url=http://www.2joomla.net/2jnewsslider/2j-news-slider-demo.html][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]12) [url=http://www.hedgerwow.com/360/dhtml/ui-range/demo.html][color=#0000ff]Inline Range Slider[/color][/url]
+x^E%Lr9} X
P @
[list][*][url=http://www.hedgerwow.com/360/dhtml/ui-range/demo.html][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]13) [url=http://www.atalasoft.com/cs/blogs/davidcilley/archive/2008/04/21/ajax-image-sliders-part-2-intervals-with-on-demand.aspx][color=#0000ff]Ajax Image Sliders Part 2: Intervals with On Demand[/color][/url] D u!ga"n:B$o
D7t
[list][*][url=http://www.atalasoft.com/cs/blogs/davidcilley/archive/2008/04/21/ajax-image-sliders-part-2-intervals-with-on-demand.aspx][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]14) [url=http://demos.mootools.net/Slider][color=#0000ff]Multiple Sliders in one page[/color][/url]
z.gmnr4}1C
15) [url=http://roshanbh.com.np/2008/01/slider-using-php-ajax-and-javascript.html][color=#0000ff]Slider Using PHP, Ajax And Javascript[/color][/url]- 一个使用Ajax 和PHP, Javascript建立的滑动脚本. [list][*][url=http://www.roshanbh.com.np/slider/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.roshanbh.com.np/slider/slider_php_ajax_javascript.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]16) [url=http://www.ndoherty.com/coda-slider][color=#0000ff]Coda-Slider[/color][/url]- 神奇的 jQuery Coda-Slider滑动门, 效果非常棒.
'U/T iC K7s)W
[list][*][url=http://www.ndoherty.com/demos/coda-slider/1.1.1/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.ndoherty.com/demos/coda-slider/1.1.1/coda-slider.1.1.1.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]17) [url=http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=en][color=#0000ff]jQuery Multimedia Portfolio[/color][/url]- 这个插件基于jquery, 最大的特点是可以自动侦测延长滑动条.
I)TPL/U u-d&z
[list][*][url=http://www.openstudio.fr/jquery/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.openstudio.fr/download/jquery.multimedia-portfolio.zip][color=#0000ff]Here[/color][/url][/list]_sKZ&? zQ
8S)z X$L,o Y Z
[[i] 本帖最后由 搜索 于 2008-5-16 09:32 编辑 [/i]]
2008-5-16 09:31
搜索
滚动技术18)[url=http://www.leigeber.com/2008/05/ultimate-javascript-scroller-and-slider/][color=#0000ff]Ultimate JavaScript Scroller and Slider[/color][/url]- 这种多用途的和轻量级的JavaScript可以很容易滚动文本块，制作幻灯片，投影片之间的内容，代号和创造更多。/di^$| b5A ^6GA3f
.g9|ps p.P5Q8]
9[ z#m!Ye%Mf]
[list][*][url=http://sandbox.leigeber.com/contentslider/slider.html][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.leigeber.com/wp-content/uploads/2008/05/contentslider.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]19)[url=http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/][color=#0000ff] df Javascript Smooth Scroll[/color][/url]- 一个超级小巧平滑滚动的JavaScript 。此脚本是过于简单，理解和使用。只不过是在玩弄锚标记。包括JavaScript和您的设定，以smoooooooooth滚动。
@mn m]
[list][*][url=http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.dezinerfolio.com/wp-content/plugins/wp-downloadMonitor/download.php?id=16][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]20)[url=http://flesler.blogspot.com/2008/02/jqueryserialscroll.html][color=#0000ff] jQuery.SerialScroll[/color][/url]- 这个插件让你可以轻松地将任何动画的一系列要素按顺序滚动。你可以使用它来作为一节滑块，滚轮的文本，幻灯片和股票新闻等。
wZOc.[$h
[list][*][url=http://flesler.webs.com/jQuery.SerialScroll/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://plugins.jquery.com/files/jquery.serialScroll-1.1.2.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]22)[url=http://cssglobe.com/post/1495/easy-scroll-accessible-content-scroller][color=#0000ff] Easy Scroll: Accessible Content Scroller[/color][/url]- 由Alen Grakalic开发的一个轻量级的脚本, 容易滚动，独立运行, 不需要任何脚本框架. N{q-n vfR0p
[list][*][url=http://cssglobe.com/lab/easyscroll/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://cssglobe.com/lab/easyscroll/easyscroll.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]21)[url=http://www.dyn-web.com/code/scroll/][color=#0000ff] Scrolling Div Content with Graphical Scrollbars[/color][/url]- 可以实现纵向或横向内容的滚动，滚动地区可以定位是绝对或相对。拥有许多附加功能。 G$AqH&Jf$w(u
[list][*][url=http://www.dyn-web.com/code/scroll/horiz.php][color=#0000ff]ive Demo[/color][/url][*]Download from [url=http://www.dyn-web.com/zipped/dw_scroll.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]22)[url=http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm][color=#0000ff] Scrollable content [/color][/url]-显示内容只限于在一个地区。用户可以查看整个内容，通过自定义/下卷动图像。
Vwrva5r5[4I
[list][*][url=http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]23) [url=http://www.silverscripting.com/pamoorama/index.php][color=#0000ff]Pamoorama[/color][/url]- 基本上它是只显示一部分内容，你可以通过鼠标的移动查看其它内容。 类似于FLASH的小窗口/帧. Y#NaFF
[list][*][url=http://www.silverscripting.com/pamoorama/sample1.html][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.silverscripting.com/pamoorama/pamoorama0.3.js][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]24) [url=http://www.garyharan.com/index.php/2007/11/26/how-to-unobtrusively-scroll-a-div-with-prototype-scriptaculous/][color=#0000ff]How To Unobtrusively Scroll A Div With Prototype & Scriptaculous[/color][/url] U Au)[:T8U
[list][*][url=http://www.wholewheatweb.com/scroll_to.html][color=#0000ff]Live Demo[/color][/url][*]Another Demo [url=http://www.wholewheatweb.com/scroll_window.html][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]25) [url=http://www.artviper.net/test/ajaxslide/][color=#0000ff]mooSlideBox 3[/color][/url]- mooSlideBox v3 一个简单小巧的类Lightbox 灯箱效果脚本, 兼容 IE 6/7, Opera and Firefox.
1G!Y:B O'ly
[list][*][url=http://www.artviper.net/test/ajaxslide/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.artviper.net/test/ajaxslide/mooSlideX.js][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]26) [url=http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/][color=#0000ff]jqGalScroll v2.1 (Photo Gallery)[/color][/url]-这是一个图像滚动画廊脚本，可以创建一个平滑滚的动图片库, 支持垂直，水平，或对角的图片入场和出场效果, 支持分类, 让你方便切换. V6qR)B/iZ,]
[list][*][url=http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://bs-jquery-plugins.googlecode.com/files/jqGalScroll.2.1.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]27) [url=http://www.twinhelix.com/dhtml/divscroll/][color=#0000ff]DHTML Scroller[/color][/url]- 此脚本可以实现通过简单的函数调用达到一个完全可拖动和直观的滚动。它是小巧且快速的. &hB~8[O'J DU
[list][*][url=http://www.twinhelix.com/dhtml/divscroll/demo/][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.twinhelix.com/dhtml/divscroll/divscroll.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]优秀的自定义滚动栏28)[url=http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/][color=#0000ff]Mootools Styled Scrollbar[/color][/url]- 这个示例教你如何使用Mootools自定义你网页中出现的滚动栏.
/k[ P9c!B5u b:T cu(r
+w7K{@%M1x-rX
[list][*][url=http://www.solutoire.com/experiments/scrollbar/index.html][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]29)[url=http://www.hesido.com/web.php?page=customscrollbar][color=#0000ff] FleXcroll[/color][/url]- 灵活和易于使用的自定义滚动栏. 可以生成各种漂亮的滚动栏样式, 且兼容各大主流浏览器.
9\
c }l"r jU}n0A
[list][*][url=http://www.hesido.com/web.php?page=customscrollbar][color=#0000ff]Live Demo[/color][/url][*]Download from [url=http://www.hesido.com/downloads/webrelated/flexcrolljs.zip][color=#0000ff]Here[/color][/url][/list][color=#0000ff][/color]30)[url=http://www.aldenta.com/examples/script.aculo.us/][color=#0000ff]Slider Demos[/color][/url]
F;wj-p;w
[list][*][url=http://www.aldenta.com/examples/script.aculo.us/slider-scrollbar.html][color=#0000ff]Live Demo[/color][/url][/list][color=#0000ff][/color]31)[url=http://www.n-son.com/scripts/jsScrolling/jsScrollbar.html][color=#0000ff]jsScrollbar[/color][/url]- 很难找到一个很好的JavaScript滚动栏, 但jsScollbar或许会为你解决这个问题. *f4o!^g
eSm
[list][*][url=http://www.n-son.com/scripts/jsScrolling/example2.html][color=#0000ff]Live Demo[/color][/url][/list]