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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
HTML的form表单和django的form表单
2019/07/25 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
python通过cython加密代码
2020/12/11 Python
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
社区母亲节活动记录
2014/03/06 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
护士辞职信怎么写
2015/02/27 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
民事诉讼代理词
2015/05/25 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL