JS+CSS3实现惊人的哈希库的影响

下面是我在网上看到的照片墙的照片。

最终实现的结果包括以下内容：

当图片被点击时，图片移动到中间区域并放大显示。当图片被点击时，在背面切换显示。

当图片被点击时，所有图片的位置被随机重新排列。

当一个控制按钮被点击时，相应的图片显示在中间，控制按钮被切换到相应的风格。当点击一个控制按钮时，图片被切换到按钮的背面点击。
整个效果是VCD分解，如下所示：
根据计算机能理解的方式分解案例。

查看视图：html基本界面模板

控制器：Javaｓｃｒｉｐｔ内容处理，事件处理

数据：data.js是没有必要的，有助于理解

数据非常普遍。如果我们将内容写入视图或HTML，我们需要在修改内容时修改HTML，但是如果我们使用VCD，只需要修改数据部分，同时，一般数据部分是由背景生成的，这种替换更方便，这种情况下的海报是由模板加上数据生成的。

视图部分

效应区的模块分解分为三个部分：

当前显示的海报区域

水平垂直中心

允许被控制和翻转

左、右存储区

划分左、右区

这个角色是存储其他海报。

每个海报的位置是随机的，角度是随机的。

控制条

控制相应海报的显示

反向开关面
HTML代码的实现如下所示：


{标题} }
{ {说明} }

} }的{ { { { IMG，标题} } } }和{ {描述，这里的模板字符串，其次是相应的部分数据，但更换。

视图部分的样式如下所示：
* {
填充：0；
保证金：0；
}
体{
背景颜色：# FFF；
颜色：# 555；
字体家庭：'avenir下'，'lantinghei SC；
字体大小：14px；
-moz字体平滑：抗锯齿；
WebKit的字体平滑：锯齿； / * * /字体平滑
}
.在主体垂直中心中包{图片/区域
宽度：100%；
身高：900px；
位置：绝对；
/ * -------------------以下两线实现垂直中—
顶部：50%；
边距：随着改变；

----------------- * / / * ----------跌破四线是垂直居中
顶部：0；
底部：0；
边距顶部：自动；
边距底部：自动；
------------------------------------------------------------ / * * /
背景颜色：# 333；
溢出：隐藏；
800px -moz视角；
WebKit的视角：800px； / /让3D元素的支持，这里是查看远程设置子元素的位置
}
海报风格
照片{。
宽度：260px；
身高：320px；
*因为每一张海报都是随机使用的，所以位置设置为绝对*
位置：绝对；
Z指数：1；
阴影：0盒0 1px RGBA（0,0,0，。01）；
/ *变换：rotatey（30deg）；* /
-moz过渡：all.6s； / * * /让海报移动动画
WebKit的过渡：all.6s；
}
照片，侧{
宽度：100%；
身高：100%；
背景颜色：# Eee；
位置：绝对；
顶部：0；
权利：0；
填料：20px；
盒尺寸：边框框；
}

照片。侧前面。图像{
宽度：100%；
身高：250px；
行高：250px；
溢出：隐藏；
}
photo.side-front.image img {。
宽度：100%；
}
照片。侧锋。字幕{
文本对齐：中心；
字体大小：16px；
行高：50px；
}

。照片背面。DESC {
颜色：# 666；
字体大小：14px；
行高：1.5em；
}
当前选中的海报样式
photo_center {。
垂直定心法
左：50%；
顶部：50%；
margin-left: - 130px；
边距：- 160px；
* /

垂直居中两个/ ***
顶部：0；
底部：0；
左：0；
权利：0；
保证金：汽车；
Z指数：999； / /使当前选定的不被其他海报海报
}
负责翻转/ ***
照片包装{
位置：绝对；
宽度：100%；
身高：100%；
风格：perserve-3d -moz变换；
WebKit的变换风格：preserve-3d； / * * /效果让里面的元素来支持3D
变换方式：preserve-3d； / *因为这句话，早在Firefox已经显示出来。
WebKit的过渡：1；
-moz过渡：1；
转换：全部1；
}
照片包装。侧{
-moz背面可见性：隐藏； / /不是屏幕之后，隐藏
WebKit的背面可见性：隐藏；
背面的可见性：隐藏；
}
照片包装。侧前面{
-moz变换：rotatey（0度）；
WebKit的变换：rotatey（0度）；
变换：rotatey（0度）；
}
照片包装。侧背{
-moz变换：rotatey（180deg）；
WebKit的变换：rotatey（180deg）；
变换：rotatey（180deg）；
}
照片前，照片包{
-moz变换：rotatey（0度）；
WebKit的变换：rotatey（0度）；
变换：rotatey（0度）；
}
照片背面。照片包装{
-moz变换：rotatey（180deg）；
WebKit的变换：rotatey（180deg）；
变换：rotatey（180deg）；

}
按钮控件样式
资产净值{。
宽度：40%；
身高：30px；
行高：30px；
位置：绝对；
左：30%；
底部：20px；
Z指数：999；
/ *背景颜色：# FFF；* /
文本对齐：中心；
}
标准样式
资产净值。
宽度：30px；
身高：30px；
显示：内联块；
光标：指针；
背景颜色：# AAA；
文本对齐：中心；
边框半径：50%；
-moz变换：规模（48）；
WebKit的变换：规模（48）；
转换：缩放（48）；
WebKit的过渡：1；
-moz过渡：1；
}
资产净值i：{

}
当前选定的样式
i_current {。资产净值。
-moz变换：规模（1）；
WebKit的变换：规模（1）；

}
。资产净值。i_current：后{
不透明性：1；
}
返回样式
i_back {。资产净值。
-moz变换：rotatey（- 180deg）；
WebKit的变换：rotatey（- 180deg）；

背景颜色：# 555；
}
样式优化。
下面的定义是消除图片突然闪现。
左：50%；
顶部：50%；
保证金：- 00 - 130px 160px；
}
照片包装{
-moz变换起源：0% 50%；
WebKit的变换起源：0% 50%；
}
照片前，照片包{
-moz变换：翻译（0px，0px）rotatey（0度）；
WebKit的变换：翻译（0px，0px）rotatey（0度）；
}
照片背面。照片包装{
-moz变换：翻译（260px，0px）rotatey（180deg）；
WebKit的变换：翻译（260px，0px）rotatey（180deg）；
}

下面解释了该样式的一些重要部分。

在这样的设置：WebKit的视角：800px；

你可以看到，在设置这套rotatey效果（45deg）。如果- WebKit的变换不定，旋转的效果无法显示。图片的旋转只是在平面上旋转，如果太小不能设置它的值，效果如下：
的div.photo负责图像的平移和旋转，并div.photo-wrap负责3D翻转（背面的开关）。为了让在内部支持3D效果的元素，将WebKit的变换风格：为div.photo-wrap preserve-3d。

WebKit的背面可见性：隐藏在the.photo-wrap.side风格；这句话的功能是隐藏元素时，它不是对着屏幕。

为了移动和翻转的动画效果的图片，give.photo-wrap解释转型下的WebKit的过渡：。
导航栏的样式

标准样式
资产净值。
宽度：30px；
身高：30px；
显示：内联块；
光标：指针；
背景颜色：# AAA；
文本对齐：中心；
边框半径：50%；
-moz变换：规模（48）；
WebKit的变换：规模（48）；
转换：缩放（48）；
WebKit的过渡：1；
-moz过渡：1；
}

当前选定的样式
i_current {。资产净值。
-moz变换：规模（1）；
WebKit的变换：规模（1）；

}
。资产净值。i_current：后{
不透明性：1；
}
返回样式
i_back {。资产净值。
-moz变换：rotatey（- 180deg）；
WebKit的变换：rotatey（- 180deg）；
背景颜色：# 555；
}

导航栏分析图：
导航栏的按钮也分为前后两个部分。为了区分积极和消极的影响，设置不同的背景颜色，设置翻页效果，降低普通按钮变换：规模（48），和设置的比例（1）当按钮被选中，放大和缩小的按钮的原因是知道当前按钮将选定的按钮被选中时的电流。

当基本样式都设置好时，一些结果被优化了。为了使正面和反向开关使图片看起来有点像右边的门，你可以添加以下样式：
样式优化。
下面的定义是消除图片突然闪现。
左：50%；
顶部：50%；
保证金：- 00 - 130px 160px；
}
照片包装{
-moz变换起源：0% 50%；
WebKit的变换起源：0% 50%；
}
照片前，照片包{
-moz变换：翻译（0px，0px）rotatey（0度）；
WebKit的变换：翻译（0px，0px）rotatey（0度）；
}
照片背面。照片包装{
-moz变换：翻译（260px，0px）rotatey（180deg）；
WebKit的变换：翻译（260px，0px）rotatey（180deg）；
}
数据部分

数据主要是写在data.js，和数据数组的定义，在data.js存储信息的22张照片。该数据阵列输出的结构如下：
每个对象中存储的数据包括三个属性，如标题，描述，和IMG。存储数据的每个对象的内容输出如下的数据部分主要是用于在模板替换字符串。

对data.js内容如下：

var数据{ }；
无功datastr = 1，照片1
◎
绿色蔬菜
◎
◎
2。图2
◎
图2
◎
◎
三.图3
◎
图3
◎
◎
4。图4
◎
图4
◎
◎
5。图5
◎
图5
◎
◎
6，一只可爱的小熊玩具
◎
可爱的小熊玩具
◎
◎
7。图7
◎
图7
◎
◎
8。图8
◎
图8
◎
◎
9。图9
◎
图9
◎
◎
10。图10
◎
图10
◎
◎
11。图11
◎
图11
◎
◎
12。图12
◎
图12
◎
◎
13。图13
◎
图13
◎
◎
14。图14
◎
图14
◎
◎
15。图15
◎
图15
◎
◎
16。图16
◎
图16
◎
◎
17。图17
◎
图17
◎
◎
18。图18
◎
图18
◎
◎
19。图19
◎
图19
◎
◎
20。图20
◎
图20
◎
◎
21。图21
◎
图21
◎
◎
22。图22
◎
图22
'；

下面的代码是 / /内容将被存储在数组datastr分裂
var a datastr.split（' '）；
对于（var i = 0；i < d.length；i++）{
var（=）；
Data.push（{
IMG：'img +（i + 1）+JPG，
描述：C { 0 }。拆分（，）{ 1 }，
Desc：C { 1 }
}）；
}

VCD分解——控制器控制

输出所有海报内容（查看模板+数据）

位置分配控制（中央位置，侧面位置）

控制条输出控制（开关，车削表面）

输出所有的海报，遍历数据数组，并将内容填充到模板中。

4。输出所有海报
var数据=数据；
功能addphotos（）{
模板变量=（包#美元）。Html（）；
var；
var = { }；
对于（在数据中）{
无功_html = template.replace（{ } } {指数，S）
更换（{ {图片} }，{ }数据。IMG）
替换（{ } }，数据{标题）。
（{ { DESC。代替} }，{ }数据。DESC）；
Html.push（_html）；
每个海报都有相应的按钮
Nav.push（）；
}
在写入结束/遍历之后
Html.push（+ nav.join（）+）；
$（#换行）。Html（html.join（'））；
rsort（随机（{ 0，数据长度}））；
}

海报的分类和分析如下：

为了对左、右区域的海报进行分类，分析了左、右分区的海报位置：
使用随机数生成当前海报的左上角和顶部位置

生成一个随机值，支持随机范围；
函数随机（范围）{
VaR最大= math.max（范围{ 0 }，{ 1 }范围）；
VaR最小= Math.min（范围{ 0 }，{ 1 }范围）；
var =最大最小值；
VaR值= math.ceil（Math.random（）* DIFF +分钟）；
返回数；
}

左边的范围：{ x，{，6。计算max、y、min、max }、右{、x、{、min、max、y、{、min、max }的分区。
函数范围（）{
var { { { {
左：{
x：{，}
}，
右：{
x：{，}
}
}；

var包= {
W：$（' #换行）。Width（），
/ /女：600，
H：$（' #换行）。Height（）
}
var = {
W：$（'光'）{ 0 }。clientwidth，
H：$（'光'）{ 0 }。自己
}

左，X = 0-照片，W，2-照片2；
左，左=0；
是的，是的，2，加上2；
跑。右。y =跑。左。Y；

回跑；
}

然后海报可以被分类。

5。海报
功能rsort（N）{
无功_photo = $（照片）；
var照片{ }；
对于（var i = 0；i < _photo.length；i++）{
_photo {我}，{我} = _photo类名。classname.replace（ / * photo_center * /，）；
_photo {我}，{我} = _photo类名。classname.replace（ / *照片前 * /，）；
_photo {我}，{我} = _photo类名。classname.replace（ / *照片背面 * /，）；

因为前面的照片和照片都被替换了，
我_photo { }。类名= '照片前；

_photo {我}。style.left =；
_photo {我}。style.top =；
_photo {我}，{-moz变换风格} = _photo {我} { } = 'transform。风格的_photo {我}，{风格的WebKit转换} = 'rotate（0度）规模（1.3）；

Photos.push（_photo {我}）；
}

/ /无功photo_center = $（# photo_ + N）{ 0 }；
无功photo_center = document.getelementbyid（'photo_ + N）；
var newClass = photo_center.classname + photo_center；
/ / console.log（photo_center.attr（' '））；
photo_center = photos.splice（n，1）{ 0 }；
/ / photo_center.classname = newClass；
$（# photo_ + N）。Attr（阶级、阶级）；

/海报的其余部分分为两部分。
无功photos_left = photos.splice（0、Math.ceil（照片。长度/ 2））；
无功photos_right =照片；

var范围=范围（）；
左分区排序
对于（在photos_left）{
VaR的照片= photos_left { }；
photo.style.left =随机（范围。左。x）+ 'px；
photo.style.top =随机（范围。左。Y）+ 'px；
照片风格{-moz变换} = { 'transform照片。风格'} =照片风格{ - WebKit转换} = 'rotate（+随机（{ 150150 }）+ 'deg）规模（1）；

}
右/分区排序
对于（在photos_right）{
VaR的照片= photos_right { }；
photo.style.left =随机（范围。对。x）+ 'px；
photo.style.top =随机（范围。对。Y）+ 'px；
照片风格{-moz变换} = { 'transform照片。风格'} =照片风格{ - WebKit转换} = 'rotate（+随机（{ 100100 }）+ 'deg）规模（1）；

}

治疗/控制按钮
VaR资产净值= $（我）；

对于（var i = 0；i < navs.length；i++）{
NAV {我}，{我} classname =资产净值。classname.replace（ / * i_current * /，）；

NAV {我}，{我} classname =资产净值。classname.replace（ / * i_back * /，）；
}
/ /的对应当前海报按钮添加i_current风格
{ 0 } = $（#。类名nav_ + N）的i_current；

}

正、负越区切换与控制按钮切换效果：

功能化（元）{

var cls = elem.classname；
var n = elem.id.split（{ 1 } '_）；
如果（！（ / / photo_center。试验（CLS）））{
rsort（N）；

}
/ /以上如果className的实施改变的说法，因为我没有意识到这一点
这导致photo_center / /总课时不足
VaR CS =美元（' # photo_ + N）{ 0 }；
CLS = cs.classname；
如果（照片前面的测试（CLS））{
CLS = cls.replace（ / /照片前，'photo-back）；
{ 0 } = $（#。类名nav_ + N）的i_back；
{ }人
CLS = cls.replace（ / /照片回来，'photo-front）
$（# nav_ + N）{ 0 } = $（#。类名nav_ + N）{ 0 }。classname.replace（ / * i_back * /，）；
}
cs.classname = CLS；

}
根据rsort N（N），你可以找到它的海报是目前的海报和按钮的按钮被选中。

以上是相应的效果分析。

总结：

案例分析的思路与方法：

模块分析

VCD分析

一些新的CSS效果

三维视图位置设置子元素的3D支持

隐藏时翻转是不可见的。

使用CSS旋转（Y轴）和位移

CSS动画切换

前端脚本技巧

字符串替换的简单模板函数

根据范围获得一些随机数

使用脚本开关元件的名称和特定的样式属性

在实现过程中遇到的一个问题是，当图片被翻转时，它不能隐藏在Firefox中，这意味着下面的代码是一个问题。它已经检查很久了。
照片包装。侧{
-moz背面可见性：隐藏；
WebKit的背面可见性：隐藏；
背面的可见性：隐藏；
}

结果：我错过了变换风格：preserve-3d.so当浏览器兼容，记住没有前缀写风格

照片包装{
位置：绝对；
宽度：100%；
身高：100%；
风格：perserve-3d -moz变换；
WebKit的变换风格：preserve-3d； / * * /效果让里面的元素来支持3D
变换方式：preserve-3d； / *因为这句话，早在Firefox已经显示出来。
WebKit的过渡：1；
-moz过渡：1；
转换：全部1；
}
结束时附上完整的js代码。

生成一个随机值，支持随机范围；
函数随机（范围）{
VaR最大= math.max（范围{ 0 }，{ 1 }范围）；
VaR最小= Math.min（范围{ 0 }，{ 1 }范围）；
var =最大最小值；
VaR值= math.ceil（Math.random（）* DIFF +分钟）；
返回数；
}
4。输出所有海报
var数据=数据；
功能addphotos（）{
模板变量=（包#美元）。Html（）；
var；
var = { }；
对于（在数据中）{
无功_html = template.replace（{ } } {指数，S）
更换（{ {图片} }，{ }数据。IMG）
替换（{ } }，数据{标题）。
（{ { DESC。代替} }，{ }数据。DESC）；
Html.push（_html）；
每个海报都有相应的按钮
Nav.push（）；
}

Html.push（+ nav.join（）+）；
$（#换行）。Html（html.join（'））；
rsort（随机（{ 0，数据长度}））；
}

AddPhotos（）
左边的范围：{ x，{，6。计算max、y、min、max }、右{、x、{、min、max、y、{、min、max }的分区。
函数范围（）{
var { { { {
左：{
x：{，}
}，
右：{
x：{，}
}
}；

var包= {
W：$（' #换行）。Width（），
/ /女：600，
H：$（' #换行）。Height（）
}
var = {
W：$（'光'）{ 0 }。clientwidth，
H：$（'光'）{ 0 }。自己
}

左，X = 0-照片，W，2-照片2；
左，左=0；
是的，是的，2，加上2；
跑。右。y =跑。左。Y；

回跑；
}
5。海报
功能rsort（N）{
无功_photo = $（照片）；
var照片{ }；
对于（var i = 0；i < _photo.length；i++）{
_photo {我}，{我} = _photo类名。classname.replace（ / * photo_center * /，）；
_photo {我}，{我} = _photo类名。classname.replace（ / *照片前 * /，）；
_photo {我}，{我} = _photo类名。classname.replace（ / *照片背面 * /，）；

因为前面的照片和照片都被替换了，
我_photo { }。类名= '照片前；

_photo {我}。style.left =；
_photo {我}。style.top =；
_photo {我}，{-moz变换风格} = _photo {我} { } = 'transform。风格的_photo {我}，{风格的WebKit转换} = 'rotate（0度）规模（1.3）；

Photos.push（_photo {我}）；
}

/ /无功photo_center = $（# photo_ + N）{ 0 }；
无功photo_center = document.getelementbyid（'photo_ + N）；
var newClass = photo_center.classname + photo_center；
/ / console.log（photo_center.attr（' '））；
photo_center = photos.splice（n，1）{ 0 }；
/ / photo_center.classname = newClass；
$（# photo_ + N）。Attr（阶级、阶级）；

/海报的其余部分分为两部分。
无功photos_left = photos.splice（0、Math.ceil（照片。长度/ 2））；
无功photos_right =照片；

var范围=范围（）；
左分区排序
对于（在photos_left）{
VaR的照片= photos_left { }；
photo.style.left =随机（范围。左。x）+ 'px；
photo.style.top =随机（范围。左。Y）+ 'px；
照片风格{-moz变换} = { 'transform照片。风格'} =照片风格{ - WebKit转换} = 'rotate（+随机（{ 150150 }）+ 'deg）规模（1）；

}
右/分区排序
对于（在photos_right）{
VaR的照片= photos_right { }；
photo.style.left =随机（范围。对。x）+ 'px；
photo.style.top =随机（范围。对。Y）+ 'px；
照片风格{-moz变换} = { 'transform照片。风格'} =照片风格{ - WebKit转换} = 'rotate（+随机（{ 100100 }）+ 'deg）规模（1）；

}

治疗/控制按钮
VaR资产净值= $（我）；

对于（var i = 0；i < navs.length；i++）{
NAV {我}，{我} classname =资产净值。classname.replace（ / * i_current * /，）；

NAV {我}，{我} classname =资产净值。classname.replace（ / * i_back * /，）；
}
/ /的对应当前海报按钮添加i_current风格
{ 0 } = $（#。类名nav_ + N）的i_current；

}

功能化（元）{

var cls = elem.classname；
var n = elem.id.split（{ 1 } '_）；
如果（！（ / / photo_center。试验（CLS）））{
rsort（N）；

}
/ /以上如果className的实施改变的说法，因为我没有意识到这一点
这导致photo_center / /总课时不足
VaR CS =美元（' # photo_ + N）{ 0 }；
CLS = cs.classname；
如果（照片前面的测试（CLS））{
CLS = cls.replace（ / /照片前，'photo-back）；
{ 0 } = $（#。类名nav_ + N）的i_back；
{ }人
CLS = cls.replace（ / /照片回来，'photo-front）
$（# nav_ + N）{ 0 } = $（#。类名nav_ + N）{ 0 }。classname.replace（ / * i_back * /，）；
}
cs.classname = CLS；

}

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。