-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtutorial.html
83 lines (70 loc) · 2.44 KB
/
tutorial.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta charset="utf-8" />
<title>Tutorial</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<img class="tut_img" id="img_1" src="imgs/tutorial/1.jpg"></img>
<img class="tut_img" id="img_2" src="imgs/tutorial/2.jpg"></img>
<img class="tut_img" id="img_3" src="imgs/tutorial/3.jpg"></img>
<audio id="click" src="music/but.mp3" preload></audio>
<a class="button2" id="btn_2" target="_self" onclick="href_to('index.html')">Button back</a>
<a class="button5" id="to_menu" target="_self" onclick="href_to('index.html')">Button to menu</a>
<a class="button4" id="next_slide" target="_self" onclick="next_slide()">Button next</a>
</head>
<body scroll="no">
<script>
var this_slide;
var time;
function href_to( arg )
{
var aud = document.getElementById('click');
if( localStorage["sound"] == "1" )
aud.play();
var s = 'document.location.href=' + "'" + arg + "'";
setInterval(s, 150 );
}
function loaded()
{
}
$(function(){
this_slide = 1;
document.getElementById('to_menu').style.visibility='hidden';
$("#to_menu").animate({opacity: "0"},1);
time = 1;
$("#img_1").animate({left: "0%", width: "100%"},time);
$("#img_2").animate({left: "100%", width: "100%"},time);
$("#img_3").animate({left: "100%", width: "100%"},time);
});
function next_slide()
{
time = 600;
switch( this_slide)
{
case 1:
$("#img_1").animate({left: "-100%"},time);
$("#img_2").animate({left: "0%"},time);
break;
case 2:
$("#img_2").animate({left: "-100%"},time);
$("#img_3").animate({left: "0%"},time);
break;
case 3:
$("#img_3").animate({left: "-100%"},time);
$("#to_menu").animate({opacity: "1"},time*1.5);
$("#btn_2").animate({opacity: "0"},time);
$("#next_slide").animate({opacity: "0"},time);
//document.getElementById('btn_2').style.visibility='hidden';
//document.getElementById('next_slide').style.visibility='hidden';
document.getElementById('to_menu').style.visibility='visible';
break;
}
this_slide++;
}
</script>
</body>
</html>