您的位置：首页 > Web前端 > JQuery

如何用Jquery做图片展示效果

2013-11-03 18:59 543 查看

一. 前言

　到底用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: 1;
}
.more{
background: #214263;
color:white;
position: absolute;
border: 10px solid #214263;
z-index: 2;
}
</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 ，贪多未必能学好技术，关键还是思考，举一反三，这个例子我们可以联想很多类型的功能比如（购物车，产品展示，图库等等）多需要图片放大的功能，可以适当的进行修改源代码均可实现。

五. 下载

代码下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航