jquery实现带缩略图的可定制高度画廊效果(5种)


Posted in Javascript onAugust 28, 2015

本文实例讲述了jquery可定制高度画廊效果。分享给大家供大家参考。具体如下:
这是一款基于jquery可定制高度画廊效果代码,很有艺术感,带有五种飞行展示效果,最大的特点是可以定制高度,是一款非常实用的特效代码,值得大家学习。
运行效果图:                             -------------------查看效果 下载源码-------------------

jquery实现带缩略图的可定制高度画廊效果(5种)

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jquery图片滚动放大效果代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css">
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="jquery.ad-gallery.js"></script>
 <script type="text/javascript">
 $(function() {
 $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
 $('img.image1').data('ad-title', 'Title through $.data');
 $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
 $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
 var galleries = $('.ad-gallery').adGallery();
 $('#switch-effect').change(
 function() {
 galleries[0].settings.effect = $(this).val();
 return false;
 }
 );
 $('#toggle-slideshow').click(
 function() {
 galleries[0].slideshow.toggle();
 return false;
 }
 );
 $('#toggle-description').click(
 function() {
 if(!galleries[0].settings.description_wrapper) {
  galleries[0].settings.description_wrapper = $('#descriptions');
 } else {
  galleries[0].settings.description_wrapper = false;
 }
 return false;
 }
 );
 });
 </script>

 <style type="text/css">
 * {
 font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
 color: #333;
 line-height: 140%;
 }
 select, input, textarea {
 font-size: 1em;
 }
 body {
 padding: 30px;
 font-size: 70%;
 width: 1250px;
 }
 h2 {
 margin-top: 1.2em;
 margin-bottom: 0;
 padding: 0;
 border-bottom: 1px dotted #dedede;
 }
 h3 {
 margin-top: 1.2em;
 margin-bottom: 0;
 padding: 0;
 }
 .example {
 border: 1px solid #CCC;
 background: #f2f2f2;
 padding: 10px;
 }
 ul {
 list-style-image:url(list-style.gif);
 }
 pre {
 font-family: "Lucida Console", "Courier New", Verdana;
 border: 1px solid #CCC;
 background: #f2f2f2;
 padding: 10px;
 }
 code {
 font-family: "Lucida Console", "Courier New", Verdana;
 margin: 0;
 padding: 0;
 }

 #gallery {
 padding: 30px;
 background: #e1eef5;
 }
 #descriptions {
 position: relative;
 height: 50px;
 background: #EEE;
 margin-top: 10px;
 width: 640px;
 padding: 10px;
 overflow: hidden;
 }
 #descriptions .ad-image-description {
 position: absolute;
 }
 #descriptions .ad-image-description .ad-description-title {
 display: block;
 }
 </style>
 <title>jQuery画廊</title>
</head>
<body>
<div align="center">
 <div id="container">
 <h1>jQuery画廊插件</h1>
 <p>一个高度可定制的画廊jQuery插件。</p>

 <div id="gallery" class="ad-gallery">
 <div class="ad-image-wrapper">
 </div>
 <div class="ad-controls">
 </div>
 <div class="ad-nav">
 <div class="ad-thumbs">
  <ul class="ad-thumb-list">
  <li>
  <a href="images/1.jpg">
  <img src="images/thumbs/t1.jpg" class="image0">
  </a>
  </li>
  <li>
  <a href="images/10.jpg">
  <img src="images/thumbs/t10.jpg" title="A title for 10.jpg" alt="This is a nice, and incredibly descriptive, description of the image 10.jpg" class="image1">
  </a>
  </li>
  <li>
  <a href="images/11.jpg">
  <img src="images/thumbs/t11.jpg" title="A title for 11.jpg" longdesc="http://coffeescripter.com" alt="This is a nice, and incredibly descriptive, description of the image 11.jpg" class="image2">
  </a>
  </li>
  <li>
  <a href="images/12.jpg">
  <img src="images/thumbs/t12.jpg" title="A title for 12.jpg" alt="This is a nice, and incredibly descriptive, description of the image 12.jpg" class="image3">
  </a>
  </li>
  <li>
  <a href="images/13.jpg">
  <img src="images/thumbs/t13.jpg" title="A title for 13.jpg" alt="This is a nice, and incredibly descriptive, description of the image 13.jpg" class="image4">
  </a>
  </li>
  <li>
  <a href="images/14.jpg">
  <img src="images/thumbs/t14.jpg" title="A title for 14.jpg" alt="This is a nice, and incredibly descriptive, description of the image 14.jpg" class="image5">
  </a>
  </li>
  <li>
  <a href="images/2.jpg">
  <img src="images/thumbs/t2.jpg" title="A title for 2.jpg" alt="This is a nice, and incredibly descriptive, description of the image 2.jpg" class="image6">
  </a>
  </li>
  <li>
  <a href="images/3.jpg">
  <img src="images/thumbs/t3.jpg" title="A title for 3.jpg" alt="This is a nice, and incredibly descriptive, description of the image 3.jpg" class="image7">
  </a>
  </li>
  <li>
  <a href="images/4.jpg">
  <img src="images/thumbs/t4.jpg" title="A title for 4.jpg" alt="This is a nice, and incredibly descriptive, description of the image 4.jpg" class="image8">
  </a>
  </li>
  <li>
  <a href="images/5.jpg">
  <img src="images/thumbs/t5.jpg" title="A title for 5.jpg" alt="This is a nice, and incredibly descriptive, description of the image 5.jpg" class="image9">
  </a>
  </li>
  <li>
  <a href="images/6.jpg">
  <img src="images/thumbs/t6.jpg" title="A title for 6.jpg" alt="This is a nice, and incredibly descriptive, description of the image 6.jpg" class="image10">
  </a>
  </li>
  <li>
  <a href="images/7.jpg">
  <img src="images/thumbs/t7.jpg" title="A title for 7.jpg" alt="This is a nice, and incredibly descriptive, description of the image 7.jpg" class="image11">
  </a>
  </li>
  <li>
  <a href="images/8.jpg">
  <img src="images/thumbs/t8.jpg" title="A title for 8.jpg" alt="This is a nice, and incredibly descriptive, description of the image 8.jpg" class="image12">
  </a>
  </li>
  <li>
  <a href="images/9.jpg">
  <img src="images/thumbs/t9.jpg" title="A title for 9.jpg" alt="This is a nice, and incredibly descriptive, description of the image 9.jpg" class="image13">
  </a>
  </li>
  </ul>
 </div>
 </div>
 </div>


 <p>选择飞行效果:<select id="switch-effect">
 <option value="slide-hori">水平滑动</option>
 <option value="slide-vert">垂直平滑</option>
 <option value="resize">收缩/伸长</option>
 <option value="fade">褪色效果</option>
 <option value="">无效果</option>
 </select><br>
 </p>
 </div>
<div style="text-align:center;clear:both">
</body>
</html>

以上就是为大家分享的jquery可定制高度画廊效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
javascript 时间比较实现代码
Oct 28 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
树结构之JavaScript
Jan 24 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 #Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 #Javascript
jquery图片滚动放大代码分享(2)
Aug 28 #Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 #Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 #Javascript
jquery实现左右滑动菜单效果代码
Aug 27 #Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 #Javascript
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php单例模式示例分享
2015/02/12 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python中的jquery PyQuery库使用小结
2014/05/13 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Django app配置多个数据库代码实例
2019/12/17 Python
python实现文字版扫雷
2020/04/24 Python
python db类用法说明
2020/07/07 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
迎国庆横幅标语
2014/10/08 职场文书
财务部会计岗位职责
2015/02/03 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2015年电工工作总结
2015/04/10 职场文书
借条格式范本
2015/05/25 职场文书
工作后的感想
2015/08/07 职场文书
节约用水广告语60条
2019/11/14 职场文书