存档

文章标签 ‘jQuery’

14个顶级的jQuery幻灯与相册插件

2009年9月16日 没有评论
14个顶级的jQuery幻灯与相册插件
2009-01-28 10:39
jQuery现 在越来越被重视，相当多的web2.0网站在采用它来展示其照片库。jQuery效果能够模拟出Flash的效果将一组照片相当优雅地展示在读者面前。下 面我们将为大家介绍14个顶级的jQuery效果。你喜欢的话，可以拿去用在你自己网站的相册上。</div>

galleria
Galleria – Galleria 是一个用js写的相册，算是一个jQuery插件了。它用一段简洁的html代码将照片以画布的形式展开，同时还为你的照片生成缩略图。Galleria 的界面非常友好，你不需要懂得太多代码编写的知识就可以非常容易地使用它。点击<a href=”http://devkick.com/lab/galleria/demo_01.htm” target=”_blank”>这里看看Galleria的演示效果。</div>

jQuery Multimedia Portfolio
jQuery Multimedia Portfolio – 是一个很酷的jQuery插件，它可以将你的照片非常流畅地横向排列出来。更妙的是，它支持多种媒体格式，照片、flv视频甚至MP3音频都可以被它识别 出来。jQuery Multimedia Portfolio会主动判断文件的后缀格式，如果是音频或者视频的话，这个插件可以为其生成一个截图，并将这个截图与其他的照片和谐地排列在一起。图示 为该插件的预览，详细演示请点击此处。</div>

Space Gallery
Space Gallery – 动态地3维展示你的图片，效果看上去像苹果的时空机器一样，很炫！点击<a href=”http://eyecon.ro/spacegallery/” target=”_blank”>这里看详细演示。</div>

jQuery Slider Gallery
jQuery Slider Gallery – 像苹果网页上展示其产品那样，移动滑动块，你希望展示的图片就会随着横向移动。</div>

jQuery jsGallscroll Plugin
jQuery jsGallscroll Plugin – jQuery Gallery Scroller (jqGalScroll)能够制作出带分页的照片展示效果。你可以非常流畅地通过点击按照顺序切换照片，也可以自己点击分页选择你的目标图片。你可以用 这个插件让照片按照水平、垂直或者斜角的方式来切换。</div>

jQuery Cycle Plugin
jQuery Cycle Plugin – 是一个轻量级的幻灯显示插件，要实现它的效果，你需要先安装Torsten Baldes写的InnerFade Plugin，Matt Oakes的<a href=”http://www.matto1990.com/web-design/jquery-plugins/simple-jquery-slideshow/” target=”_blank”>Slideshow Plugin和Benjamin Sterling的<a href=”http://www.benjaminsterling.com/experiments/jqShuffle/” target=”_blank”>jqShuffle Plugin这三个插件。jQuery Cycle Plugin支持鼠标悬停，自动停止，自适应大小，点击触发，渐隐渐现等多种图片切换特效。jQuery Cycle Plugin还支持<a href=”http://jqueryjs.googlecode.com/svn/trunk/plugins/metadata/jquery.metadata.js” target=”_blank”>Metadata Plugin 和 the Easing Plugin这两个插件（可选）。</div>

EO Gallery
EO Gallery – 是一个网页幻灯效果。它基于最基本的jQuery和<a href=”http://codylindley.com/” target=”_blank”>Cody Lindley 的 Thickbox的功能在网页上展示大尺寸图像。EO Gallery符合XHTML 1.0和<a href=”http://jigsaw.w3.org/css-validator/check/referer” target=”_blank”>CSS设计标准。我在Firefox、IE6.0、Safari上测试过EO Gallery，表现很好。它甚至还能在不支持javascript 和 CSS的浏览器上工作，无敌了！
slideViewer
slideViewer – 它能根据你的照片张数生成一个页码表附在幻灯片的底部，每个页码对应一张图片，你可通过点击页码轻松切换图片。</div>

jQuery lightbox plugin
jQuery lightbox plugin – 这个相信大家已经都见识过了，该插件的灵感发源于Lokesh Dhakar的<a href=”http://www.huddletogether.com/projects/lightbox2/” target=”_blank”>LightBox JS。使用这个插件将让你的网页图片已非常优雅轻灵的方式展现在读者面前。</div>

Galleriffic
Galleriffic – 这个jQuery插件为你的照片生成一个精致的缩略图列表，点击缩略图就可以快速查看适当尺寸的预览图了。同时它还提供了原始尺寸图片的下载方式，我觉得用这个插件来制作相册的效果非常好。</div>

pirobox
pirobox -Diego Valobra提供的又一个JS相册脚本。点这里，看看它到底有什么不一样。</div>

jQuery Popeye
jQuery Popeye – 这个插件提供了一个随机展示内嵌图像的脚本。它放大图片的技巧相当聪明。网页设计者无需为放大后的图像专门写一个层，放大后的图像仍旧自然流畅还不影响网 页上其余内容的布局。这对访问者的体验度是很有帮助的。点击<a href=”http://dev.herr-schuessler.de/examples/jquery-popeye/” target=”_blank”>这里看演示。</div>

zoomimage
zoomimage – 这个插件的效果相当时髦还特别体贴。点击缩略图，大图将在内置的弹出窗口中展示，放大后的图像带着一层淡淡的投影和边框，美观极了。点击<a href=”http://hotajax.org/jquery/photos-other-plugins/554-zoomimage-jquery-plugin.html” target=”_blank”>这里看演示及说明。</div>

Dynamic Image Gallery and Slideshow
Dynamic Image Gallery and Slideshow – 这是一个轻量级的相册与幻灯js脚本，总共才3K大小，别看它体积小，它的功能可是相当强大的哦。点击<a href=”http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/” target=”_blank”>这里看演示。</div>
分类: javascript, jQuery 标签: , , ,

jQuery自动根据图片高度宽度缩放

2009年3月15日 没有评论

/* 自动缩略一些大图的小JS

吕 lvjiyong@Gmail.com
http://www.lvjiyong.com/tag/jquery/
更新:2007.9.22
更新2007.9.28

*/
jQuery.fn.ImageAutoSize = function(width,height)
{
$(“img”,this).each(function()
{
var image = $(this);
if(image.width()>width)
{
image.width(width);
image.height(width/image.width()*image.height());
}
if(image.height()>height)
{
image.height(height);
image.width(height/image.height()*image.width());
}
});
}
调用:先引用上面的脚本或将上页的脚本放入自己的JS库,然后只要再加 $(function(){ $(“图片组所在的容器”).ImageAutoSize(限制最大宽,限制最大高);});

分类: jQuery, 转载 标签: ,

精品jQuery插件收集

2009年2月22日 没有评论

jQuery插件

来源：http://parandroid.com/37-plug-ins-even-more-outstanding-jquery/

2) Accessible slider- Illustrations和代码显示如何最简单的制作一个滑动门UI控制条，而不需要任何Javascript或CSS知识．

7) IconDock- a jQuery JavaScript library 这个插件允许你创建一个类似于Mac OS X操作系统Dock菜单的特效菜单.

jQuery 手风琴效果

8 ) Horizontal Accordion-这个插件提供一些简单的选项可以让你轻松控制手风琴的展示效果．

9) HoverAccordion- 这个jQuery插件产生一个漂亮的二级层联菜单

jQuery图像浏览

10) Step Carousel Viewer-一个滑动门应用，内容区域可以是一张图片或是HTML富文本内容．

jQuery图表

12) jQuery + jFlot - 构图，绘画和图表

jQuery编辑器

14) Small Rich Text Editor - 体积小巧，跨浏览器，Ajax图像上传，HTML代码清理，基于PHP后端的富文本编辑器，功能十分全面．

  • Live Demo: Here
  • Download Code: From Here

  • 37个更加出色的jQuery插件

    作为开发人员来说，永远不会停止创建更加好用的Web交互应用脚本或程序，随着jQuery的流行，基于jQuery框架开发的插件几乎是数不胜数．关于jQuery插件，帕兰之前已经发过两篇文章介绍过很多强大的插件:

    但开发之路是永远不会停止的，Noupe又为我们收集整理了近期出现的37个出色的jQuery插件，帕兰映像翻译．

    jQuery滑动门

    1) Slider Gallery- 这是一个模仿Apple网站的jQuery滑动门产品展示． 这个‘产品展示滑动门’就是一个直线前进的画廊，在有限的空间里面显示产品图片，支持Tab标签的滑动和前进后退按钮的滑动．

    2) Accessible slider- Illustrations和代码显示如何最简单的制作一个滑动门UI控制条，而不需要任何Javascript或CSS知识．

    jQuery图像处理

    3) crop, labelOver and pluck-这个jQuery脚本可以让你的访客控制图像，实现截剪图片等操作．

    • Live Demo Of Crop: Here
    • Live Demo of LabelOver: Here
    4) Semitransparent rollovers -一个简单的脚本，让图像实现半透明效果

    • Live Demo Of Crop: Here
    5) Creating A Sliding Image Puzzle Plug-In- 创建出一个基于总容器的拼图效果，非常的特别．

    jQuery 导航菜单

    6) Digg Header- 这是一个仿Digg的导航菜单，宽度可变，下拉菜单，精美的搜索框,简单的颜色更改， 总之是有很多可取之处，很强大的一个导航菜单．

    7) IconDock- a jQuery JavaScript library 这个插件允许你创建一个类似于Mac OS X操作系统Dock菜单的特效菜单.

    jQuery 手风琴效果

    8 ) Horizontal Accordion-这个插件提供一些简单的选项可以让你轻松控制手风琴的展示效果．

    9) HoverAccordion- 这个jQuery插件产生一个漂亮的二级层联菜单

    jQuery图像浏览

    10) Step Carousel Viewer-一个滑动门应用，内容区域可以是一张图片或是HTML富文本内容．

    11) Featured Content Glider-可以在有限空间内展示不同的网页内容，通过分页导航和前后按钮进行操作，支持手动模式和自动的幻灯片播放模式．

    jQuery图表

    12) jQuery + jFlot - 构图，绘画和图表

    13) Accessible charts using canvas and jQuery - 用jQuery把HTML数据以可视化的概念展示出来，生成多种形式的图表，比如线性图，饼图，面积图等．

    jQuery编辑器

    14) Small Rich Text Editor - 体积小巧，跨浏览器，Ajax图像上传，HTML代码清理，基于PHP后端的富文本编辑器，功能十分全面．

    15)markItUp! Universal markup editor-这个插件可以让你把任何Textarea文本框转换成一个标识编辑器.目标编辑器包括Html, Textile, Wiki语法, Markdown, BBcode甚至是你自己的标识系统．

    jQuery Flash插件

    16) jQuery Flash Plugin-这个 jQuery插件可以让你嵌入Flash电影

    17) jMP3- jMP3提供一种简单的方法，通过一个Flash MP3音乐播放器，让你可以播放网路上面大多数的MP3音乐文件．
    using the sleek Flash Single MP3 Player & jQuery.

    jQuery Tab标签

    19) jQuery Tabs-典型的Tabs标签切换插件，没有Javascript可用．

    • Live Demo: Here

    • jQuery LightBox灯箱效果

      20) Fancy Box- 一个新鲜的Lightbotx灯箱效果的插件，主要特点包括自适应窗口图像，为全尺寸图像增加了一个很好，支持相关图像浏览．

      21) Thickbox Plus- Lightbox灯箱效果，自适应图像大．

      • Live Demo: Here
      • Download Code: From Here
      • 27) EasyDrag jQuery Plugin-一处简单的拖拽插件，可以让任何DOM元素实现拖拽效果，没有其它的功能，相对操作起来也就比较简单．

        28) Simple Effects Plugins- 一个新鲜的jQuery特效插件，可以实现闭合，隐藏，显示，褪色和滑动效果等．

        29) Slide out and drawer effect- 这是一个手风琴特效示例, 当鼠标悬浮在标题上面时，内容块就会展示. 这个插件最酷的地方在于其内容块保持了固定的高度．
分类: javascript, jQuery 标签: ,