散宝丽来
{A}目录{A2的}{A3的}{A4纸}{A5的}{A6的}{A7的}{A8的}{A9的}{A10的}
{A13号}{A14高速公路}
简介
疏散宝丽来的第一部分是一个项目，我为我的的朋友Janaina罗西・莫雷拉，在巴西的剧团工作的发展名为quot;正如Bárbaras做Multeatroquot的;
该项目的目标是宣传公司的工作，并在同一时间提供了一个很好的音频和视觉体验的游客，依托于多媒体，
视频，影像，诗歌和回忆，更好地捕捉公司的艺术精髓。
有很多可以发展的途径之一，通常在一种有序的方式浏览照片集。散乱宝丽是一个不同的方法，喜欢当你把一个旧箱子的图片，删除表上的所有这些，并开始随机挑选。本文涉及这项技术，并希望以某种方式对你有帮助。{A17中}系统需求
为了运行的散乱的宝丽来连接到这篇文章的样品，你必须有一个浏览器支持CSS3 2D变换:
{S}Internet Explorer 9的或上级火狐野生动物园铬宝丽盒
{S2的}
宝丽盒的元素，将持有的图片，并接收鼠标功能所需的一些事件。
这是强制性的，你有一个polaroid_box格，在您的网页或图片持有人可以作为另一个。<body>
<div class="polaroid_box">
</div>
</body>
载入图像
{S3的}
加载的图像在一个简单的字符串数组，它描述的图像的URL路径:{C}
一旦数组被加载，可以致电createPolaroids，功能呈现给定的父元素内所有需要的DOM元素:...
maxZIndex = images.length;
createPolaroids($('.polaroid_box'), images);
...
{四至}
在这里，最重要的部分显然是创建DOM元素，会使我们在页面的偏振片。请注意我们将在很大程度上依赖jQuery JavaScript框架。这既减少最枯燥的工作，也确保我们将避免跨浏览器的问题。{体C3}{A21号}生成随机的位置和旋转
我们需要产生随机位置和旋转每个宝丽来，否则不能被称为"scatteredquot;偏振片。因此，所有在这里，我们需要做的是产生属于我们的屏幕上可以接受的边界之间的数字（也就是说，图片包含在一个盒子里，所以我们不希望我们的照片脱落在屏幕上）。{的C4}
现在，我们已经收集了宝丽来所需的所有数据，我们创建了一个新的宝丽莱类型，保存这些信息。这将是有益的封装数据提供操纵偏振片的方法。{C5的}
然后将信息提供宝丽来作为一个构造的功能，然后将举行的实例参数:{5233}{A22号}定位和旋转宝丽
{五}
宝丽来加载数据后，我们就可以调用updateLayout原型的功能，将相应更新所需的CSS属性:{C7-}
重要的是要注意到，在上面的代码段的最后一行提供的主流浏览器的CSS转换:WebKit的变换:Chrome和SafariMOZ-变换:火狐msTransform:Internet Explorer中{A23}使用CSS3盒阴影
{六}
CSS3盒阴影的阴影，概述了我们的照片。这是一个不错的功能，使我们的网页视觉吸引力。但由于发生在这个世界上最漂亮的东西，你应该使用它与节制。一个框的阴影，需要激烈的加工，这取决于你如何使用它。我们的宝丽CSS类定义与框阴影的偏移量（4,4）和32个像素的深度:
{C8的}
正如您稍后将看到，在这篇文章中，我们删除宝丽动画，性能更好的效益，在框阴影。作为小费，它可能是一个好主意，放弃使用箱阴影，代之以一个静态的png图片（PNG图像允许透明度）。，从而提高了性能。{A24的}拖放拍立得
应用程序知道宝丽来是被拖到存储宝丽来在selectedPolaroid变量的实例。当你点击一些宝丽，宝丽来的mousedown事件将被触发，将存储selectedPolaroid。$('.polaroid').mousedown(function (event) {
var id = $(this).attr('id');
var i = id.replace('polaroid', '');
var polaroid = polaroids[i - 1];
if (polaroid.scale == minScale) {
polaroid.zIndex = maxZIndex++;
polaroid.updateLayout();
if (selectedPolaroid) {
selectedPolaroid = null;
}
else {
selectedPolaroid = polaroid;
selectedPolaroid.xOffset = event.pageX - selectedPolaroid.left;
selectedPolaroid.yOffset = event.pageY - selectedPolaroid.top;
}
}
else {
if (zoomedPolaroid.id == polaroid.id) {
polaroid.drop();
}
}
});
从这个角度上，任何鼠标移动将触发mousemove事件，宝丽来框和选定的宝丽莱位置将被更新:{C10的}
的拖放式结束后，当你松开鼠标按钮。在这一点上，我们设置selectedPolaroid的变量为null。{C11的}{A25}拉宝丽来
在某些时候，你发现有趣图片，希望看到更接近。所以，你双击它。这将触发动画功能在我们的应用程序，将带来一个宝丽来前。画面看起来更大，在屏幕中心的完美直。这是通过一个动画，这是此应用程序的更复杂的部分，要更好稍后解释。一旦宝丽来，我们设置zoomedPolaroid的变量和等待，直到用户下降或双击另一张照片。{C12的}{A26}删除宝丽
放大宝丽被丢弃时，它的用户点击或双击另一个偏振片。这将启动反向动画，和宝丽来将离开屏幕的中心，并回到它以前的位置，规模，和旋转角度。通过JavaScript {A27高速公路}生动活泼的视线
{七}
动画是复杂的部分。他们需要的目标规模，目标旋转角度，以及目标位置。由于宝丽来可去中心或即将回到它以前的位置，我们避免重复代码封装里面的动画功能的核心功能。
首先，我们计算的增量（一个角度，另一个为一体的规模，和两个三角洲的位置）。然后我们计算的步骤（即增量每次迭代将适用于目前动画值）。然后，我们开始setInterval函数重新宝丽来，旋转，和更新底层的DOM元素，动画，直到达到目标值。polaroid.prototype.animate = function (targetScale, targetRotation,
targetLeft, targetTop, beginCallback, endCallback) {
var pol = this;
if (pol.isMoving)
return;
pol.isMoving = true;
var parentWidth = this.$parentEl.width();
var parentHeight = this.$parentEl.height();
var polaroid = pol;
if (beginCallback)
beginCallback(polaroid);
var angleDelta = targetRotation - polaroid.rotation;
var scaleDelta = targetScale - polaroid.scale;
var leftDelta = targetLeft - polaroid.left;
var topDelta = targetTop - polaroid.top;
var steps = animationSteps;
var scaleStep = scaleDelta / steps;
var rotationStep = angleDelta / steps;
var leftStep = leftDelta / steps;
var topStep = topDelta / steps;
var interval;
var rotation = polaroid.rotation;
var scale = polaroid.scale;
var left = polaroid.left;
var top = polaroid.top;
var $polaroid = $('#polaroid' + pol.id);
$polaroid.css('z-index', 100);
$polaroid.css({ "-moz-box-shadow": "0 0 0 #fff" });
$polaroid.css({ "-webkit-box-shadow": "0 0 0 #fff" });
$polaroid.css({ "box-shadow": "0 0 0 #fff" });
var interval = setInterval(function () {
if (
(scaleStep > 0 && scale >= targetScale) ||
(scaleStep < 0 && scale <= targetScale)
) {
scale = targetScale;
}
$polaroid.css({ WebkitTransform: 'rotate(' + rotation +
'deg) scale(' + scale + ')' });
$polaroid.css({ '-moz-transform': 'rotate(' + rotation +
'deg) scale(' + scale + ')' });
$polaroid.css({ msTransform: 'rotate(' + rotation +
'deg) scale(' + scale + ')' });
$polaroid.css('left', left + 'px');
$polaroid.css('top', top + 'px');
if (scale == targetScale) {
$polaroid.css({ "-moz-box-shadow": "4px 4px 32px #000" });
$polaroid.css({ "-webkit-box-shadow": "4px 4px 32px #000" });
$polaroid.css({ "box-shadow": "4px 4px 32px #000" });
pol.isMoving = false;
clearInterval(interval);
rotation = targetRotation;
scale = targetScale;
left = targetLeft;
top = targetTop;
pol.rotation = targetRotation;
pol.scale = targetScale;
pol.left = targetLeft;
pol.top = targetTop;
pol.updateLayout();
if (endCallback)
endCallback(polaroid);
}
rotation += rotationStep;
scale += scaleStep;
left += leftStep;
top += topStep;
}, 5);
};
我希望你喜欢的文章和代码。我想在这里介绍的技术是简单而有用的。请留下评论，让我知道你想想看，在下面的部分。{A29}历史2011年8月28日:初始版本。
|马塞洛・里卡多・奥利维拉:Sophia_xd