Как загрузить html-страницы со слайдами
У меня на сайте три страницы. index.html, services.html и company.html. Что мне нужно, так это когда пользователь нажимает ссылку служб, тогда страница загружается с левой или правой стороны, а не загружается как обычно. Я не знаю точно, но это возможно с некоторыми элементами JQuery, такими как data-transition = "left", data-transition = "base", data-name = "services". Есть ли плагин для загрузки страниц слева или справа. Мне это нужно, пожалуйста, помогите мне.
Вопросы, требующие от нас порекомендовать или найти книгу, инструмент, библиотеку программного обеспечения, учебное пособие или другой внешний ресурс, не относятся к теме Stack Overflow, поскольку они, как правило, привлекают самоуверенные ответы и спам. Вместо этого опишите проблему и то, что было сделано на данный момент для ее решения.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Невозможно "загрузить" страницу слева направо, но вы можете сделать следующее:
На странице ваших услуг
создайте "div-обертку" вокруг содержимого вашей страницы, и
смещение содержимого внутри div-оболочки за крайний правый угол страницы, затем
используйте jQuery / javascript при загрузке страницы (т.е. внутри функции
$(document).ready(), чтобы вернуть содержимое в нормальное положение.
Итак, что-то вроде этого (непроверено):
<body>
<div id = "wrapper">
<div id = "inner-wrap">
//page content goes here
//Actually, I might create an inner div here and off-set/animate that one...
</div>
</div>
</body>
CSS:
#inner-wrap{position:relative;margin-left:100vw;}
jQuery:
$(document).ready(function(
//use jQuery .animate() method to slide the marginLeft param back to 0.
){});
Обратите внимание, что метод анимации jQuery не использует margin-left - скорее, он использует marginLeft. Как это.
Пример:
Анимация marginLeft с помощью jQuery
Обновлять:
Вы можете использовать ту же идею, что была предложена выше, но вам нужен только один файл (например, index.html) для всего веб-сайта, а «страницы» - это просто DIV, и вы можете использовать jQuery / javascript для «смены страниц».
Например:
<body>
<div id = "wrapper">
<div id = "page1" class = "pagex">
//page ONE content goes here
</div><!-- .pagex -->
<div id = "page2" class = "pagex">
//page TWO content goes here
</div><!-- .pagex -->
<div id = "page3" class = "pagex">
//page THREE content goes here
</div><!-- .pagex -->
</div>
</body>
CSS:
#wrapper{position:relative;}
.pagex{position:absolute;top:0;left:100vw;}
Понятия, которые необходимо понять:
а) z-index - позволяет размещать один div поверх другого
б) position:absolute - удаляет div из потока HTML и позволяет размещать его в любом месте экрана, даже поверх других div.
Смотрите обновление моего ответа. Что касается того, чтобы этот подход работал с бутстрапом, вы можете поэкспериментировать с ним на МИНИМАЛЬНОМ ТЕСТОВОЙ САЙТЕ. Но подход из моего ОБНОВЛЕНИЯ (добавленного к ответу) будет работать.
ОБРАТИТЕ ВНИМАНИЕ, что вам нужно много экспериментировать с очень простыми примерами из вышеперечисленного. НЕ пытайтесь просто реализовать полное решение в своем полном проекте - вы потратите много, много, много ненужных часов. ИДТИ ПРОСТО, сначала разберись, а затем реализовывай.
Пожалуйста, проверьте эту ссылку. barbajs.org/demos.html. это то же самое, что я хочу, но когда я пытаюсь с локального хоста, он не работает
Извините, я бы хотел помочь, но не могу тратить время. Используйте информацию, которую я дал вам выше, чтобы решить эту проблему. Вы видели этот учебник? Возможно, у вас есть, но если нет, то ОЧЕНЬ СТОИТ потратить 30 минут на то, чтобы пройти обучение 2 или 3 раза. В противном случае я предлагаю вам передать эту работу субподрядчику и поучиться у подрядчика. Сайт, который вы пытаетесь создать, очень сложный, и похоже, что вам может быть сложно с ним. Лучше отдать субподряд и потерять прибыль, чем потерпеть неудачу и потерять свою репутацию.
Большое спасибо за вашу помощь и предложение. barbajs.org/demos.html, сейчас работает. Я внес некоторые изменения в сценарий. Тогда это работает. Я буду использовать это для своего проекта.
Рад слышать хороший отчет - поздравляем! Пожалуйста, не забудьте проголосовать за и при необходимости выбрать правильный ответ.
Добро пожаловать! Stack Overflow - это не сервис для написания кода. Мы всегда рады помочь и поддержать новых программистов, но сначала нужно помочь себе. Ожидается, что вы попытаетесь написать код самостоятельно. Пожалуйста, прочтите пример Как создать минимальную, полную и поддающуюся проверке.