一. 前言

　到底用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:;
  19.          }
  20.          .more{
  21.          background: #214263;
  22.          color:white;
  23.          position: absolute;
  24.          border: 10px solid #214263;
  25.          z-index:;
  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.              $('.more').show("fast");
  106.              $("#this_show").fadeIn("slow");
  107.              return false
  108.          }
  109.  
  110.          // 因为当初我们在产生next及prev的链接时就已将下一张的index放在链接a的rel里面，
  111.          // 现在我们将其取出来并直接调用doimg(),将index传给它。
  112.          //
  113.          $("#next").click(function () {
  114.              var nindex = $("#next a").attr('rel');
  115.              doimg(nindex);
  116.              return false
  117.          });
  118.  
  119.          $("#prev").click(function () {
  120.              var pindex = $("#prev a").attr('rel');
  121.              doimg(pindex);
  122.              return false;
  123.          });
  124.  
  125.          // 最后我们要设定一个关掉展示与还原图片（小图）的透明度功能。
  126.          $(document).click(function(){
  127.              $('.popshow').css({ 'opacity': 1 });
  128.              $(".more").hide();
  129.              $("#this_show").remove();
  130.          });
  131.      });
  132.  </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. linux分配文件文件夹所属用户及组

    ls -l 可以查看当前目录文件.如:drwxr-xr-x 2 nsf users 1024 12-10 17:37 下载文件备份分别对应的是:文件属性 连接数 文件拥有者 所属群组 文件大小 文件修 ...

  2. Docker与虚拟机

    Docker与虚拟机 简述 Docker 在容器的基础上,进行了进一步的封装,从文件系统.网络互联到进程隔离等等,极大的简化了容器的创建和维护.使得 Docker 技术比虚拟机技术更为轻便.快捷.下面 ...

  3. Xcode 升级后，cocoaPod 问题

    当我从Xcode 6.3切换到Xcode6.4的时候,因为我是mac上安装了两个不同的版本,现在把Xcode 6.3卸掉了. 现在再次运行pod install命令的时候,提示如下错误:   Upda ...

  4. 修改nagios登录界面密码

    htpasswd -c /usr/local/nagios/etc/htpasswd.user nagiosadmin 输入密码: 重启httpd服务.

  5. FusionCharts3.2.1 参数的详细说明和功能特性

    功能特性animation                    是否动画显示数据,默认为1(True)showNames                 是否显示横向坐标轴(x轴)标签名称rotat ...

  6. https增加临时证书，tomcat配置

    1Windows下: 1.1 生成keystore文件及导出证书 打开控制台: 运行: %JAVA_HOME%\bin\keytool -genkey -alias tomcat -keyalg RS ...

  7. 机器学习（3）- 学习建议<误差出现如何解决？>

    根据Andrew Ng在斯坦福的<机器学习>视频做笔记,已经通过李航<统计学习方法>获得的知识不赘述,仅列出提纲. 1 学习建议 误差太大,如何改进? 使用更多的训练样本→解决 ...

  8. maven项目jsp无法识别jstl的解决办法

    EL表达式无效是因为maven项目的jsp不识别jstl,只要在web-APP 标签中引入命名空间 xmlns="http://xmlns.jcp.org/xml/ns/javaee&quo ...

  9. noj-1102-黑白图像

    1 //题目地址:http://acm.njupt.edu.cn/acmhome/problemdetail.do?method=showdetail&id=1102              ...

  10. 浮动清楚浮动及position的用法

    float 在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止 ...