Я был немного взволнован, когда впервые опубликовал блог. Я сейчас в Тяньцзине. Я надеюсь работать в фронтальной отрасли в будущем, и я не смогу учиться в течение длительного времени. Чтобы записать мой учебный процесс и успехи, я, конечно, консолидация. Вещи, которые я пишу, может быть не таким высоким, как большой бык, но это просто какой -то основной контент. Конечно, я также собираю несколько хороших статей, которые, я думаю, хорошие (на самом деле, я могу их понять больше всего ...). Я считаю, что в будущем я могу написать что-то высокое классовое. ну давай же!
Я говорю немного чушь, говорю о серьезных вопросах. Несколько дней назад я смотрел учебное видео о образовании Танчжоу. Учитель использовал jQuery для достижения эффекта увеличительного стекла (учитель сказал, что это слишком медленно, и он прыгал вокруг и смотрел его). Поскольку я плохо изучал jQuery, но базовый код все еще понятен, я хочу практиковать с JS, который я сейчас изучаю, и, наконец, успешно достиг этого эффекта.
Идея: сначала дайте блоку движения и шкуру Bimg Block. Когда мышь перемещается в коробку, отображается блок перемещения и блок BIMG, и получено текущее положение мыши. Затем, после расчета, подходящее значение для блока перемещения и блока BIMG дается для достижения увеличивающего стекла (расчет положения блока перемещения и блока BIMG подробно описан позже)
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> MAGLITION GLASS </title> <Link href = "css/bigimg.css" rel = "stylesship"/> <script src = "js/bigimg.js" Onload = "bigimg ()"> <div id = "box"> <img src = "Images/simg.jpg"> <div id = "move"> </div> <div id = "bimg"> <id id = "b_bimg"> src = "Image/bimg.jpg"> </div> </div> </worbe> </html> </html> </html> </html> </html> </html> </html>
Стиль CSS:
*{маржа: 0px; Padding: 0px;}#box {width: 430px; Высота: 430px; Полевая: 100px; Мяботая маржа: 17%; Положение: относительное; // Использовать здесь относительное позиционирование, чтобы другие элементы могли полагаться на этот элемент в позицию} #move {founal-image: url (../ Images/move.png); Ширина: 220px; Высота: 220px; позиция: абсолютно; слева: 0px; Верх: 0px; Дисплей: Нет; // Позвольте этому скрыть сначала и использовать JS, чтобы отобразить его} #Bimg {ширина: 430px; Высота: 430px; переполнение: скрыто; позиция: абсолютно; Верх: 0px; Слева: 450px; Дисплей: Нет; // Позвольте этому скрыть сначала и использовать JS, чтобы отобразить его} #Bimg IMG {ширина: 800PX; Высота: 800px; позиция: абсолютно; Верх: 0px; слева: 0px;}JavaScript:
function bigimg () {var bbox = document.getElementById ("box"); var bmove = document.getElementById ("Move"); var bbimg = document.getElementbyId ("bimg"); var b_bimg = document.getElementById ("b_bimg"); bbox.onmouseover = function () {// переместить мышь в поле для отображения больших изображений и выберите поля bbimg.style.display = "block"; bmove.style.display = "block"; } bbox.onmouseout = function () {// mouseMove не отображает большие изображения и флажки, когда коробка отображается от мыши bbimg.style.display = "none"; bmove.style.display = "none"; } bbox.onmouseMove = function (e) {// Получить положение мыши var x = e.clientx; // положение мыши относительно видоубийта var y = e.clienty; var T = bbox.OffSetTop; // Положение блока относительно видоубийта var l = bbox.offsetleft; var _left = x - l - bmove.offsetwidth/2; // Рассчитать положение перемещения var _top = y - t -bmove.offsetheight/2; if (_top <= 0) // Сдвиньте в верхнюю часть Box_top = 0; else if (_top> = bbox.offsetheight-bmove.offsetheight) // скользить в нижней части Box_top = bbox.offsetheight-bmove.offsetheight; if (_left <= 0) // Сдвиньте к самому левому из Box_left = 0; else if (_left> = bbox.offsetwidth-bmove.offsetwidth) // Слайд до самого правого из Box_left = bbox.offsetWidth-bmove.OffSetWidth; bmove.style.top = _top + "px"; // Установить положение перемещения bmove.style.left = _left + "px"; var w = _left/(bbox.offsetwidth-bmove.offsetwidth); // Рассчитайте коэффициент движения var h = _top/(bbox.offsetheight-bmove.offsetheight); var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // Вычислять положение большого изображения var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w; b_bimg.style.top = -b_bimg_top + "px"; // Установить информацию о местоположении большого изображения b_bimg.style.left = -b_bimg_left + "px"; }}Изображение воспроизведения:
1. Расчет блока перемещения
Черная стрелка:
var x = e.clientx; // положение мыши относительно видоубийта var y = e.clienty;
Красная стрелка:
var T = bbox.OffSettop; // Положение блока относительно видоубийта var l = bbox.offsetleft;
Оранжевые стрелы:
var _left = x - l - bmove.offsetwidth/2; // Рассчитайте положение перемещения var _top = y - t -bmove.offsetheight/2;
2. Расчет блока BIMG
Используйте шкалу блока перемещения в подвижном диапазоне, чтобы установить положение большого изображения
Диапазон движения блока движения:
bbox.offsetwidth-bmove.offsetwidth
Текущие координаты блока перемещения учетной записи для подвижного диапазона:
var w = _left/(bbox.offsetwidth-bmove.offsetwidth); // Рассчитайте коэффициент движения var h = _top/(bbox.offsetheight-bmove.offsetheight);
Диапазон движения Бимга:
b_bimg.offsetheight-bbimg.offsetheight
Местоположение BIMG:
var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h; // Вычислять положение большого изображения var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w;
Приведенный выше простой пример использования JS для достижения эффекта увеличительного стекла - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.