Установка положения во время выполнения

ProgramBox

Установка положения во время выполнения

Post author:admin
Запись опубликована:2 декабря, 2022
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

При наведении курсора мыши я хочу переместить «imgbox» в определенную абсолютную позицию (что может переместить его поверх изображения «i»).

Загружается второе изображение («newimg»), так что эта часть работает (включая ее повторное скрытие в «onmouseout»), но оно отображается под всем (как в HTML-коде). Это похоже на настройку imgbox.style.left и imgbox.style.top ничего не делает. Если вместо этого я установлю «margin», изображение будет отображаться на 200 пикселей вправо и на 200 пикселей вниз от того места, где оно было изначально (но все равно ниже всего остального).

Что я пропустил? Как мне переместить «imgbox» во время выполнения с помощью обычного Javascript (пожалуйста, без jQuery!)?

 function onHoverIn(url) {
    var imgbox = document.getElementById("imgbox");
    imgbox.style.visibility='visible';

    var newimg = document.createElement("img");
    newimg.src = url;

    var oldimg = document.getElementById("i");

    /*if(oldimg.addEventListener){ //Removed so the snippet'll run
        oldimg.addEventListener('mouseout',onHoverOut,false);
    } else {
        oldimg.attachEvent('onmouseout',onHoverOut);
    }*/
    imgbox.innerHTML='';
    imgbox.appendChild(newimg);

    imgbox.style.left = '200px';
    imgbox.style.top = '200px';
    //imgbox.style.marginLeft = '200px';
    //imgbox.style.marginTop = '200px';
}

 #imgbox {
    position : absolute;
    border: 1px solid #999;
    background : #FFFFFF; 
    filter: Alpha(Opacity=100);
    visibility : hidden;
    z-index : 50;
    overflow : hidden;
}

 <img id="i" src="https://i.pinimg.com/originals/53/02/a4/5302a4c318139bf5753c433b1f4c6aa8.jpg" alt="DP" onmouseover="onHoverIn('https://i.pinimg.com/originals/b2/1b/07/b21b0738ea390fc56a4d3efe76ab88de.jpg')"> 
<p>Long Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<br><br><br><br><br>END TEEEEEEEEEEEXT</p>
<div id="imgbox"></div>

Развернуть фрагмент

Извините, изображения довольно большие, поэтому не уверен, насколько хорошо это будет работать. Я протестировал код в Firefox 85.0, Chrome 88, IE и Edge, просто дважды щелкнув файл .html, и ни в одном из них позиционирование не работает должным образом.

1. не могли бы вы, пожалуйста, попробовать добавить свой код, включающий onHoverOut функцию, в виде фрагмента здесь?

2. Я только что добавил фрагмент.

3. @TolgahanAlbayrak Есть предложения, почему это не работает?

Ответ №1:

Это было немного сложнее, чем я думал, что это будет, внес некоторые изменения в ваш код. Надеюсь, это все еще работает для вас.

ПРИМЕЧАНИЕ: я реализовал onHoverOut локально и заметил, что при наведении курсора мыши на изображение оно будет мерцать. Это происходит потому, что загружается новое изображение, и при повторном перемещении старое изображение регистрирует a onHoverOut (потому что вы наводите курсор поверх нового изображения), которое затем удаляет новое изображение, после чего старое изображение onmouseover снова регистрирует и добавляет новое изображение. Это будет продолжаться до тех пор, пока вы перемещаете мышь.

 function onHoverIn(url) {
    var imgbox = document.getElementById("imgbox");
    imgbox.style.visibility='visible';

    var newimg = document.createElement("img");
    newimg.src = url;

    var oldimg = document.getElementById("i");

    if(oldimg.addEventListener){
        oldimg.addEventListener('mouseout',onHoverOut,false);
    } else {
        oldimg.attachEvent('onmouseout',onHoverOut);
    } 
    //imgbox.innerHTML='';
    imgbox.appendChild(newimg);
}
function onHoverOut() {
    console.log('onHoverOut: not implemented');
}

 .article{
    width:640px;
    padding:0 16px;
}
.image-box{
    position:relative;
    width:100%;
    height:0;
    /* 16:9 */
    padding-top:56.25%;
    overflow:hidden;
}
.image-box img{
    position:absolute;
    top:0;
    width:100%;
}

 <div class="article">
    <p>content before..</p>
    <div id="imgbox" class="image-box">
        <img id="i" src="https://i.pinimg.com/originals/53/02/a4/5302a4c318139bf5753c433b1f4c6aa8.jpg" alt="DP" onmouseover="onHoverIn('https://i.pinimg.com/originals/b2/1b/07/b21b0738ea390fc56a4d3efe76ab88de.jpg')"> 
    </div>
    <p>content after..</p>
</div>

Развернуть фрагмент

1. Я не могу использовать абсолютную позицию с «старым изображением», потому что в моем полном коде намного больше элементов. Этот пример был создан, чтобы проверить проблему и посмотреть, не работает ли она также (чего не происходит).. Я пытался добавить top:0;left:0; в imgbox, но это ничего не изменило.

2. Я подумал, что это будет так, немного изменю свой ответ. Тем временем посмотрите на ответ @caramba, чтобы лучше понять, как работает позиционирование.

3. Я знаю о различиях между относительным и абсолютным позиционированием, и я выбрал последнее для imgbox, потому что это то, что необходимо для его свободного позиционирования.

4. Я только что запустил ваш фрагмент кода, и загружается только верхняя половина старого изображения, как будто вы ограничиваете размер тем, каким будет новое изображение. Почему заполнение 56,25% и ширина всего 640 пикселей? Не каждое изображение имеет формат 16: 9, и оно должно отображать все изображение как для миниатюры, так и для всплывающего окна, так что это не то, что я ищу. Вам также необходимо imgbox.innerHTML=''; сбросить HTML-код imgbox перед добавлением нового изображения, может быть, именно это вызывает мерцание? В моем коде нет мерцания onHoverIn , а onHoverOut также срабатывает только один раз, даже когда я продолжаю перемещать мышь внутри.

Метки: Установка положения во время выполнения