时间戳

首页 > 解决方案 > 在图像周围动态创建一个或多个边框

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

问题描述

需要在一个图像周围有未知数量的边框，已经做了一个解决方案，只是想知道是否有更好的可能性。

我有一个有很多照片展示的网站。每个节目都是一个 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 box-shadow 的文章后，我想出了以下在 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}

所以通过这种方式，我设法建立了各种类值。

我的问题：是否有更短或更好的方法来动态创建不同的边界？

标签： javascriptcss

解决方案

推荐阅读