<span class=arc></span>
<style>
.arc{
display: block;
position: absolute;
width: 200px;
height: 30px;
border: 2px solid black;
border-top: none;
border-radius: 0 0 50% 50%/ 0 0 100% 100%;
}
.arc:after{
content: "360°";
position: absolute;
left: 50%;
transform: translateX(-50%)
}
</style>$(document).ready(function(){
$('#search').keyup(function(){
$('#result').html('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('goods.json', function(data){
$.each(data, function(key, value){
let i = 0;
while(i<10)
{
if(value.name.search(expression) != -1 || value.location.search(expression) != -1)
{
$('#result').append('<li style="list-style-type: none;margin:2px;border-bottom:1px solid #333;"><a href="'+key+'" title=""><img src="'+value.img+'" height:"40" width="40">'+value.name+'</a></li>');
i++;
}
}
});
});
});
});var bg = document.querySelector("#bg");
window.onmousemove = e => {
x = e.offsetX;
y = e.offsetY;
bg.style.left= x/30+"px"
bg.style.top= y/30+"px"
}function initWebGL(canvas) {
gl = null;
try {
// Попытаться получить стандартный контекст. Если не получится, попробовать получить экспериментальный.
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch(e) {}
// Если мы не получили контекст GL, завершить работу
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
gl = null;
}
return gl;
}