当前位置：移动技术网 > IT编程>开发语言>JavaScript > jquery版相片墙（鼠标控制图片聚合和散开）

jquery版相片墙（鼠标控制图片聚合和散开）

2017年12月21日 | 移动技术网IT编程 | 我要评论

　　照片墙，简单点说就是鼠标点击小图片时，聚合变成一张大图片；点击大图片时，散开变成小图片。这个是我一年前无意间看到的动画效果（现在已经忘记是哪位大神制作的了，引用了他的图片），刚看到这个很炫的动画超级激动，哇！怎么可以这么牛！我制作出来的没那边炫，但是还是制作出来了，算是对我的一种激励！希望能有碰到问题就要解决它的精神，即使不是现在但会是不久的将来！

二、html代码

复制代码

复制代码

三、css代码

复制代码

body {background: url("images/bg.jpg") left top; overflow: hidden;}

.box {position: relative;}

.box p {position: absolute; width: 125px; height: 125px; border: 1px solid #AAAAAA; box-shadow: 0 0 6px rgba(0,0,0,0.6); border-radius: 3px; cursor: pointer;}

.box p img {margin: 5px; width: 115px;}

.box p.curr {box-shadow: 1px 1px 3px #000000; border: none; border-radius: 0; }

.box p.curr img {margin: 0; width: 125px;}

.alter p {position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px; line-height: 50px; border: 1px solid #AAAAAA; box-shadow: 0 0 3px rgba(0,0,0,0.6); text-align: center; cursor: pointer; background: white; opacity: 0.9; filter: Alpha(opacity=90);}

.alter p img {*display: block; *margin-top: 15px;}

.alter .prev {left: -52px;}

.alter .next {right: -52px;}

</style>

复制代码

四、js代码

图片散开事件：

复制代码

/* 图片散开 */

scatter: function(){

windowWidth = $(window).width();

windowHeight = $(window).height();

leftDistance = (windowWidth - itemWidth * colCount)/7; /* left左边间距 */

topDistance = (windowHeight - itemHeight * rowCount) / 5; /* top上部间距 */

$item.each(function(){

var _index = $(this).index();

col = _index % colCount; /* 第几列，从0开始 */

row = Math.floor(_index / colCount); /* 第几行 */

cssLeft = (col + 1) * leftDistance + col * itemWidth; /* css中left位置设置 */

cssTop = (row + 1) * topDistance + row * itemHeight;/* css中top位置设置 */

$(this).stop().animate({"left": cssLeft, "top": cssTop},1000);

var cssRotate = itemRotate();

$(this).css({"transform": "rotate("+cssRotate+"deg)"})

})

$prev.stop().animate({"left": "-52px"});

$next.stop().animate({"right": "-52px"});

复制代码

分析：

　　这个事件的作用是点击大图片时，图片散开变成多个小图片，是通过控制图片父级position的left和top值。

　　散开状态，首先我想到的是，要显示多少行和多少列（也就是每行显示多少张图片）？行和列有什么关系？如果说我每行显示6张图片（也就是6列），那会有多少行？最后发现，原来可以用图片的总个数除以列数再用Math.floor()取值（从第0列开始）得到总行数。好，到这里，我就知道图片要显示多少行和多少列了。现在要判断每张图片属于第几行第几列，这个要靠自己找规律，0-5为第一行，6-11为第二行，……，可得出行数 row = Math.floor(_index / colCount)（第0行开始），0、6、12、6*n为第一列，1、7、13、6*n+1为第二列，……，可得出列数 col = _index % colCount（第0列开始）。再考虑，图片之前的距离要多少会合适一点。我这里采取一个笨方法，我就规定图片间的距离和最外围图片离窗口边沿的距离一样（硬性规定了哈），也就是下图所示：

这样位置排布就考虑好了。

　　那么接下来就是考虑图片怎么定位了，我先考虑top值，也就是距离窗口顶部的距离，先求出topDistance = (windowHeight - itemHeight * rowCount) / 5; 的值（假如是4行），第一行距离顶部的位置是topDistance，第二行距离顶部的位置topDistance * 2 + 上面图片的高度，第三行距离顶部的位置是 topDistance * 3 + 上面图片的高度 *2，依次类推可得出：cssTop = (row + 1) * topDistance + row * itemHeight。现在考虑left值，方法和top定位类似，先得出eftDistance = (windowWidth - itemWidth * colCount)/7（6列），……再推出cssLeft = (col + 1) * leftDistance + col * itemWidth。到这里，图片散开事件就解决了，里面的细节我就不一一考虑了。

图片聚合事件：

复制代码

/* 图片聚合 */

together: function(url){

windowWidth = $(window).width();

windowHeight = $(window).height();

targetWidth = windowWidth / 2; /* 以中心宽度为基准 */

targetHeight = windowHeight / 2; /* 以中心高度为基准 */

$item.each(function(){

var _index = $(this).index();

col = _index % colCount; /* 第几列，从0开始 */

row = Math.floor(_index / colCount); /* 第几行 */

cssLeft = targetWidth - halfCol * itemWidth + col * itemWidth;

cssTop = targetHeight - halfRow * itemHeight + row * itemHeight;

imgLeft = -col * itemWidth; /* 取背景图片水平位置 */

imgTop = -row * itemHeight; /* 取背景图片垂直位置 */

$(this).stop().animate({"left": cssLeft, "top": cssTop},1000);

$(this).css({"transform": "rotate(0deg)","background": "url("+url+") no-repeat "+imgLeft+"px "+imgTop+"px"})

})

$prev.stop().animate({"left": "0"});

$next.stop().animate({"right": "0"});

复制代码

分析：

　　这个事件的主要是点击小图片，图片聚拢变成一张大图片，并且大图片时可切换的。这里我要说明的是，图片聚拢后该怎么定位，大图是由n个小图片的背景图片组成。

　　图片聚拢定位，这个其实不难，先想想聚拢后会呈现什么状态，大图是居中显示的！那就是说明以窗口中心为基准，左右两边一边三张图片。那第一张小图片是在哪个位置？第二张在哪个位置？……这个还不简单，第一张图片位置可以用窗口宽度的一半减去3张图片宽度，第二张是窗口宽度一半减去3张图片+第一张图片（第0列），……类推得出：cssLeft = targetWidth - halfCol * itemWidth + col * itemWidth，好，这里位置，图片定位就解决了，cssTop类似，这里就不再说明了。

　　小图片背景定位，这个其实更简单，第一张图片定位是0,0, 第二张图片是-125px,0,第三张图片是-250px,0，……第7张图片是0,-125px，第八张图片是-125px,-125px……，推出结果：imgLeft = -col * itemWidth; imgTop = -row * itemHeight;

js总代码：

复制代码

$(function(){

var $item = $(".box p"),

$prev = $(".prev"),

$next = $(".next"),

windowWidth, /* 窗口宽度 */

windowHeight, /* 窗口高度 */

itemWidth = $item.width(), /* 图片父级p的宽度 */

itemHeight = $item.height(), /* 图片父级p的高度 */

leftDistance, /* left图片左边间距 */

topDistance,/* top图片上边间距 */

targetWidth,/* 以中心宽度为基准 */

targetHeight,/* 以中心高度为基准 */

col,/* 第几列，从0开始 */

row,/* 第几行 */

cssLeft,/* css中left位置设置 */

cssTop,/* css中top位置设置 */

imgLeft,/* 取背景图片水平位置 */

imgTop,/* 取背景图片垂直位置 */

colCount = 6, /* 多少列 */

rowCount = Math.ceil($item.length / colCount), /* 多少行 */

halfCol = colCount / 2, /* 图片聚合时，以窗口中心位置为基准，左边排列的图片个数 */

halfRow = rowCount / 2, /* 图片聚合时，以窗口中心位置为基准，上边排列的图片个数 */

flag = false, /* 判断图片时聚合还是散开，false为聚合，true为散开 */

page = 0; /* 按钮切换时为第几张图片 */

/* 事件控制 */

var eventFunc = {

/* 图片散开 */

scatter: function(){

windowWidth = $(window).width();

windowHeight = $(window).height();

leftDistance = (windowWidth - itemWidth * colCount)/7; /* left左边间距 */

topDistance = (windowHeight - itemHeight * rowCount) / 5; /* top上部间距 */

$item.each(function(){

var _index = $(this).index();

col = _index % colCount; /* 第几列，从0开始 */

row = Math.floor(_index / colCount); /* 第几行 */

cssLeft = (col + 1) * leftDistance + col * itemWidth; /* css中left位置设置 */

cssTop = (row + 1) * topDistance + row * itemHeight;/* css中top位置设置 */

$(this).stop().animate({"left": cssLeft, "top": cssTop},1000);

var cssRotate = itemRotate();

$(this).css({"transform": "rotate("+cssRotate+"deg)"})

})

$prev.stop().animate({"left": "-52px"});

$next.stop().animate({"right": "-52px"});

/* 图片聚合 */

together: function(url){

windowWidth = $(window).width();

windowHeight = $(window).height();

targetWidth = windowWidth / 2; /* 以中心宽度为基准 */

targetHeight = windowHeight / 2; /* 以中心高度为基准 */

$item.each(function(){

var _index = $(this).index();

col = _index % colCount; /* 第几列，从0开始 */

row = Math.floor(_index / colCount); /* 第几行 */

cssLeft = targetWidth - halfCol * itemWidth + col * itemWidth;

cssTop = targetHeight - halfRow * itemHeight + row * itemHeight;

imgLeft = -col * itemWidth; /* 取背景图片水平位置 */

imgTop = -row * itemHeight; /* 取背景图片垂直位置 */

$(this).stop().animate({"left": cssLeft, "top": cssTop},1000);

$(this).css({"transform": "rotate(0deg)","background": "url("+url+") no-repeat "+imgLeft+"px "+imgTop+"px"})

})

$prev.stop().animate({"left": "0"});

$next.stop().animate({"right": "0"});

/* 判断图片为散开 */

judgeScatter: function(){

$item.removeClass("curr").find("img").show();

$item.css({"background":"none"});

eventFunc.scatter();

/* 判断图片为聚合 */

judgeTogether: function(url){

$item.addClass("curr").find("img").hide();

eventFunc.together(url);

}

/* 图片偏转角度 */

function itemRotate(){

return 20 - Math.random() * 40;

}

eventFunc.scatter(); /* 初始化，图片为散开状态 */

$(window).resize(function(){

var _url = $item.eq(page).find("img").attr("src").replace("thumbs/","");

if(!flag){

eventFunc.judgeScatter();

}else {

/* 改变窗口大小，当为聚合状态时，还是保持聚合状态，和点点击图片判断相反的原因是，下面为聚合状态后给flag赋值为true，所以当为true时就是聚合状态，散开类似判断 */

eventFunc.judgeTogether(_url);

}

})

/* 点击图片 */

$item.click(function(){

var _url = $(this).find("img").attr("src").replace("thumbs/","");

page = $(this).index();

if(flag){

eventFunc.judgeScatter();

flag = false;

}else {

eventFunc.judgeTogether(_url);

flag = true;

}

})

/* 上一页 */

$prev.click(function(){

if(page > 0){

page--;

var _url = $item.eq(page).find("img").attr("src").replace("thumbs/","");

eventFunc.together(_url);

}

})

/* 下一页 */

$next.click(function(){

if(page < $item.length - 1){

page++;

var _url = $item.eq(page).find("img").attr("src").replace("thumbs/","");

eventFunc.together(_url);

}

})

复制代码

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

06.字典、集合和序列

1.字典练习练习题：字典基本操作字典内容如下:dic = {‘python’: 95,‘java’: 99,‘c... [阅读全文]
多线程爬取狗妈表情包

通过多线程爬取狗妈表情包import requestsimport jsonfrom jsonpath impo... [阅读全文]
Python：数据导出到Excel（使用xlwt）

写在前面：前端ajax调用导出方法，ajax无法导出问题原因：ajax是无法直接导出excel的，因为ajax的... [阅读全文]
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地

爬虫代码如下：运行需要本地开启mongo服务器端，安装有谷歌浏览器及selenium对应版本的驱动文件#codi... [阅读全文]
MongoDB基础操作

一、概述在MongoDB数据库里是存在有数据库的概念，但是没有模式（所有的信息都是按照文档保存的），保存数据的结... [阅读全文]
nodejs中mysql的用法

1、建立数据库连接：createConnection(Object)方法该方法接受一个对象作为参数，该对象有四个... [阅读全文]
Node.js 连接 MySQL

导言在我们学习后端（node）的过程中，要时常和数据库打交道，所以说我们打通node、MySQLJavaScri... [阅读全文]
Mysql trace命令介绍

trace作用：对SQL的跟踪，可以知道SQL是如何执行的，比EXPLAIN还要强大。注意点：开启trace工具... [阅读全文]
详解JavaScript作用域闭包

javascript闭包，是js开发工程师必须深入了解的知识。3月份自己曾撰写博客《javascript闭包》，博客中只是简单阐述了闭包的工作过程和列举了几个示... [阅读全文]
深入了解JavaScript词法作用域

javascript并不是传统的块级作用域，而是函数作用域！一、作用域 javascript引擎在代码执行前会对其进行编译，在这个过程中，像var a = 2... [阅读全文]

网友评论


验证码：

jquery版相片墙（鼠标控制图片聚合和散开）

2017年12月21日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论