时间戳

首页 > 解决方案 > 缩放到移动设备时如何用图像/图标替换文本？

javascript - 缩放到移动设备时如何用图像/图标替换文本？

问题描述

我是新手，找不到很多具体的答案。当视口缩小到移动尺寸时，我正在寻找一种将文本标签更改为图像的方法。我还有其他问题，因为我正在使用 Leaflet，一个用于 Open Street Maps 的 java 脚本库。他们组织的东西有点不同，我必须注入我的风格。

这是我的带有图标的实时页面：https ://leksplay.com/playgroundmap （仍在处理我的 SSL 证书）。

我的完整内联样式在底部。我这里有几件事要发生。

var overlayMaps = {
       "All Playgrounds": dummy[0],
       "<img class='icons' src='https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png' alt='Restrooms'>": dummy[1],
       "<img class='icons' src='https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png' alt='Public grills'>": dummy[2],
       "<img class='icons' src='https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png' alt='Accessible equipment'>": dummy[3],
       "<img class='icons' src='https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png' alt='Indoor area'>": dummy[4],
       "<img class='icons' src='https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png' alt='Fully fenced'>": dummy[5],
       "<img class='icons' src='https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png' alt='Partially fenced'>": dummy[6],
       "<img class='icons' src='https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png' alt='Animals'>": dummy[7],
       "<img class='icons' src='https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png' alt='Pool or beach'>": dummy[8],
       "<img class='icons' src='https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png' alt='Toddler Area'>": dummy[9]
  };

我确信有一种方法，可能是使用 jQuery（我不知道），可以在移动设备上修复 flex 容器，或者在较小的屏幕上简单地从桌面上的文本转换为图标。这是纯文本版本的实时示例：https ://leksplay.com/test-and 我的最终目标是找到一种方法，可以在移动设备上显示我的控制框（过滤器），而无需浏览器创建溢出滚动框或使用户不必要地滚动到实际地图。

任何帮助表示赞赏。

<div class="flexcontainer">
    <div id="new-parent">
    </div>
    </div>


<script>// Create the control and add it to the map;

var control = L.control.layers(null, overlayMaps,{collapsed:false});
control.addTo(map);

// Call the getContainer routine.
var htmlObject = control.getContainer();
// Get the desired parent node.
var a = document.getElementById('new-parent');

// Finally append that node to the new parent.
function setParent(el, newParent)
{
    newParent.appendChild(el);
}
setParent(htmlObject, a);


</script>


<style>
*, *::before, *::after {
  box-sizing: border-box;
  vertical-align: middle;
}

body {
    color: #435757;
    background: radial-gradient(#fff, #dac4cd);
    font: min(3vw, 16px) 'Montserrat';
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
label:first-of-type {
    border: 3px solid #689c93;
    margin: min(1vw,10px) 75%;
    flex: 0 0 30%;
    border-radius: 100px;
}
label {
    display: block;
    position: relative;
    padding: min(.5vw, 5px) min(3vw, 15px) min(.5vw, 5px) min(.5vw, 5px);
    color: #000;
    background-color: transparent;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s, box-shadow .2s;
    flex: 0 0 20%;
    border-radius: 100px;

}

.flexcontainer {
    display: flex !important;
    flex-wrap: wrap;
}

.icons {
    width: 70px;
}

#new-parent {
    position: relative;
}

</style>



<style>
.leaflet-control-layers-selector {
     --primary: #679C92;
     --secondary: #E0E0E0;
     --duration: 0.5s;
     -webkit-appearance: none;
     -moz-appearance: none;
     -webkit-tap-highlight-color: transparent;
     -webkit-mask-image: -webkit-radial-gradient(white, black);
     outline: none;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transform-style: preserve-3d;
     perspective: 240px;
     border-radius: 50%;
     width: min(3.5vw, 25px);
     height: min(3.5vw, 25px);
     background-size: 300% 300%;
     transition: transform 0.3s;
     transform: translate(0vw, 0vw);
     transform-origin: center center;
     animation: var(--name, unchecked) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before, .leaflet-control-layers-selector:after {
     content: '';
     position: absolute;
     height: var(--height, 13px);
     left: 3px;
     top: var(--top, 3px);
     background: var(--background, var(--primary));
     animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
}
.leaflet-control-layers-selector:before {
     clip-path: polygon(0 0%);
}

.leaflet-control-layers-selector:active {
     --scale: 0.95;
}
.leaflet-control-layers-selector:checked {
     --name: checked;
     --name-icon-b: checked-icon;
     --name-icon-a: unchecked-icon;
}
 @keyframes checked-icon {
     from {
         transform: translateZ(12px);
    }
     to {
         transform: translateX(16px) rotateY(90deg) translateZ(12px);
    }
}
 @keyframes unchecked-icon {
     from {
         transform: translateX(-16px) rotateY(-90deg) translateZ(12px);
    }
     to {
         transform: translateZ(12px);
    }
}
 @keyframes checked {
     from {
         background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
         background-position: 100% 50%;
    }
     to {
         background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
         background-position: 50% 50%;
    }
}
 @keyframes unchecked {
     from {
         background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
         background-position: 100% 50%;
    }
     to {
         background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
         background-position: 50% 50%;
    }
}
 html {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
}
 * {
     box-sizing: inherit;
}
 *:before, *:after {
     box-sizing: inherit;
}

</style>




<style>
.leaflet-control-layers-expanded {
    padding: 0px 0px 0px 0px !important;
    background: transparent !important;
    }

.leaflet-control-layers {
    box-shadow: 0 0px 0px rgba(0,0,0,00) !important;
    background: transparent !important;
    border-radius: 0px !important;
}
.leaflet-control-layers-overlays {
    display: flex !important;
    position:unset;
    justify-content: center;
    flex-wrap: wrap;
    flex-basis: unset;
    align-items: center;
    width: 75%;
    margin: 0px 12.5% 0px 12.5%;
    align: center;
}


</style>

标签： javascripthtmljquerycssleaflet

解决方案

这是解决方案：

步骤一：浏览器小于991px或手机屏幕小于991px时隐藏文字；

第二步：设置背景图片。

@media all and (max-width:991px){

    
      
		#tst1{
      background-image:url('https://static.tildacdn.com/tild6162-6637-4663-b262-356661343562/IconsMedium_WC.png');     
       transition:all 0.3s;  
       color:transparent;
       background-size:50px 25px;
       background-repeat:no-repeat;
       background-position:center;



		}
		#tst2{
      background-image:url('https://static.tildacdn.com/tild6238-6432-4162-a161-333539326537/IconsMedium_Grill.png');  
       transition:all 0.3s;       
       color:transparent;
       background-size:50px 25px;
       background-repeat:no-repeat;
       background-position:center;



		}
		#tst3{
      background-image:url('https://static.tildacdn.com/tild3939-3338-4237-b732-346131313435/IconsMedium_Access.png');
       transition:all 0.3s;         
       color:transparent;
       background-size:50px 25px;
       background-repeat:no-repeat;
       background-position:center;



		}
		#tst4{
      background-image:url('https://static.tildacdn.com/tild3634-3833-4338-b834-626437613735/IconsMedium_Indoor.png'); 
       transition:all 0.3s;        
       color:transparent;
       background-size:50px 25px;
       background-repeat:no-repeat;
       background-position:center;



		}
		#tst5{
      background-image:url('https://static.tildacdn.com/tild3331-3632-4239-a333-343137356133/IconsMedium_Full_Fen.png');     
       transition:all 0.3s;  
       color:transparent;
       background-size:50px 25px;
       background-repeat:no-repeat;
       background-position:center;



		}
		#tst6{
      background-image:url('https://static.tildacdn.com/tild3339-3038-4032-a638-626137393039/IconsMedium_Partial_.png');    
       transition:all 0.3s;     
       color:transparent;
       background-size:50px 25px;
       background-repeat:no-repeat;
       background-position:center;



		}
		#tst7{
      background-image:url('https://static.tildacdn.com/tild3336-3333-4137-a562-346663633031/IconsMedium_Horse.png');  
       transition:all 0.3s;       
       color:transparent;
       background-size:50px 25px;
       background-repeat:no-repeat;
       background-position:center;



		}
		#tst8{
      background-image:url('https://static.tildacdn.com/tild3332-6230-4731-a138-373630383130/IconsMedium_Water.png');   
       transition:all 0.3s;      
       color:transparent;
       background-size:50px 25px;
       background-repeat:no-repeat;
       background-position:center;



		}
		#tst9{
      background-image:url('https://static.tildacdn.com/tild3761-3935-4338-b861-336231626433/IconsMedium_Toddler.png'); 
       transition:all 0.3s;       
       color:transparent;
       background-size:50px 25px;
       background-repeat:no-repeat;
       background-position:center;



		}

	}
<span id="tst1">Restrooms</span>

<span id="tst2">Public grills</span>

<span id="tst3">Accessible equipment</span>

<span id="tst4">Indoor area</span>

<span id="tst5">Fully fenced</span>

<span id="tst6">Partially fenced</span>

<span id="tst7">Animals</span>

<span id="tst8">Pool or beach</span>

<span id="tst9">Toddler Area</span>

我对您的代码进行了少量修改以使其正常工作。请全屏运行并减小浏览器的大小以查看更改。

另外，用这段代码替换你的代码区域并应用 css。我已经将 991px 作为断点，但你可以选择你选择的断点。

推荐阅读