如何用Jquery做图片展示效果

一. 前言

　到底用JQuery做出怎样的展示效果? 让我们先来看一下！网页加载时，如图所示：

二.本人思路

这个效果初学者看起来好像有点复杂,其实不太难，关键是理清思路，从后端的数据库中找出我们要展示的图档，将其放在一个特定的容器<div class='popshow'></div>里并且每个文件对象的个数都按照一下的规格进行设置：

<img src="00031a.jpg" width="120" height="90" alt="Image Gallery #1" rel=00031.jpg>除了正常的信息外,我们将alt当作我们要显示的图片说明，而将rel是要展示的图片位置与图文件名（大图）.

三. 图片展示效果实现

1.样式代码

 1     <style>
 2         html
 3         {
 4             /*background-color:black;*/
 5             font:70% Verdana;
 6             color:#ACACB0
 7         }
 8         a{
 9          color:white;
10          text-decoration: none;
11          font-weight: bold;
12          border-bottom: 1px dotted black;
13          cursor: help;
14         }
15         img.pop{
16         position: absolute;
17         border: 10px solid #214263;
18         z-index: 1;
19         }
20         .more{
21         background: #214263;
22         color:white;
23         position: absolute;
24         border: 10px solid #214263;
25         z-index: 2;
26         }
27     </style>

2.图片展示代码

 1 <body>
 2     <center>
 3     <b>Image Gallery</b>
 4     </center>
 5     <div class="popshow">
 6         <img src="00031a.jpg" width="120" height="90" alt="Image Gallery #1" rel=00031.jpg>
 7         <img src="00032a.jpg" width="120" height="90" alt="Image Gallery #2" rel=00032.jpg>
 8         <img src="00033a.jpg" width="120" height="90" alt="Image Gallery #3" rel=00033.jpg>
 9         <img src="00034a.jpg" width="120" height="90" alt="Image Gallery #4" rel=00034.jpg>
10         <img src="00035a.jpg" width="120" height="90" alt="Image Gallery #5" rel=00035.jpg>
11         <img src="00036a.jpg" width="120" height="90" alt="Image Gallery #6" rel=00036.jpg>
12         <img src="00037a.jpg" width="120" height="90" alt="Image Gallery #7" rel=00037.jpg>
13     </div>
14     <div id=dis class=more style="display:none" ></div>
15     <div id=next class=more style="display:none" ></div>
16     <div id=prev class=more style="display:none" ></div>
17 </body>

3.jquery代码

  1 <script src="../../Scripts/jquery-2.0.3.min.js"></script>
  2 <script>
  3     $(function (){
  4
  5         // 怎么做? 让我们看一段程序。
  6         var myshow, mywidth, myheight, showpic, mytitle, mynext, myprev, mylength, index, temp, shownext, showprev;
  7
  8         // 先将会用到的变量作一个设定.
  9         // 我们设定一个数组w,并求取所有图片的个数,然后利用一个each()循环将.popshow的Img 利用clone() 复制一份,放到w里,如此一来我们就有
 10         // 一个所有图文件img对象的数组,可以让我们随时调用。
 11         var w = new Array();
 12         mylength = $(".popshow img").size();
 13         $(".popshow img").each(function(e){
 14             temp = $(this).clone();
 15             w[e] = temp;
 16         });
 17
 18         $(".popshow img").click(function(){
 19             myshow = $(".popshow img").index(this);
 20             doimg(myshow);
 21             return false;
 22         });
 23
 24         // 测试数组并输出至控制台
 25         //$.each(w, function (e, i) { 26         //    console.log("e:" + e + "- i" + i.href + "-");
 27         //});
 28
 29         // 我们先定义当.popshow 下的img 被Click时要做的事情
 30         // 使用index()求得目前被按的图形在.popshow下img的index是什么,求得的是一个数值,将这个数值传给子程序doimg(),所以我们使用doing(myshow)
 31         // 为什么要设定一个子程序,doimg()？因为鼠标按下要求做展示的有两个以上的部位，一个是图形，一个是Next的对象,一个是Prev的对象
 32         // 为免程序代码重复,所以我们写了一个专门做图形展示的子程序doimg();
 33         // myshow = $(".popshow img").index(t);
 34         // 让我们来看一下doimg()
 35         function doimg(index){
 36             console.log(index);
 37             /// 首先把正在展示的对象(如果有的话,Id = this_show)清除掉,因为doimg会要求传入一个值(index),这个值就是要展示的图形的index值.
 38             /// 其用parseInt()（避免字符串而不可以计算）变成可以计算的变量,下一张的mynext就是传入值加1的值,前一张就是传入值减1的值
 39             /// 如果下一张的index值大于或等于图形个数,mynext 就是0 如果上一张小于0 就是图形个数减1作为数组最后的index来展示。
 40             $("#this_show").remove();
 41             index = parseInt(index);
 42             mynext = index + 1;
 43             myprev = index - 1;
 44             if (mynext >= mylength) {
 45                 mynext = 0;
 46             }
 47             if (myprev < 0) {
 48                 myprev = mylength - 1;
 49             }
 50
 51             /// 将要展示的图形从w的数组中引到变量kkk里,我们利用new Image()的方法建立一个
 52             /// 新的图形对象,主要的原因是想要找出将要展示的（大图）的宽与高,因为等一下我们要求出的宽与高
 53             /// 来定位图形的显示位置,让其显示整个网页的正中央,并借此调整Next,Prev与文字说明的位置
 54             var kkk = w[index];
 55             var myImage = new Image();
 56             myImage.src = $(kkk).attr('rel')
 57             // 求得大图的src位置
 58             mytitle = $(kkk).attr('alt')
 59             // 求得文字说明
 60             mywidth = 500;
 61             // 大图的宽
 62             myheight = 375;
 63            /// debugger;
 64             // 大图的高
 65             showpic = '<img src=' + myImage.src + '>';
 66             // showpic已有目前要展示的大图的完整Html描述
 67
 68             // 将showpic加入id=this_show并加入css的class pop(已设定于网页中),且加入定位的Css信息,
 69             // 完成后将其用appendTo()加入网页的body后面,并将其隐藏。
 70             $(showpic).attr("id", "this_show").addClass('pop').css({
 71                 'left': ($('body').width() - mywidth) / 2,
 72                 'top': 100,
 73                 'width': mywidth,
 74                 'height':myheight
 75             }).appendTo('body').hide();
 76
 77             $('.popshow').css({ 'opacity': 0.4 });
 78             // 将原本的小图串(.popshow)的透明度减到0.4
 79             $("#dis").css({
 80                 'left': ($('body').width() - mywidth) / 2,
 81                 'top':100,'opacity':0.7
 82             }).html(mytitle);
 83
 84             // Next
 85             $("#next").css({
 86                 'left': ($('body').width() + mywidth - 70) / 2,
 87                 'top':460,'opacity':0.7
 88             });
 89
 90             // Prev
 91             $("#prev").css({
 92                 'left': ($('body').width() - mywidth) / 2,
 93                 'top':460,'opacity':0.7
 94             });
 95
 96             // 对prev定位与降低透明度
 97             shownext = '<a href=# rel='+mynext+'>Next</a>';
 98             showprev = '<a href=# rel='+myprev+'>PREV</a>';
 99
100             // 产生Next与Prev的链接与文字
101             // 将产生的链接分别写入next与prev的DIV中
102             $("#next").html(shownext);
103             $("#prev").html(showprev);
104
105
106             $('.more').show("fast");
107             $("#this_show").fadeIn("slow");
108             return false
109         }
110
111         // 因为当初我们在产生next及prev的链接时就已将下一张的index放在链接a的rel里面，
112         // 现在我们将其取出来并直接调用doimg(),将index传给它。
113         //
114         $("#next").click(function () {
115             var nindex = $("#next a").attr('rel');
116             doimg(nindex);
117             return false
118         });
119
120         $("#prev").click(function () {
121             var pindex = $("#prev a").attr('rel');
122             doimg(pindex);
123             return false;
124         });
125
126         // 最后我们要设定一个关掉展示与还原图片（小图）的透明度功能。
127         $(document).click(function(){
128             $('.popshow').css({ 'opacity': 1 });
129             $(".more").hide();
130             $("#this_show").remove();
131         });
132     });
133 </script>

四. 举一反三

　　less is more ，贪多未必能学好技术，关键还是思考，举一反三，这个例子我们可以联想很多类型的功能比如（购物车，产品展示，图库等等）多需要图片放大的功能，可以适当的进行修改源代码均可实现。

五. 下载
代码下载

转载于:https://www.cnblogs.com/binb/p/base_jquery.html

如何用Jquery做图片展示效果相关推荐

jQuery实例：图片展示效果
原文地址为: jQuery实例:图片展示效果开始之前,我就喜欢先看一下效果: 张娜拉,韩国的 My Digital Story 不知道是什么图来的我的Logo,Studio拼错了都不知道,汗一个. ...
Revealing图片展示效果（jQuery）
Revealing图片展示效果(jQuery),单击"更多信息"按钮,图片的缩略图将展现为全尺寸图片和附加信息,兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.head区域引用 ...
15款JQuery图片展示效果插件
在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,多用途的,时髦的jquery图片展示效果.真的要感谢jQuer ...
小猿圈用jQuery实现手风琴图片展示效果
对web前端了解的同学会知道jQuery是现在前端中使用的框架之一,但是你知道jQuery可以做到一些你意想不到的效果吗?下面小猿圈web前端老师用jQuery实现手风琴图片展示效果,希望对你有所帮助 ...
《Hexo: 从零开始编写自己的主题》4. fancybox优化图片展示效果、代码高亮以及数学公式
<Hexo: 从零开始编写自己的主题> 1. Hexo概述以及Hexo工作原理 2. 入门Hexo主题编写 3. 优化样式,设计自己的主题 4. fancybox优化图片展示效果.代码高亮 ...
一个挺酷的flash图片展示效果
为了做一个视频列表,在网上找了一个挺酷的flash图片展示效果,源代码的组件名称为DisplayShelf,有另外一个相同效果的组件叫CoverFlow. 原来的例子并没有实现单击当前图片的事件,为了 ...
3种风吹图片jquery堆叠图片切换效果插件
dreamweaver免费视频教程: http://www.51rgb.com/mproductzh.aspx?classid=31 加讨论群390180913 入群即可参加周一至周五免费公开课并获得 ...
jqery图片展示效果
好久没更新了,加一个jqery图片展示效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
div 隐藏_CSS实现六边形Div图片展示效果
一. 效果图二. 六边形效果涉及到的知识点 1. transform: rotate(120deg); // 元素旋转 2. overflow: hidden; // 超出隐藏 3. visibil ...

如何用Jquery做图片展示效果

如何用Jquery做图片展示效果相关推荐

最新文章

热门文章