重置大小
问题描述:
我搜索论坛已经但我无法明确找到这样的事。重置大小
我有一个设置了一些图片,(外廊式的东西),并在图像上,他们用户点击它就会尺寸从200x200的缩略图更改为全尺寸600×600的页面。
我的问题是一个可以继续点击这些图片和前一个将保持放大。我想将展开图片的数量限制为一个。 这是JavaScript:
function toggleSize(image) {
if (image.style.width != "600px") {
image.style.width = "600px";
image.style.height = "600px";
} else {
image.style.width = "200px";
image.style.height = "200px";
}
和HTML为每个图像如下:
<img class="galleryImage" src="../m/54.jpg" onclick="toggleSize(this)" />
的galleryImage类看起来是这样的:
.galleryImage {
margin: -2px -2px -3px -2px;
width: 200px;
height: 200px;
}
所以基本上,从理论上讲,我希望类galleryImage的每个元素都重置为原始宽度和高度200x200。
任何帮助将不胜感激。
答
您可以使用getElementsByClassName
搜索具有给定类别的所有图像(并放弃当前),并通过循环结果将它们恢复为起始状态。
返回一个包含任何给定的 类名称的所有子元素的数组。在文档对象上调用时,搜索完整文档 ,包括根节点。你也可以在任何元素上调用 getElementsByClassName();它将仅返回元素 ,这些元素是指定的 类名的指定根元素的后代。
在此之后,你可以叫你切换功能。
代码:
function resetImages(classToFind, image) {
var elems = document.getElementsByClassName(classToFind);
if (!elems) return;
for (var i = elems.length - 1; i >= 0; i--) {
var elem = elems[i];
if (elem === image) continue
elem.style.width = "200px";
elem.style.height = "200px";
}
}
function toggleSize(image) {
resetImages('galleryImage',image);
if (image.style.width != "600px") {
image.style.width = "600px";
image.style.height = "600px";
} else {
image.style.width = "200px";
image.style.height = "200px";
}
}
答
这是一个jquery溶液,代码未经测试。但图像调整大小将按预期工作。
function toggleSize(image) {
// Get the current image size
var currentImageHeight = $(image).height();
// If it is 600, that means user clicked on a enlarged thumbnail
// Just resize it
if(currentImageHeight == 600){
$(image).width(200);
$(image).height(200);
}
// User clicked on other thumbnail. Resize previously enlarged thumbs
else{
$('.galleryImage').width(200);
$(image).width(600);
$(image).height(600);
}
}