Question

我[想要/想]创建一个讲故事的网站，如：

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

1）你们会在CSS中创建每个对象，还是在Photoshop中逐帧进行？

2）为什么延迟不起作用？（是的，我测试了更高的延迟以及5000）（代码线）

3）如果我将stylesheet.css文件移动到\ misc \ style文件夹，该如何绑定？我试过了：

<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(){ 
	var n = 1;	
	for(i = 1; i < 30; i++){
		changePicture();
	}
	function changePicture(){
		n+=1;
		$('.p').delay(33).css('background-image', 'url("misc/bilder/'+n+'.png")');		
	}	
});

stylesheet.css中

* {
	margin: 0;
	padding: 0;
	border: 0;
	height: 1000%;
}
.p{
	height: 100%;
    width: 100%;
	position:relative;
	padding: 25%;
	background-size:cover;
	background-attachment:fixed;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	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>
	<div class="p"></div>	
<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>

从Code中可以看出，我没有Webdesign经验提前致谢

Answer 1

1）CSS肯定。逐帧不是HTML5。只是一个视频......使用CSS可以控制每个对象，并且可以使用条件以多种方式移动它们，具体取决于设备宽度，其他元素位置，鼠标位置等等。

2）因为jQuery中的css()不是动画依赖。它只是立即应用于被调用的对象。要css()使用delay()，请查看以下答案：Using jQuery delay() with css()

3）您必须删除起始点。检查test.js下index.html文件的地址。对stylesheet.css。

执行相同的操作

Answer 2

$(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);
    }   
  }
});

Jquery延迟和更多

2 个答案: