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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
javascript 必知必会之closure
Sep 21 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
jQuery表单验证之密码确认
May 22 jQuery
微信小程序 rich-text的使用方法
Aug 04 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
JS document form表单元素操作完整示例
Jan 13 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
php实现阳历阴历互转的方法
2015/10/28 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
HTML5注册页面示例代码
2014/03/27 HTML / CSS
应届毕业生的个人自我鉴定
2013/10/24 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
交通安全教育制度
2014/02/02 职场文书
2014年党务工作总结
2014/11/25 职场文书
出生证明范本
2015/06/15 职场文书
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android