jquery用缩略图(5种)实现可定制的高度图库效果

本文中，一个例子讲述了jquery的可定制高度图库效果。分享给大家参考。具体如下：这是一个基于jquery的高度可定制的图库效果代码，很有艺术感，有五种飞行显示效果。最大的特点是高度可以定制。是一个非常实用的特效代码，值得学习。运行渲染：查看效果并下载源代码。

提示：如果浏览器工作不正常，可以尝试切换浏览模式。为大家分享的jquery图片滚动效果代码如下

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN ' ' http://www .w3。org/TR/HTML 4/严格。DTD ' HTML标题链接rel='样式表type=' text/CSS ' href=' jquery。广告画廊。' CSS '脚本类型=' text/JAVAScript ' src=' http : jquery。量滴js /脚本类型=' text/JavaScript ' src=' http 3333数据('公元-desc '，'哇！此描述是通过elm.data('ad-desc ')设置的，而不是使用longdesc属性brAnd .它包含STRONG h/STRONG ow/STRONG o/STRONG/STRONG eet l/STRONG再见.什么？/em这不是超文本标记语言代表的吗？男人.');$('img.image1 ').数据('广告标题','标题到$ '。数据');$('img.image4 ').数据('公元-desc '，'此图像比包装更宽，因此已缩小');$('img.image5 ').数据('公元-desc '，'此图像高于包装，因此已缩小');var galleries=$(' .广告廊)。adGallery()；$("#开关效果").change(function(){ gallery[0])。设置。效果=$(this)).val()；返回false })；$(' #切换-幻灯片显示')。click(function(){ gallers[0].滑动。toggle()；返回false })；$("#切换-描述").单击(function() { if(！画廊[0].设置。description _ wrapper){ 0画廊[0].设置。description _ wrapper=$(' # descriptions ')；} else { gallery[0]。设置。description _ wrapper=false}返回false })；});/script style type=' text/CSS ' * { font-family : ' Lucida Grande '，' Lucida Sans Unicode '，' Lucida Sans '，Verdana，Arial，Sans-serif；颜色： # 333线高： 140%;}选择，输入，文本区域{ font-size : 1em}车身{ padd : 30px font-size : 70%；宽度： 1250像素；} H2 { margin-top : 1.2 em；保证金-底部： 0;padd : 0；边框-底部： 1px虚线# dede de } H3 { margin-top : 1.2 em；保证金-底部： 0;padd : 0；} .示例{ border: 1px固体# CCC背景# f2f2f2padd : 10px } ul { list-style-image : URL(list-style。gif)；} pre { font-family : ' Lucida Console '，' Courier New '，Verdanaborder: 1px固体# CCC背景# f2f2f2padding: 10px }代码{ font-family : ' Lucida Console '，' Courier New '，verdana margin : 0；padd : 0；} #画廊{ padding: 30px背景# e1eef5} #描述{位置：相对；高度： 50px背景： # EEE；页边距-top : 10px；宽度： 640像素；padding: 10px飞越：隐藏；} #描述ad-image-description {位置：绝对值；} #描述。广告图像描述广告-描述-标题{显示： }块；} /style titlejQuery画廊/title/head dydiv align=' center ' div id=' container ' h1jQuery画廊插件/h1 p一个高度可定制的画廊jQuery插件。

/p div id=' gallery ' class=' ad-gallery ' div class=' ad-image-wrapper '/div class=' ad-controls '/div class=' ad-nav ' div class=' ad-thumbs ' ul class=' ad-thumbs-list '阿利href=' images/1。jpg ' img src=' http : images/thumbs/t 1。jpg ' class=' image0 '/A/Li阿利href=' images/10。jpg ' img src=' http图像描述11.jpg' class='image2' /a /li阿利href=' images/12。jpg ' img src=' http : images/thumbs/T12。jpg ' title=' 12。jpg '的标题alt='这是对图像12.jpg' class='image3' /a /li阿利href=' images/13。jpg ' img src=' http 3360 images/A/Li图像的描述14.jpg' class='image5' /a /li阿利href=' images/2。jpg ' img src=' http : images/thumbs/T2。jpg ' title=' 2。jpg '的标题alt='这是对图像2.jpg' class='image6' /a /li阿利href=' images/3。jpg ' img src=' http : images/thumbs/T3 '的一个很好的、令人难以置信的描述。图像的描述4.jpg' class='image8' /a /li阿利href=' images/5。jpg ' img src=' http : images/thumbs/t5。jpg ' title=' 5。jpg '的标题alt='这是对图像5.jpg' class='image9' /a /li阿利href=' images/6。jpg ' img src=' http : images/thumbs/T6。jpg '的一个很好的、令人难以置信的描述。图像的描述7.jpg' class='image11' /a /li阿利href=' images/8。jpg ' img src=' http : images/thumbs/t8。jpg ' title=' 8。jpg '的标题alt='这是对图像8.jpg' class='image12' /a /li阿利href=' images/9。jpg ' img src=' http : images/thumbs/t选择飞行效果：选择id='开关效果'选项值='slide-hori '水平滑动/option选项值='滑动-垂直'垂直平滑/option选项值="调整大小"收缩/伸长/option选项值='褪色'褪色效果/option选项值=' '无效果/option/select br/p/div div style=' text-align : center；clear:both'/body/html以上就是为大家分享的jquery可定制高度画廊效果代码，希望大家可以喜欢。