😎 » DARYA DLE » Скрипты » Самые необходимые скрипты
1 143 0  

Самые необходимые скрипты

Вывод текущей даты:

<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>

feel * делаем тоже на чистом 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




Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023