如何用Jquery做图片展示效果
生活随笔
收集整理的這篇文章主要介紹了
如何用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做图片展示效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TClientDataSet[27]:
- 下一篇： 图解Java 垃圾回收机制