css 缩略图

 

　　有没有看过一个网站上展示了略微旋转的图像缩略图？ 这是一种简单的效果，可增加视觉个性。 这样说，如果您不能通过CSS来实现旋转效果，那么您就太努力了！ 了解如何正确做！

 

　　带有旋转缩略图的图像画廊很少出现，但这是向网页添加样式的简单技巧。 但是，如果做得不好，有时达到并保持这种效果可能会很麻烦！

 

　　为了正确实现此效果，您的第一个想法可能是转向在Photoshop中创建旋转的缩略图。 但是，从长远来看，这可能会很困难。 以这种方式创建旋转缩略图的缺点包括：

 

　　角度一致性：如果图像未全部以相同角度旋转，则页面的视觉一致性会丢失。 这意味着要以正确的角度正确旋转每个缩略图的PSD。 例如，您可以打开PSD并意识到您忘记了缩略图的旋转角度。

 

　　CMS缩略图生成：如果您正在运行CMS（例如Wordpress），则缩略图可能会自动生成。 使用上述的PSD方法，您必须手动在CMS中创建和上传每个缩略图。 另外，如果您已经有一个站点，但想对缩略图应用旋转效果，则必须在Photoshop中重新创建所有缩略图，然后重新上传所有缩略图！

 

　　长期可管理性：假设您已经稍微旋转了所有缩略图，但是现在您想要重新调整或重新设计图库。 这意味着您必须重新生成所有缩略图。 如果您曾经在Photoshop中管理缩略图，则这意味着您必须重新调整并重新保存每个缩略图。 啊。

 

　　如果可以用一行代码执行这种小的旋转，那不是很好吗？ 好吧，你可以！ 让我们学习如何。

 

　　对我们要完成的工作的简要概述揭示了以下步骤：

 

　　在Photoshop中创建图像缩略图（未旋转）

 

　　使用标签插入缩略图

 

　　使用CSS适当遮罩它（考虑一下Photoshop遮罩）

 

　　使用CSS3旋转蒙版中的缩略图

 

　　为确保我们的图片库正常降级，将使用CSS完成步骤1-3。 步骤4（旋转效果）将使用CSS3完成。

 

　　在创建缩略图之前，我们需要确定每个缩略图将在屏幕上显示多大。

 

　　如果缩略图太小，并且旋转角度太大，则某些角会给我们留下空白。 像这样：

 

　　因此，为了正确地填充遮罩区域，我们可以得出结论，缩略图旋转得越多，它就必须越大。 用数学术语来说，随着缩略图旋转角度的增加，缩略图的大小也必须增加（反之亦然）。

 

　　记住此键：图像缩略图将始终大于图像蒙版（缩略图大小>蒙版大小）

 

　　步骤3-6描述了如何数学计算图像蒙版和缩略图的比例大小。 了解并不一定能够使用CSS 属性旋转图像。 相反，其目的是帮助您了解如何正确确定元素的大小以允许360°完整旋转。 这样可以确保您不会留下丑陋的空角。

 

　　为避免出现在我们的面具空白，我们必须确定下列之一 ：

 

　　实际缩略图的大小

 

　　图像遮罩的大小（缩略图的可见部分）

 

　　因为缩略图和图像蒙版的大小成比例地相等，所以如果我们设置一个的大小，我们就可以计算出另一个的大小。

 

　　在此示例中，我们将首先设置图像蒙版大小。 通过设置图像蒙版的大小，我们可以使用一些数学运算来计算缩略图的大小：

 

　　确定图像蒙版的大小：180x240像素

 

　　找出对角线边的长度

 

　　使用勾股定理（a 2 + b 2=c 2 ）

 

　　我们的第一面（a）为180像素

 

　　我们的第二面（b）为240像素

 

　　因此，180 2 + 240 2=c 2 （对角线长度）

 

　　90,000=c 2

 

　　300=c（取每边的平方根）

 

　　我们的对角线长度（c）等于300

 

　　对角线长度是一个重要的数字。 要使缩略图完整旋转360°，其最短边必须等于图像蒙版的最长边。 （即使您可能不需要它，也可以配置360°旋转，以便将来更改旋转角度而不必调整缩略图的大小。）

 

　　如您所见，缩略图的最短边必须等于蒙版的最长边。 如果不是，我们将留有空白空间。 请记住：缩略图的大小与图像蒙版的大小成比例。

 

　　一旦知道了图像蒙版的尺寸，就可以轻松计算出缩略图的大小以使其合适地适合。 我们只需要将蒙版的最大边（对角线）取为缩略图的最短边即可。

 

　　遮罩的最大侧面（300）等于缩略图的最短侧面（x）

 

　　使用比例关系找到缩略图的长度

 

　　180：300（蒙版的高度：缩略图的高度）

 

　　240：y（蒙版的长度：缩略图的长度）

 

　　交叉乘以解决  180y=72,000

 

　　y=400（缩略图的长度）

 

　　现在，我们确定了蒙版和缩略图的大小。 我们知道图像蒙版是否为180x240px，那么蒙版中的图像缩略图必须为300x400px才能进行360°旋转。

 

　　温馨提示：由于图像蒙版和缩略图的大小成比例相等，因此，如果我们先设置缩略图的大小，此数学运算也将起作用！ 我们将使用相同的勾股定理和比例关系来确定适当的大小。

 

　　现在我们知道了所有大小，让我们从一些基本HTML开始构建旋转的缩略图。

 

　　此基本HTML标记插入以下内容：

 

　　-这将允许用户更改旋转角度。 此外，我们将属性设置为与最初在CSS中设置的相同（在这种情况下为15）。

 

　　-此错误消息将从视图中隐藏。 如果用户在输入框中输入了除数字以外的其他内容，我们将使用jQuery进行显示。

 

　　-这些是我们的缩略图，可以链接到任何您喜欢的缩略图。

 

　　both-清除浮动的缩略图

 

　　-图像蒙版的类

 

　　让我们对页面应用一些基本样式以使其结构简单。

 

　　注意这里我们默认隐藏了 ，因为稍后我们将在jQuery中切换它的可见性。

 

　　让我们添加更多细节以增强我们的基本样式

 

　　现在，我们的内容以良好的间距和一些CSS3效果为中心，以增强页面样式。

 

　　让我们将图像蒙版应用于缩略图。 在我们HTML中，我们将每个缩略图包裹在一个定位标记中，并为其提供了一个类别，供我们在CSS中使用。

 

　　这是我们使用CSS属性的描述（以及为什么使用它们）：

 

　　我们的标签将完全定位在我们的图像蒙版中

 

　　， 之前我们确定了图像蒙版的尺寸。 这是我们放置这些尺寸的地方。

 

　　left-浮动我们的图像，使其以画廊形式显示。

 

　　-如前所述，我们的缩略图为300x400px。 但是，我们只会显示其中的一部分（180x240px）。 此属性充当遮罩，隐藏了缩略图的超出180x240尺寸的部分。

 

　　-缩小图片

 

　　， 这为我们提供了一个双边框（在支持的浏览器中）。 属性为我们提供了围绕图像的白色粗边框，而为我们提供了围绕白色的粗黑色细边框。

 

　　根据我们在步骤5中计算出的尺寸设置缩略图尺寸。

 

　　现在，我们的缩略图相对定位（从左上角开始）。

 

　　我们希望缩略图在遮罩内水平和垂直居中。

 

　　为此，我们使用以下CSS规则：

 

　　这是我们所做的描述：

 

　　将缩略图完全定位在图像蒙版中

 

　　-我们将负边距设置为恰好是图像的高度和宽度（300x400）的一半，然后将我们的定位属性设置为和 ，这会将元素拉回到完美的中心。

 

　　我们将使用CSS3属性来旋转元素。 因此，我们CSS将包含所有浏览器前缀

 

　　这里CSS非常简单。 我们只是将旋转角度放在括号中，然后加上“ deg”。

 

　　在此示例中，我们使用15作为旋转值，但是您可以在其中放置一个不同的值。 由于我们正确计算了蒙版和缩略图的大小，因此我们为360°旋转预留了空间！ 正整数将图像向右旋转，负整数将图像向左旋转。

 

　　作为附加效果，我们将添加一条简单CSS行，当用户将鼠标悬停在图像上时会更改边框颜色。

 

　　作为一点好处，我们将允许用户在我们的输入框中输入一个值来更改CSS旋转角度。 因此，首先，让我们在页面末尾紧接标记之前添加jQuery以及指向自定义脚本的链接：

 

　　现在让我们为文档准备就绪时设置jQuery：

 

　　每当我们单击“更新”按钮时，我们都会创建一个函数。

 

　　我们希望将当前旋转角度CSS数值存储在变量中。

 

　　这段代码找到了 id（我们将其分配给 ）并获取了其当前值。 如果您还记得的话，我们会将初始属性设置为等于15（与CSS代码中的旋转角度相同）。

 

　　我们希望使用户的输入值成为新的旋转角度。 但是，我们要确保用户不会意外输入非数字值。 这就是 javascript函数进来的地方代表“不是数字”。 该函数的功能恰如其名称所暗示的那样：它检查是否传递给它的值“不是数字”。

 

　　因此，我们将使用函数并将其旋转角度值（由用户输入传递给它。 如果不是数字，我们将显示错误消息。

 

　　如果用户新输入的值不是数字，则我们显示了一条错误消息。 现在，我们将使用的时候，他们已经进入了一个数值的声明。 首先，我们隐藏错误消息。

 

　　由于旋转角度在CSS中多次存储（由于各种浏览器前缀），因此我们必须使用jQuery更新所有这些值。 因此，我们要做的是将CSS值的语法存储在变量中（带有新的angle值）。 本质上，我们正在编写 ，并将“ 15”的值替换为用户输入的值。

 

　　然后，我们创建具有关系值CSS对象。 我们定义每个CSS属性（用于转换的浏览器前缀），然后将值插入为我们刚刚定义的变量。

 

　　现在，我们只需将存储CSS属性和值的变量传递给jQuery即可更新CSS！

 

　　这就是我们所有的jQuery的样子：

 

　　希望您学到了一些知识，尤其是可以通过直接在浏览器中使用CSS3技术来避免在Photoshop中进行非灵活的设计。 感谢您的关注！