2016-08-08 9 views
1

я [есть/хочу], чтобы сделать Повествование сайт как:Jquery задержки и более

http://www.bizbrain.org/coffee/

1) ли вы, ребята, создающих каждый объект в CSS или вы бы сделать это кадр за кадром в Photoshop?

2) Почему работа с задержкой не работает? (Да я испытал высшую задержку Aswell как 5000) (код ниже линия)

3) Как я связать stylesheet.css файл, если я переместить его в \ разностороннего \ стиль папку? Я пробовал:

<link rel="stylesheet" href="\misc\style\stylesheet.css"> 
 
<link rel="stylesheet" href=".\misc\style\stylesheet.css"> 
 
<link rel="stylesheet" href=".misc\style\stylesheet.css"> 
 

 
<link rel="stylesheet" href="/misc/style/stylesheet.css"> 
 
<link rel="stylesheet" href="./misc/style/stylesheet.css"> 
 
<link rel="stylesheet" href=".misc/style/stylesheet.css">

_________________________________________________________________________________ ^ линии

test.js

$(document).ready(function(){ 
 
\t var n = 1; \t 
 
\t for(i = 1; i < 30; i++){ 
 
\t \t changePicture(); 
 
\t } 
 
\t function changePicture(){ 
 
\t \t n+=1; 
 
\t \t $('.p').delay(33).css('background-image', 'url("misc/bilder/'+n+'.png")'); \t \t 
 
\t } \t 
 
});

stylesheet.css

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t height: 1000%; 
 
} 
 
.p{ 
 
\t height: 100%; 
 
    width: 100%; 
 
\t position:relative; 
 
\t padding: 25%; 
 
\t background-size:cover; 
 
\t background-attachment:fixed; 
 
\t -webkit-transition: all 0.2s ease; 
 
\t -moz-transition: all 0.2s ease; 
 
\t transition: all 0.2s ease; 
 
\t background-image: url("misc/bilder/1.png");  
 
}

index.html

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="\misc\style\stylesheet.css"> 
 
<title>Evolution des Menschen</title> 
 
</head> 
 
<body> 
 
\t <div class="p"></div> \t 
 
<script type="text/javascript" src="misc/js/jquery-3.1.0.min.js"></script> 
 
<script type="text/javascript" src="misc/js/test.js"></script> 
 
</body> 
 
</html>

Как вы можете сказать, из Кодекса У меня нет WebDesign Почувствуйте Заранее спасибо

ответ

1
$(document).ready(function(){ 
    var delay = 33; 
    changePicture(1, 30, 'misc/bilder', '.png') 

    function changePicture(next, last, path, extension){ 
    if (next <= last){ 
     setTimeout(function(){ 
     $('.p').css('background-image', 'url("' + path + '/' + next + extension + '")'); 
     next += 1; 
     changePicture(next, last, path, extension) 
     }, delay); 
    } 
    } 
}); 
1

1) CSS точно. Кадр за кадром не HTML5. Это просто видео ... С CSS у вас есть контроль над каждым объектом, и вы можете перемещать их несколькими способами с условными выражениями в зависимости от ширины устройства, других позиций элементов, позиций мыши и любого другого.

2) Потому что css() в jQuery не анимированный зависимый. Он просто мгновенно применяется к вызываемому объекту. До css() работа с delay() проверить этот ответ: Using jQuery delay() with css()

3) Вы должны удалить стартовую точку. Проверьте адрес своего test.js файла под своим index.html. Сделайте то же самое с вашим stylesheet.css.

+1

1) Вы бы рекомендовали программу, такую ​​как photoshop cs6, для создания объектов css? (thats первый фотошоп, где вы можете экспортировать вещи как css, я думаю) 3) Я попробовал все мысли, которые я написал, вы могли бы написать точное, что я должен написать? –

+0

Нет ничего подобного 'css objects'. Существуют HTML-элементы и свойства CSS.Например, веб-сайт, который вы показали, представляет собой простые png-изображения, заданные в качестве фона, используя CSS для HTML-элементов ('div',' span' и т. Д.). Если вы ничего не знаете о проектировании веб-сайтов, вы должны начать с изучения немного о HTML, прежде чем выполнять такую ​​сложную работу, как эта. Если вы этого не сделаете, вы столкнетесь с множеством проблем, которые вы не сможете решить. И что еще хуже, теперь вы знаете, что, черт возьми, вы делаете, копируя и вставляя код из учебников и веб-сайтов вокруг Google, например, вашу проблему с 'stylesheet.css'. –

+1

2) shouldnt, что работает тогда? он ждет письменных 3 сек. но прыгает на последний pic-мгновенный после этого, а также http://pastebin.com/w120KXSs –

Смежные вопросы