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高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 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/04/09 魔兽争霸
B2K与车机的中波PK
2021/03/02 无线电
WHOIS类的修改版
2006/10/09 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
理解javascript async的用法
2017/08/22 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python实现图片批量剪切示例
2014/03/25 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
文秘专业自荐信
2013/10/14 职场文书
大型会议策划方案
2014/05/17 职场文书
应届毕业生求职信
2014/05/26 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
《秋思》教学反思
2016/02/23 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
教你部署vue项目到docker
2022/04/05 Vue.js