js анимационные эффекты Collection_jquery анимация
js анимационные эффекты Collection_jquery анимация

в некоторыханимацияНастройка,Мы можем использовать существующий атрибут анимации в CSS, чтобы легко установить эффект анимации.,Например, анимацияанимация,переход переход,Они сочетают в себе немного 2D,3D-трансформация позволяет добиться значительного эффекта анимации.,Но оно включает в себя все более и более сложныеанимация На данный момент нам также необходимо опираться наJavaScriptвыполнить。Здесь мы определяемJavaScriptПрактичная функция для будущих настроек。

Основы анимации

(1) Таймер setTimeout

Настройка анимации заключается в смене ключевых кадров внутри непрерывного интервала, чтобы они временно были непрерывными в поле зрения человеческого глаза. Как добиться этого временного интервала? Реализация временного интервала зависит от API таймера setTimeout, и будущие настройки анимации также будут основаны на этом API.

setTimeout позволяет функции начать выполнение через заданный период времени с двумя параметрами. Первый параметр — это имя выполняемой функции, а второй параметр — числовое значение, указывающее длину интервала:
Использование: setTimeout("функция()",интервал)
Язык кода:javascript
копировать
window.onload=setTimeout("changeNumber()",2000);//Вызов этой функции через 2 секунды
функция изменения Номер()
{
   
var test=document.getElementById("тест");
test.innerHTML="предупреждение!";
}
таймер ClearTimeout

Мы можем очистить таймер так же, как очищаем число с плавающей запятой, используяclearTimeout(variable). Использование: сначала присвойте таймер переменной, а затем используйте эту переменную в качестве параметра ClearTimeout:

Язык кода:javascript
копировать
window.onload=function()
{ 
   
	var timer=setTimeout("changeNumber()",2000);
	clearTimeout(timer);
}
function changeNumber()
{ 
   
	var test=document.getElementById("test");
	test.innerHTML="warning!";
}

Таким образом таймер будет освобожден.

(2) Рекурсивная функция

Теперь, когда у нас есть таймер, мы можем устанавливать анимацию на основе API таймера. Как это анимировать? Нам нужно менять положение цели через определенные промежутки времени, пока мы не достигнем конечной точки. Пока этот интервал достаточно мал, человеческий глаз будет воспринимать его как непрерывную плавную анимацию. Я решил определить функцию moveElement, которая будет менять положение цели через определенные промежутки времени, пока она не достигнет конца:

Язык кода:javascript
копировать
function moveElement(elementId,final_x,final_y,interval)
{ 
   
	if(!document.getElementById) return false;
	if(!document.getElementById(elementId)) return false;
	var elem=document.getElementById(elementId);
	var x=parseInt(elem.style.left);
	var y=parseInt(elem.style.top);
	if(x==final_x&&y==final_y) return true;//граничные условия
	if(x<final_x){ 
   x++;}
	if(x>final_x){ 
   x--;}
	if(y<final_y){ 
   y++;}
	if(y>final_y){ 
   y--;}
	elem.style.left=x+"px";
	elem.style.top=y+"px";
	var repeat="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
	timer=setTimeout(repeat,interval);//Настройка таймера, рекурсивный вызов
}

Эта функция реализуется простым рекурсивным вызовом. Одна проблема, на которую нам нужно обратить внимание, заключается в том, что атрибут elem.style — это встроенный стиль тега elem, а не атрибуты id или class в CSS. Если вы хотите использовать неинициализированный стиль, значение переменной в стиле будет NAN. Итак, если вы хотите использовать значение переменной в стиле, есть два способа: (1) Встроенная инициализация:

Язык кода:javascript
копировать
<p id="test" style="top: 0px;left:0px;" >Hello World!</p>
<script src="test.js"></script>

(2) Инициализация DOM Мы определяем функцию инициализации и используем эту функцию для инициализации атрибута стиля или инициализируем его непосредственно внутри функции moveElement:

Язык кода:javascript
копировать
function positionessage(elementId,first_x,first_y)
{ 
   
	if(!document.getElementById) return false;
	var elem=document.getElementById(elementId);
	elem.style.position="absoluate";
	elem.style.left=first_x+"px";
	elem.style.top=first_y+"px";
}

Улучшите веб-страницы с помощью анимации

Выше мы получили функцию анимации, которая может заставить наши элементы двигаться в любом направлении. Теперь мы используем эту функцию для создания более практичных приложений для улучшения наших веб-страниц. Мы до сих пор смотрим Картинную галереяэтот пример：Картинная галерея Мы хотим, чтобы при наведении курсора мыши на изображение изображение ниже обновлялось, чтобы мы могли иметь эффект предварительного просмотра. Есть простой способ справиться с этим — изменить onclick на onmouseover, чтобы на наведение мыши реагировало.

Язык кода:javascript
копировать
function prepareGallery()
{ 
   
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById) return false;
	if(!document.getElementById("photoGallery")) return false;
	var gallery=document.getElementById("photoGallery");
	var links=gallery.getElementsByTagName("a");
	for(var i=0;i<links.length;i++)
	{ 
   
		links[i].onmouseover=function()
		{ 
   
			return !showPic(this);//Вызов функции showPic
		}
		links[i].onkeypress=links[i].onmouseover;
	}                                                         
}

Однако недостатком этого подхода является то, что реакция не является достаточно плавной.,Потому что загрузка новых изображений неизбежно займет время.,то, что мы хотим, этоБолее быстрые и плавные результаты:

  • Установите длинное изображение, содержащее все изображения по горизонтали.
  • Скрыть большую часть этого длинного изображения
  • При наведении курсора мыши отображается соответствующий фрагмент этого изображения.

(1) Используйте CSS, чтобы скрыть другие части.

Теперь, когда все изображение видно, мы хотим показать только фиксированную область шириной 400 пикселей и высотой 300 пикселей, скрывая при этом остальные области. Это невозможно сделать с помощью JavaScript, но мы можем установить это с помощью свойства CSS overflow: Обработка переполнения блочной модели

масса

описывать

visible

Все переливы видны

hidden

Скрытый, внешняя часть не видна

scroll

Показать полосы прокрутки

auto

если есть больше, чем,Показать полосы прокрутки

(2) Установить анимацию смещения

Теперь мы можем скрыть остальное, но для достижения эффекта просмотра мы должны иметь возможность показывать остальные части. Вы можете установить эффект смещения для изображения, чтобы можно было переходить к другим областям. Как установить смещение Возможно, вы подумаете о свойстве style.backgroundPositionX, но здесь мы используем функцию анимации moveElement, определенную ранее. HTML

Язык кода:javascript
копировать
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Photo Gallery</title>
	<link rel="stylesheet" type="text/css" href="photo gallery.css">
	<script src="photo gallery.js"></script>
</head>
<body>
	<h1>Photo Gallery</h1>
	<ul id="linkList">
		<li><a href="images/1.png" title="Кипчоге1"><img src="images/1.png" width="55" height="45"></a></li>
		<li><a href="images/2.png" title="Кипчоге2"><img src="images/2.png" width="55" height="45"></a></li>
		<li><a href="images/3.png" title="Кипчоге3"><img src="images/3.png" width="55" height="45"></a></li>
		<li><a href="images/4.png" title="Бекеле1"><img src="images/4.png" width="55" height="45"></a></li>
		<li><a href="images/5.png" title="Бекеле2"><img src="images/5.png" width="55" height="45"></a></li>
		<li><a href="images/6.png" title="Бекеле3"><img src="images/6.png" width="55" height="45"></a></li>
	</ul>
	<div id="slidShow">
		<img src="images/test.jpg" alt="Choos a picture" id="preview" />		
	</div>
</body>
</html>

JavaScript：

Язык кода:javascript
копировать
function addLoadEvent(func)
{ 
   
	var oldonload=window.onload;
	if(typeof window.onload!='function')//не привязано
	{ 
   
		window.onload=func;
	}
	else
	{ 
   
		window.onload=function()//добавлена ​​анонимная функция
		{ 
   
			oldonload();
			func();
		}
	}
}
addLoadEvent(prepareSlidshow);
function prepareSlidshow()
{ 
   
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById("linkList")) return false;
	if(!document.getElementsByTagName("preview")) return false;
	var preview=document.getElementById("preview");
	preview.style.position="absolute";
	preview.style.left="0px";
	preview.style.top="0px";
	var list=document.getElementById("linkList");
	var links=list.getElementsByTagName("a");
/* for(var i=0;i<links.length;i++) { links[i].οnmοuseοver=function() { var move=-(i+1)*400; moveElement("preview",move,0,10); } } */
		links[0].onmouseover=function()
		{ 
   
			var move=0;   
			moveElement("preview",move,0,0.01);
		}
		links[1].onmouseover=function()
		{ 
   
			var move=-400;
			moveElement("preview",move,0,0.01);
		}
		links[2].onmouseover=function()
		{ 
   
			var move=-800;
			moveElement("preview",move,0,0.01);
		}
		links[3].onmouseover=function()
		{ 
   
			var move=-1200;
			moveElement("preview",move,0,0.01);
		}
		links[4].onmouseover=function()
		{ 
   
			var move=-1600;
			moveElement("preview",move,0,0.01);
		}
		links[5].onmouseover=function()
		{ 
   
			var move=-2000;
			moveElement("preview",move,0,0.01);
		}
		links[6].onmouseover=function()
		{ 
   
			var move=-2400;
			moveElement("preview",move,0,0.01);
		}
}

function moveElement(elementId,final_x,final_y,interval)
{ 
   
	if(!document.getElementById) return false;
	if(!document.getElementById(elementId)) return false;
	var elem=document.getElementById(elementId);
	var x=parseInt(elem.style.left);
	var y=parseInt(elem.style.top);
	if(x==final_x&&y==final_y) return true;//граничные условия
	if(x<final_x){ 
   x++;}
	if(x>final_x){ 
   x--;}
	if(y<final_y){ 
   y++;}
	if(y>final_y){ 
   y--;}
	elem.style.left=x+"px";
	elem.style.top=y+"px";
	var repeat="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
	timer=setTimeout(repeat,interval);//Настройка таймера, рекурсивный вызов
}

(3) Обработка накопленных событий

В приведенном выше процессе мы проходим по всем гиперссылкам, и когда указатель мыши наводится на изображение, мы устанавливаем смещение анимации moveElement для длинного изображения. Обратите внимание, что мы не можем использовать циклическую обработку, поскольку цикл является одноразовым и не может быть приостановлен ни в каком случае. время. Эффект возможности двигаться! На первый взгляд эффект движения вроде бы достигнут, но вроде есть какие-то проблемы. При подвешивании картинок в обе стороны картинки не двигаются, а вибрируют туда-сюда. В чем проблема? Накопленные события: При наведении мыши на изображение вызывается функция moveElement и выполняется таймер движения. При наведении другого изображения также выполняется второй таймер движения. В это время изображение не может определить, кто его выполняет, и, таким образом, изображение не может определить, кто его выполняет. происходит путаница. Очистить накопленные события Мы хотим добавить что-то внутри функции moveElement. Когда выполняется moveElement, существующий таймер должен быть очищен:

Способ 1: определение глобальных переменных
Язык кода:javascript
копировать
var таймер;//Определяем глобальные переменные
function moveElement(elementId,final_x,final_y,interval)
{ 
   
	if(!document.getElementById) return false;
	if(!document.getElementById(elementId)) return false;
	var elem=document.getElementById(elementId);
	var x=parseInt(elem.style.left);
	var y=parseInt(elem.style.top);
	if(timer) clearTimeout(timer);
	if(x==final_x&&y==final_y) return true;//граничные условия
	if(x<final_x){ 
   x++;}
	if(x>final_x){ 
   x--;}
	if(y<final_y){ 
   y++;}
	if(y>final_y){ 
   y--;}
	elem.style.left=x+"px";
	elem.style.top=y+"px";
	var repeat="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
	timer=setTimeout(repeat,interval);//Настройка таймера, рекурсивный вызов
}
Способ 2. Увеличение значений атрибутов

JavaScriptпозвольте намСоздайте новое свойство: elem.property=value. Мы можем установить таймер атрибута для элемента. Если атрибут существует, очистите его, в противном случае выполните его напрямую:

Язык кода:javascript
копировать
function moveElement(elementId,final_x,final_y,interval)
{ 
   
	if(!document.getElementById) return false;
	if(!document.getElementById(elementId)) return false;
	var elem=document.getElementById(elementId);
	var x=parseInt(elem.style.left);
	var y=parseInt(elem.style.top);
	if(elem.timer) clearTimeout(elem.timer);
	if(x==final_x&&y==final_y) return true;//граничные условия
	if(x<final_x){ 
   x++;}
	if(x>final_x){ 
   x--;}
	if(y<final_y){ 
   y++;}
	if(y>final_y){ 
   y--;}
	elem.style.left=x+"px";
	elem.style.top=y+"px";
	var repeat="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
	elem.timer=setTimeout(repeat,interval);//Настройка таймера, рекурсивный вызов
}

Метод добавления значений атрибутов кажется более безопасным, а использование инкапсулированной функции moveElement весьма осмысленно.

(4)Улучшить тенденцию изменений

Наша функция moveElement каждый раз перемещается на 1 пиксель. Вам кажется, что это слишком монотонно? Теперь я хочу внести в него некоторые изменения, исходя из расстояния от области до цели. Чем дальше расстояние, тем быстрее изменение, а чем ближе изменение, тем медленнее:

Язык кода:javascript
копировать
function moveElement(elementId,final_x,final_y,interval)
{ 
   
	if(!document.getElementById) return false;
	if(!document.getElementById(elementId)) return false;
	var elem=document.getElementById(elementId);
	var x=parseInt(elem.style.left);
	var y=parseInt(elem.style.top);
	if(elem.timer) clearTimeout(elem.timer);
	if(x==final_x&&y==final_y) return true;//граничные условия
	var dis_x,dis_y;
	dis_x=Math.ceil((final_x-x)/10);//Округляем вверх
	x+=dis_x;
	//округляем вниз
	dis_y=Math.ceil((final_y-y)/10);//Округляем вверх
	y+=dis_y;
	elem.style.left=x+"px";
	elem.style.top=y+"px";
	var repeat="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
	elem.timer=setTimeout(repeat,interval);//Настройка таймера, рекурсивный вызов
}

Это будет хороший выбор

(5) Создайте HTML-теги для добавления проверок безопасности.

Предыдущая область слайд-шоу посвящена поддержке JavaScript. Если рассматривается плавное ухудшение, если JavaScript не поддерживается, может ли веб-страница плавно ухудшаться? Но это не так. Когда JavaScript отключен на веб-странице, наша область будет неизменяемой. Такая область будет бесполезна, поскольку ее изображение фиксировано, а это означает, что мы не смогли плавно деградировать, поэтому мы это сделали. Чтобы завершить разделение JavaScript: HTML:

Язык кода:javascript
копировать
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Photo Gallery</title>
	<link rel="stylesheet" type="text/css" href="photo gallery.css">
	<script src="photo gallery.js"></script>
</head>
<body>
	<h1>Photo Gallery</h1>
	<ul id="linkList">
		<li><a href="images/1.png" title="Кипчоге1"><img src="images/1.png" width="55" height="45"></a></li>
		<li><a href="images/2.png" title="Кипчоге2"><img src="images/2.png" width="55" height="45"></a></li>
		<li><a href="images/3.png" title="Кипчоге3"><img src="images/3.png" width="55" height="45"></a></li>
		<li><a href="images/4.png" title="Бекеле1"><img src="images/4.png" width="55" height="45"></a></li>
		<li><a href="images/5.png" title="Бекеле2"><img src="images/5.png" width="55" height="45"></a></li>
		<li><a href="images/6.png" title="Бекеле3"><img src="images/6.png" width="55" height="45"></a></li>
	</ul>

</body>
</html>

JavaScript：

Язык кода:javascript
копировать
function prepareSlidshow()
{ 
   
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById("linkList")) return false;
	if(!document.getElementsByTagName("preview")) return false;
	var slideShow=document.createElement("div");
	slideShow.setAttribute("id","slideShow");
	var preview=document.createElement("img");
	preview.setAttribute("src","images/test.jpg");
	preview.setAttribute("alt","Choose a picture");
	preview.setAttribute("id","preview");
	slideShow.appendChild(preview);
	var list=document.getElementById("linkList");
	insertAfter(slideShow,list);
	var preview=document.getElementById("preview");
	preview.style.position="absolute";
	preview.style.left="0px";
	preview.style.top="0px";
	
	var links=list.getElementsByTagName("a");
/* for(var i=0;i<links.length;i++) { links[i].οnmοuseοver=function() { var move=-(i+1)*400; moveElement("preview",move,0,10); } } */
		links[0].onmouseover=function()
		{ 
   
			var move=0;   
			moveElement("preview",move,0,15);
		}
		links[1].onmouseover=function()
		{ 
   
			var move=-400;
			moveElement("preview",move,0,15);
		}
		links[2].onmouseover=function()
		{ 
   
			var move=-800;
			moveElement("preview",move,0,15);
		}
		links[3].onmouseover=function()
		{ 
   
			var move=-1200;
			moveElement("preview",move,0,15);
		}
		links[4].onmouseover=function()
		{ 
   
			var move=-1600;
			moveElement("preview",move,0,15);
		}
		links[5].onmouseover=function()
		{ 
   
			var move=-2000;
			moveElement("preview",move,0,15);
		}

}

Того же эффекта можно добиться:

Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/184857.html Исходная ссылка: https://javaforall.cn

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native｜Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose
©