Тема: Мій JavaScript. Вивчення напрямку
Привіт форумчанам.
Заведу собі тут теж місце, планую вивчати javascript. Звичайно будуть питання, можливо добрі люди підкажуть, як краще реалізовувати проекти.
Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → JavaScript, TypeScript, ECMAScript → Мій JavaScript. Вивчення напрямку
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися
Привіт форумчанам.
Заведу собі тут теж місце, планую вивчати javascript. Звичайно будуть питання, можливо добрі люди підкажуть, як краще реалізовувати проекти.
Перше ж питання виложу на розгляд студії
Розробляю сторінку http://best-team.biz/
Окремо сторінка під реалізацію задумки http://не-дійсний-домен/pages/change_bckground.html
Виконав ось такий дизайнерський хід, де автоматично змінюється фон слоганів
Код скрипта, що я накрапив сам має вигляд, Може хто скаже наскільки код толково реалізований, чи можна краще, чи навпаки є баги в кодові?
Наразі те що я написав свою функцію виконує, але раптом можна краще
<script>
var show=1;
var timeout;
$("#info_01").css( "background-color", "#FF69B4");
var ChangeBcgColor = function(index_show)
{
if (index_show=='1'){
$("#info_05").css( "background-color", "transparent");
$("#info_01").css( "background-color", "#FF69B4");
}
if (index_show=='2'){
$("#info_01").css( "background-color", "transparent");
$("#info_02").css( "background-color", "#FF8C00");
}
if (index_show=='3'){
$("#info_02").css( "background-color", "transparent");
$("#info_03").css( "background-color", "#FFFF00");
}
if (index_show=='4'){
$("#info_03").css( "background-color", "transparent");
$("#info_04").css( "background-color", "#7CFC00");
}
if (index_show=='5'){
$("#info_04").css( "background-color", "transparent");
$("#info_05").css( "background-color", "#1E90FF");
show=0;
}
show=show+1;
}
timeout = setInterval("ChangeBcgColor(show)",4000);
</script>
ну для початку
для чого timeout, він ж тут ніде не юзається, тільки оголошення, можливо в іншій частині коду, за допомогою неї інтервал зупиняється
а взагалі краще так писати
setInterval(function(){
ChangeBcgColor(show);
},4000);
передаєте int а перевіряєте як string
if(index_show =='1')// трохи погано
if(index_show == 1)// цей
if(index_show === 1)//або цей по вибору
а якщо просто викликати ChangeBcgColor() - це також можливо, тоді index_show буде мати тип "undefined", потрібно робити перевірку вхідних даних на тип, ну як кажуть "захист від дурака" типу:
if(typeof index_show =="undefined"){
index_show = 1;// наприклад
}
ну і
show = show+1 //is the
show++; // same
і мені не дуже подобається js обгорнутий в HTML код, якось воно не гарно дивиться, краще все робити в окремому файлі і потім його підключити в сторінку.
Тоді буде можливість підключати один і той самий код на різні сторінки не копіюючи його.
і мені не дуже подобається js обгорнутий в HTML код, якось воно не гарно дивиться, краще все робити в окремому файлі і потім його підключити в сторінку.
Тоді буде можливість підключати один і той самий код на різні сторінки не копіюючи його.
дякую, я знаю що воно дещо не правильно все в одному файлику, я пізніше рознесу,- зараз все разом щоб, швидше відлагоджувати було.
Все інше підкоректував
<script>
var show=1;
$("#info_01").css( "background-color", "#FF69B4");
var ChangeBcgColor = function(index_show)
{
if(typeof index_show =="undefined"){
index_show = 1;}
if (index_show==1){
$("#info_05").css( "background-color", "transparent");
$("#info_01").css( "background-color", "#FF69B4");
}
if (index_show==2){
$("#info_01").css( "background-color", "transparent");
$("#info_02").css( "background-color", "#FF8C00");
}
if (index_show==3){
$("#info_02").css( "background-color", "transparent");
$("#info_03").css( "background-color", "#FFFF00");
}
if (index_show==4){
$("#info_03").css( "background-color", "transparent");
$("#info_04").css( "background-color", "#7CFC00");
}
if (index_show==5){
$("#info_04").css( "background-color", "transparent");
$("#info_05").css( "background-color", "#1E90FF");
show=0;
}
show++;;
}
setInterval(function(){
ChangeBcgColor(show);
},4000);;
</script>
Все інше підкоректував
Ще одне. Варто це все обгорнути в
window.onload= function(){
// TODO here
}
або
$(document).ready(function(){
// TODO here
});
для того щоб почати працювати із DOM дійсно тоді коли він весь загрузився, бо у вашому випадку не ясно, коли скрипт підгружається, чи в кінці сторінки чи на початку.
1. Всі стилі краще робити класами.
2. Краще нумерувати з 0, тоді не доведеться купу ±1 ставити.
3. DRY, DRY і ще раз DRY!
Ось мій варіант.
ну то ти напевно народився в родині хакерів
все змінив,- розроблено стильно
добре буду виконувати твої рекомендації, like learn learn and learn again, not dry dry dry
чи можливо try try try
Хотів ще кілька порад дати, але панібратство якось відбиває бажання допомагати. Так що, пане, іншим разом щось, може, вам і підкажу.
Хотів ще кілька порад дати, але панібратство якось відбиває бажання допомагати. Так що, пане, іншим разом щось, може, вам і підкажу.
Та й на цьому дякую, що коли-небудь щось підкажеш, я ж розумію щоб добре писати коди потрібно навчатися самому. Я так собі планую за певний період сам освою кодування.
Реалізував вертикальне зміщення заднього фону сайту, в мене зміщення працює.
http://не-дійсний-домен/pages/3d_site_vertical_02.html
Можливо будуть рекомендації побажання
jQuery код, я реалізував так:
<script>
$(document).ready(function(){
$( document ).mousemove(function( event )
{
var Height_Docum = $( document ).height();
var PageCoordsY = event.pageY;
var hscrll=document.body.scrollTop;
var New_position_divers = Math.round(400 - (0.12*hscrll));
var New_position_fishs_01_in = Math.round(1100 - (0.25*hscrll));
var New_position_fishs_02_in = Math.round(1350 - (0.3*hscrll));
var New_position_fishs_03_in = Math.round(1900 - (0.15*hscrll));
var New_position_alien_tube_in = Math.round(2400 - (0.1*hscrll));
$( ".msg_01" ).text( "Висота документа = " + Height_Docum );
$( ".msg_02" ).text( "Висота курсора Y = " + PageCoordsY );
$( ".msg_03" ).text( "Прокрутка Y = " + hscrll );
$( ".divers" ).css( "top",New_position_divers);
$( ".fishs_01_in" ).css( "top",New_position_fishs_01_in);
$( ".fishs_02_in" ).css( "top",New_position_fishs_02_in);
$( ".fishs_03_in" ).css( "top",New_position_fishs_03_in);
$( ".alien_tube_in" ).css( "top",New_position_alien_tube_in);
});
});
</script>
не працює зміщення в мене.
Один глюк, коли прокручую мишкою сторінку, висота курсора по Y не міняється. На це треба звернути увагу. Ця висота міняється тільки тоді коли рухати мишкою.
не працює зміщення в мене.
Один глюк, коли прокручую мишкою сторінку, висота курсора по Y не міняється. На це треба звернути увагу. Ця висота міняється тільки тоді коли рухати мишкою.
Н-да, получивсь упс, я тестував лише на Google Chrome. А на опері і firefox справді не працює, а якщо і працює то з тормозами
напевно для них потрібно буде дописувати якісь буковки
Да ладно... якщо навіть так не толково написаний, це перші роботи, а в гугл хром задумка в мене працює, так що не так вже всебезнадійно.
Але можу заново написати скрипт з урахуванням роботи скрипта в різних браузерах.
А алгоритмом роботи скрипта хоча б правильний? Чи теж по іншому реалізується вертикальне зміщення заднього фону.
Зараз алгоритм вирішив реалізувати таким чином.
1. Кожен шар, що по-різному рухається це - div position:absolute з z-index(1....4,скільки рухомих шарів)
2. Визначаю наскільки веб-глядач прокрутив сторінку scrollTop
3. Призначаю нові координати для div, через формулу залежно від того наскільки хочу щоб прокручувався задній фон
Все ніби все просто
koala можливо хоча б не кодом, так словами підкажеш на що потрібно звернути увагу. Звичайно при наявності вільного часу, я не поспішаю, є що поки що вчити.
Чергова тема для розгляду, не знаю як цей хід називається нехай "боковий індикатор проктутки сторінки".
Правда ще попередню тему до кінця не розібрав, але при нагоді сподіваюсь закінчу.
Є чотири сайти
1. http://www.oneiota.com/espl
2. http://zurb.com/manifesto
3. http://www.evanshalshaw.com/bondcars/
4. http://flipp.ca/
Можливо хто знає, який вже оптимізований алгоритм виконання такого ефекту ?
Я то розпочну колесо видумувати . Правда я в любому випадку проексперементую, можливо що цікаве вийде.
Такий функціонал називається scrollspy і є досить багато плагінів, які його реалізовують.
Я заради інтересу зробив такий, але все це з використанням технологій, які я зараз використовую на фронтенді (CoffeeScript замість JS та SCSS замість CSS). Але, можливо, все одно буде корисним, тим більше, що на CodePen можна побачити і скомпільований код (іконка ока у відповідному вікні) -
http://codepen.io/anon/pen/yacFh
Перший паровоз, сам знаю що тяжкий,
http://не-дійсний-домен/pages/article_page_list.html
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися