Самые необходимые скрипты
Вывод текущей даты:
<script type="text/jаvascript">
var d = new Date(); var month=new Array("января","февраля","марта","апреля","мая","июня", "июля","августа","сентября","октября","ноября","декабря"); document.write(d.getDate()+ " " + month[d.getMonth()] + " " + d.getFullYear() + " г.");
</script>
Самые необходимые скрипты:
<script>
/* 1- неправильная обработка ссылки - */ $( document ).ready(function() { $( 'a[href="#"]' ).click( function(e) { e.preventDefault(); } ); });
/* 2.1 Для фиксации меню при скроле вниз */
$(document).ready(function(){ var blockMenuID = '#menunav'; $(window).scroll(function() { var top = $(document).scrollTop();
if (top >= 5) { $(blockMenuID).addClass('nav-down');
} else { $(blockMenuID).removeClass('nav-down'); } }); });
/* 2.2 - добавление стиля при прокрутке вниз и забрать при движ. вверх */
window.addEventListener('scroll', function(e) { const oldScroll = this.oldScroll || 0, newScroll = this.scrollY, isScrollDown = newScroll > oldScroll;
document.querySelector('.logotip').classList.toggle('logo-down', isScrollDown); this.oldScroll = newScroll; });
/* 2.3 - размещеный в теле html - делает редирект на главную страницу*/
<script type="text/jаvascript">location.replace("/")</script>
/* 3- плавная прокрутка вверх - */(function($) { $(function() { $('#up').click(function() { $('html, body').animate({scrollTop: 0},700); return false; }) }) })(jQuery)
/* 4 - UP fiksacia */$(window).scroll(function(){ if ($(window).scrollTop() > 400) { $('.bg-up').addClass('actup'); } else { $('.bg-up').removeClass('actup'); } });
/* 5 -плавная прокрутка к месту */ $(document).ready(function(){ $('.go_to').click( function(){ var scroll_el = $(this).attr('href'); if ($(scroll_el).length != 0) { $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 900); } return false; }); });
/* 6 - При клике на класс ".one" к классу ".two" добавится класс ".three" */
document.querySelector('.one').addEventListener('click', _=> {document.querySelector('.two').classList.toggle('three');})
// или
document.querySelector('.one').addEventListener('click', () => {document.querySelector('.two').classList.toggle('three'); });
/* 7 - анимация полета в корзину */ $('.product-order').on('click', function(){ var that = $(this).closest('.product-item').find('img'); var bascket = $(".bascket"); var w = that.width(); that.clone() .css({'width' : w, 'position' : 'absolute', 'z-index' : '9999', top: that.offset().top, left:that.offset().left}) .appendTo("body") .animate({opacity: 0.05, left: bascket.offset()['left'], top: bascket.offset()['top'], width: 20}, 1000, function() { $(this).remove(); }); });
/* 8 - при hover сменить клас */ $(".bay-1").hover(function () { $('.bay-2').toggleClass("hovered"); });
/* 9 - удаляем ЧЕРЕЗ 4 сек. клас .message у блока div*/
setTimeout(function() {
var article = document.querySelector("div.message");
article.classList.remove("message");
}, 4000);
</script>
Если нужно додать и забрать клас при повторном клике - смотреть
FAQ по примерам выше:
2.1. Фиксация меню при скроле.
к блоку с айди #menunav при прокрутке вних добавляется класс .nav-down и уберается в самом вверху
изначально:
<header id="menunav" class="topmenu">----</header>
после прокрутки:
<header id="menunav" class="topmenu nav-down">----</header>
* делаем тоже на чистом JS - смотреть
2.2 Смена стиля при прокрутке вниз и удаление при прокрутке вверх.
Блок с класом - .logotip при прокрутке вниз будет получать клас .logo-down
изначально:
<header class="logotip">----</header>
после прокрутки:
<header class="logotip logo-down">----</header>
5. Плавная прокрутка к якорю: ссылка которая ведет на якорь должна иметь клас "go_to"
5.1 Можно все сделать на чистом JS:
const anchors = [].slice.call(document.querySelectorAll('.go_to')),
animationTime = 300,
framesCount = 20;
anchors.forEach(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault();
let coordY = document.querySelector(item.getAttribute('href')).getBoundingClientRect().top + window.pageYOffset;
let scroller = setInterval(function() {
let scrollBy = coordY / framesCount;
if(scrollBy > window.pageYOffset - coordY && window.innerHeight + window.pageYOffset < document.body.offsetHeight) {
window.scrollBy(0, scrollBy);
} else {
window.scrollTo(0, coordY);
clearInterval(scroller);
}
}, animationTime / framesCount);
});
});
8 - при hover на одном блоке сменить клас другого блока
Если навести курсор на .bay-1 то то к блоку с класом .bay-2 добавится класс - .hovered