Question

需要在图像周围有未知数量的边界，已经提出解决方案，只是想知道是否存在更好的可能性。

我的网站上有很多照片展示。每场演出都是一个JSON文件，其中每张照片都是该文件中的数组条目，例如

{
"filename": "02.jpg", 
"short": "text under thumbnail",
"title": "A description or explanation above the photo"
}

通常，这些照片会带有一个小的白色边框，但有时我想显示该照片的位置，因此在JSON文件中，我具有该照片的以下附加信息：

"latitude": "51 02 39.73 N",
"longitude": "114 03 47.37 W",

我在照片周围放置了黄色边框，以表明存在位置信息，因此，单击照片或其中一个坐标（或键盘M）会打开googleMaps以显示位置。

最近我在一些照片中添加了一些视频，因此双击照片（或键盘V）以开始播放该视频。我在照片周围放置了青绿色边框，表示有视频。在JSON文件中，它看起来像这样：

"video": "myvideo.mp4",

当然我突然有了一张带位置信息和视频的照片，所以现在我需要两个边框：一个黄色边框和一个绿松石边框... 使事情复杂化的是，我偶尔会在JSON文件中定义一张带有音夹和绿色边框的照片，

"sound": "myclip.mp3",

因此，可能还会出现带有3个不同颜色边框的照片。

在阅读了一些stackoverflow框阴影文章之后，我想出了以下Javascript解决方案来创建1,2,3甚至更多的边框：

var borderStyle = "";
if (elt.longitude) {
  borderStyle = "coordbrdr";
}
if (elt.sound) {
  borderStyle += "soundbrdr";
}
if (elt.video) {
  borderStyle += "videobrdr";
}   
if (borderStyle == "") {borderStyle = "normalbrdr";}
$(elt.imgHTML).attr('class', borderStyle);

及其随附的CSS：

.normalbrdr {border:6px solid white;} 
.coordbrdr {border:6px solid yellow; cursor:pointer;} 
.soundbrdr {border:6px solid lightgreen; cursor:pointer;}
.videobrdr {border:6px solid turquoise; cursor:pointer;}
.coordbrdrsoundbrdr {box-shadow: 0 0 0 6px yellow, 0 0 0 12px green; cursor:pointer}
.coordbrdrvideobrdr {box-shadow: 0 0 0 6px yellow, 0 0 0 12px turquoise; cursor:pointer}
.coordbrdrsoundbrdrvideobrdr {box-shadow: 0 0 0 6px yellow, 0 0 0 12px green, 0 0 0 18px turquoise; cursor:pointer}
.soundbrdrvideobrdr {box-shadow: 0 0 0 6px green, 0 0 0 12px turquoise; cursor:pointer}

因此，我设法建立了各种类值。

我的问题：是否可以使用一种更短或更佳的方法来动态创建不同的边界？

动态在图像周围创建一个或多个边框

0 个答案: