一. 前言

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

二.本人思路

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

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

三. 图片展示效果实现

    1.样式代码

     <style>

         html

         {

             /*background-color:black;*/

             font:70% Verdana;

             color:#ACACB0

         }

         a{

          color:white;

          text-decoration: none;

          font-weight: bold;

          border-bottom: 1px dotted black;

          cursor: help;

         }

         img.pop{

         position: absolute;

         border: 10px solid #214263;

         z-index:;

         }

         .more{

         background: #214263;

         color:white;

         position: absolute;

         border: 10px solid #214263;

         z-index:;

         }

     </style>

2.图片展示代码

 <body>

     <center>

     <b>Image Gallery</b>

     </center>

     <div class="popshow">

         <img src="00031a.jpg" width="120" height="90" alt="Image Gallery #1" rel=00031.jpg>

         <img src="00032a.jpg" width="120" height="90" alt="Image Gallery #2" rel=00032.jpg>

         <img src="00033a.jpg" width="120" height="90" alt="Image Gallery #3" rel=00033.jpg>

         <img src="00034a.jpg" width="120" height="90" alt="Image Gallery #4" rel=00034.jpg>

         <img src="00035a.jpg" width="120" height="90" alt="Image Gallery #5" rel=00035.jpg>

         <img src="00036a.jpg" width="120" height="90" alt="Image Gallery #6" rel=00036.jpg>

         <img src="00037a.jpg" width="120" height="90" alt="Image Gallery #7" rel=00037.jpg>

     </div>

     <div id=dis class=more style="display:none" ></div>

     <div id=next class=more style="display:none" ></div>

     <div id=prev class=more style="display:none" ></div>

 </body>

3.jquery代码

 <script src="../../Scripts/jquery-2.0.3.min.js"></script>

 <script>

     $(function (){

         // 怎么做? 让我们看一段程序。

         var myshow, mywidth, myheight, showpic, mytitle, mynext, myprev, mylength, index, temp, shownext, showprev;

         // 先将会用到的变量作一个设定.

         // 我们设定一个数组w,并求取所有图片的个数,然后利用一个each()循环将.popshow的Img 利用clone() 复制一份,放到w里,如此一来我们就有

         // 一个所有图文件img对象的数组,可以让我们随时调用。

         var w = new Array();

         mylength = $(".popshow img").size();

         $(".popshow img").each(function(e){

             temp = $(this).clone();

             w[e] = temp;

         });

         $(".popshow img").click(function(){

             myshow = $(".popshow img").index(this);

             doimg(myshow);

             return false;

         });

         // 测试数组并输出至控制台

         //$.each(w, function (e, i) {

         //    console.log("e:" + e + "- i" + i.href + "-");

         //});

         // 我们先定义当.popshow 下的img 被Click时要做的事情

         // 使用index()求得目前被按的图形在.popshow下img的index是什么,求得的是一个数值,将这个数值传给子程序doimg(),所以我们使用doing(myshow)

         // 为什么要设定一个子程序,doimg()？因为鼠标按下要求做展示的有两个以上的部位，一个是图形，一个是Next的对象,一个是Prev的对象

         // 为免程序代码重复,所以我们写了一个专门做图形展示的子程序doimg();

         // myshow = $(".popshow img").index(t);

         // 让我们来看一下doimg()

         function doimg(index){

             console.log(index);

             /// 首先把正在展示的对象(如果有的话,Id = this_show)清除掉,因为doimg会要求传入一个值(index),这个值就是要展示的图形的index值.

             /// 其用parseInt()（避免字符串而不可以计算）变成可以计算的变量,下一张的mynext就是传入值加1的值,前一张就是传入值减1的值

             /// 如果下一张的index值大于或等于图形个数,mynext 就是0 如果上一张小于0 就是图形个数减1作为数组最后的index来展示。

             $("#this_show").remove();

             index = parseInt(index);

             mynext = index + 1;

             myprev = index - 1;

             if (mynext >= mylength) {

                 mynext = 0;

             }

             if (myprev < 0) {

                 myprev = mylength - 1;

             }

             /// 将要展示的图形从w的数组中引到变量kkk里,我们利用new Image()的方法建立一个

             /// 新的图形对象,主要的原因是想要找出将要展示的（大图）的宽与高,因为等一下我们要求出的宽与高

             /// 来定位图形的显示位置,让其显示整个网页的正中央,并借此调整Next,Prev与文字说明的位置

             var kkk = w[index];

             var myImage = new Image();

             myImage.src = $(kkk).attr('rel')

             // 求得大图的src位置

             mytitle = $(kkk).attr('alt')

             // 求得文字说明

             mywidth = 500;

             // 大图的宽

             myheight = 375;

            /// debugger;

             // 大图的高

             showpic = '<img src=' + myImage.src + '>';

             // showpic已有目前要展示的大图的完整Html描述

             // 将showpic加入id=this_show并加入css的class pop(已设定于网页中),且加入定位的Css信息,

             // 完成后将其用appendTo()加入网页的body后面,并将其隐藏。

             $(showpic).attr("id", "this_show").addClass('pop').css({

                 'left': ($('body').width() - mywidth) / 2,

                 'top': 100,

                 'width': mywidth,

                 'height':myheight

             }).appendTo('body').hide();

             $('.popshow').css({ 'opacity': 0.4 });

             // 将原本的小图串(.popshow)的透明度减到0.4

             $("#dis").css({

                 'left': ($('body').width() - mywidth) / 2,

                 'top':100,'opacity':0.7

             }).html(mytitle);

             // Next

             $("#next").css({

                 'left': ($('body').width() + mywidth - 70) / 2,

                 'top':460,'opacity':0.7

             });

             // Prev

             $("#prev").css({

                 'left': ($('body').width() - mywidth) / 2,

                 'top':460,'opacity':0.7

             });

             // 对prev定位与降低透明度

             shownext = '<a href=# rel='+mynext+'>Next</a>';

             showprev = '<a href=# rel='+myprev+'>PREV</a>';

             // 产生Next与Prev的链接与文字

             // 将产生的链接分别写入next与prev的DIV中

             $("#next").html(shownext);

             $("#prev").html(showprev);

             $('.more').show("fast");

             $("#this_show").fadeIn("slow");

             return false

         }

         // 因为当初我们在产生next及prev的链接时就已将下一张的index放在链接a的rel里面，

         // 现在我们将其取出来并直接调用doimg(),将index传给它。

         //

         $("#next").click(function () {

             var nindex = $("#next a").attr('rel');

             doimg(nindex);

             return false

         });

         $("#prev").click(function () {

             var pindex = $("#prev a").attr('rel');

             doimg(pindex);

             return false;

         });

         // 最后我们要设定一个关掉展示与还原图片（小图）的透明度功能。

         $(document).click(function(){

             $('.popshow').css({ 'opacity': 1 });

             $(".more").hide();

             $("#this_show").remove();

         });

     });

 </script>

四. 举一反三

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

五. 下载
    代码下载

如何用Jquery做图片展示效果的更多相关文章

  1. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  2. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  3. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  4. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  5. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  6. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

  7. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  8. jquery 鼠标图片经过效果

    <script> //鼠标图片经过效果 $(function(){ $(".jione_box ").css("background-color", ...

  9. 第74天：jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. 174. 删除链表中倒数第n个节点

    描述 笔记 数据 评测 给定一个链表,删除链表中倒数第n个节点,返回链表的头节点. 注意事项 链表中的节点个数大于等于n 您在真实的面试中是否遇到过这个题? Yes 样例 给出链表1->2-&g ...

  2. hdu3487Play with Chain(splay)

    链接 简单的两种操作,一种删除某段区间,加在第I个点的后面,另一个是翻转区间.都是splay的简单操作. 悲剧一:pushdown时候忘记让lz=0 悲剧二:删除区间,加在某点之后的时候忘记修改其父亲 ...

  3. Java中的变量——通过示例学习Java编程（4）

    作者:CHAITANYA SINGH 来源:https://www.koofun.com/pro/kfpostsdetail?kfpostsid=14&cid= 变量是用来存放可以更改的值的容 ...

  4. IE6常见CSS解析Bug和hack

    第一:图片间隙 a:div中的图片间隙: 描述:在div中插入图片时,图片会将div下方撑大3像素 hack1:将<div>和<img>写在一行 hack2:将<img& ...

  5. GreenDao3.2的使用

    原文:http://blog.csdn.net/qq_30379689/article/details/54410838 GreenDao3.2的使用,爱不释手 本篇文章包括以下内容: 前言 Gree ...

  6. (转)Linux下清理Cache方法

    频繁的文件访问会导致系统的Cache使用量大增, 系统运行缓慢. 1 首先用free 命令查看内存的使用:$ free -m             total       used       fr ...

  7. inputStream 与 String 的互相转换

    一. String 转换为InputStream String str = "String 与 inputStream转换"; InputStream ins1 = new Byt ...

  8. Android学习总结（九）———— 内容提供器（ContentProvider）

    一.内容提供器基本概念 内容提供器主要用于在不同的应用程序之间实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能保证被访数据的安全性.详细资料请看下图: 二.示例 ...

  9. leetcode_1052. Grumpy Bookstore Owner

    1052. Grumpy Bookstore Owner https://leetcode.com/problems/grumpy-bookstore-owner/ 题意:每个时刻i会有custome ...

  10. HDU 6069 Counting Divisors（区间素数筛法）

    题意:...就题面一句话 思路:比赛一看公式,就想到要用到约数个数定理 约数个数定理就是: 对于一个大于1正整数n可以分解质因数: 则n的正约数的个数就是 对于n^k其实就是每个因子的个数乘了一个K ...