document.querySelector("div").style="--bg-color:blue; --width:300px; --align:center"document.querySelectorAll("button").forEach(el => el.addEventListener("mouseover", e => alert("Вы навели на кнопку: "+e.target.textContent)))document.querySelector("button").addEventListener("click", e => {
const items = document.querySelectorAll(".item");
const first = items[0].textContent;
[...items].map((el, i) => {
el.textContent = (i < items.length - 1) ? items[i+1].textContent : first;
});
})Но когда показывается последний элемент, то смена контента должна прекратиться, аналогично и с первым.
var checker = {
// получить координаты углов объекта
getRectangle: function (el) {
return {
left: el.offsetLeft,
top: el.offsetTop,
right: el.offsetLeft + el.offsetWidth,
bottom: el.offsetTop + el.offsetHeight
}
},
// проверка на пересечение
collide: function (el1, el2) {
var rect1 = this.getRectangle(el1);
var rect2 = this.getRectangle(el2);
return !(
rect1.top > rect2.bottom ||
rect1.right < rect2.left ||
rect1.bottom < rect2.top ||
rect1.left > rect2.right
);
},
// проверка на совпадение
inside: function (el1, el2) {
var rect1 = this.getRectangle(el1);
var rect2 = this.getRectangle(el2);
return (
((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
);
}
}<body style="text-align: center; align-items: center; transform: rotate(90deg);">
<iframe src="ссылка на трансляцию" width="100%" height="100%" frameborder="0"
allowfullscreen="allowfullscreen"></iframe>
</body><body style="margin:0;padding:0;overflow:hidden;transform:rotate(90deg)">
<iframe src="ссылка на трансляцию" style="width:100vw;height:100vh;border:0" allowfullscreen="allowfullscreen"></iframe>
</body><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Live</title>
<style>
body{
background-color: red;
}
html, body, iframe{
margin: 0;
padding: 0;
}
body {
transform: rotate(90deg);
overflow: hidden;
}
iframe {
width:100vh;
height:100vw;
border:0;
}
</style>
</head>
<body>
<iframe src="https://vk.com/video_ext.php?oid=-186018794&id=456239023&hash=5e067f6f701bf75e"
allowfullscreen="allowfullscreen"></iframe>
</body>
</html>body {
background: red;
padding: 20px;
font-family: Helvetica;
}
.text {
margin-bottom : 15%;
transition: all 1s;
}
.knopka {
opacity: 0;
transition: all 1s;
}$(".kvadrat").mouseenter(function(){
$(".knopka").css({
'opacity' : '1'
});
$(".text").css({
'margin-bottom' : '30%'
});
});
$(".kvadrat").mouseleave(function(){
$(".knopka").css({
'opacity' : '0',
});
$(".text").css({
'margin-bottom' : '15%'
});
});А JQuery в несложных операциях редко подводит. Этот случай редкость, если это вообще из-за JQ
$(function(){
if ($(window).width() < 1184) {
$( "#nav1" ).css( "display", 'none');
$( "#nav2" ).css( "display", 'none');
}
$(window).resize(function(){
if ($(window).width() < 1184) {
$( "#nav1" ).css( "display", 'none');
$( "#nav2" ).css( "display", 'none');
} else {
$( "#nav1" ).css( "display", 'flex');
$( "#nav2" ).css( "display", 'flex');
}
})
$( ".nav-logo" ).click(function() {
if ($(window).width() < 1184) {
$( "#nav1" ).toggle( "slow", function() {
// Animation complete.
// $(this).rotate(100);
});
$( "#nav2" ).toggle( "slow", function() {
// Animation complete.
// $(this).rotate(100);
});
} else {
$( "#nav1" ).css( "display", 'flex');
$( "#nav2" ).css( "display", 'flex');
}
});
});window.matchMedia('screen and (max-width: 1184px)').matchesif (window.matchMedia('screen and (max-width: 1184px)').matches) {
$( "#nav1" ).css( "display", 'none');
$( "#nav2" ).css( "display", 'none');
} else {
$( "#nav1" ).css( "display", 'flex');
$( "#nav2" ).css( "display", 'flex');
}function changeBackground(){
var h = (new Date()).getHours();
var b = document.body;
if (h > 0 && h < 6) {
// ночь
img = 'https://images.wallpaperscraft.com/image/moon_branch_night_clouds_48105_1920x1080.jpg';
} else if (h >=6 && h < 10) {
// утро
img = 'https://i.artfile.me/wallpaper/11-09-2012/1920x1080/priroda-voshody-zakaty-lug-voshod-utro-t-660656.jpg';
} else if (h >= 10 && h < 19) {
// день
img = 'https://get.wallhere.com/photo/sunlight-nature-grass-sky-field-horizon-cloud-grassland-meadow-plain-1920x1080-px-prairie-computer-wallpaper-cumulus-573793.jpg';
} else if (h >= 19) {
// вечер
img = 'https://www.bmwunstoppable.com/wp-content/uploads/2017/03/5nXkqs.jpg';
}
b.style = 'background-image: url('+img+')';
setTimeout(changeBackground, 60000);
}
changeBackground();el.style = 'background-image: url('+img+')';
document.getElementsByClassName("my-class1")[0].className="my-class2"document.getElementsByClassName("my-class1")[0].style="font-family: 'PT Sans';font-style: normal;"function checkMyFirstBlock(el){
if(el.className.indexOf("my-class1-2") == -1) {
// не найдено "my-class1-2"
document.getElementsByClassName("my-class2")[0].style = "background-color:red";
} else {
// найдено
document.getElementsByClassName("my-class2")[0].style = "background-color:white";
}
}