-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
51 lines (48 loc) · 2.11 KB
/
sample.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jsTyper - Pure Javascript Typing Slider</title>
<style type="text/css">
body {background-color:#eee;}
a {color:#00e;}
ul {list-style-type:none; height:20px; padding:3px 10px;}
.wrapper {width:510px; margin:0 auto;}
#container {padding-top:100px;}
#intro {font-size:24px; font-weight:bold; text-align:center; letter-spacing:8px;}
#messages {border:1px solid grey; background-color:white;}
#about {margin-top:20px; font:10px tahoma; line-height:1.6; color:#555; text-align:center;}
#about a {color:#555; text-decoration:none; border-bottom:1px dotted #555;}
</style>
<script type="text/javascript" src="jstyper.js"></script>
</head>
<body>
<div id="container">
<div class="wrapper">
<ul id="intro" style="display:none; font:bold 20px;">
<li>jsTyper</li>
</ul>
<ul id="messages" style="display:none;">
<li>jsTyper is a pure JavaScript utility to create typing text effect over a list of items.</li>
<li>It would be useful for text advertising, announcement or headline news.</li>
<li>jsTyper is a good replacement for obsolete HTML "marquee".</li>
<li><a href="">It also supports XHTML sildes like this.</a></li>
<li>There are cool options to set the behaviour of the typer.</li>
<li>If move your mouse cursor over the slider, it will pause!</li>
</ul>
</div>
<div id="about" class="wrapper" style="display:none">
<div><strong>jsTyper</strong> v1.0</div>
<div>© 2013 <a href="http://mohsenkhahani.ir/" target="_blank" id="mkh">Mohsen Khahani</a></div>
</div>
</div>
</body>
<script type="text/javascript">
new jsTyper('intro', {slideDelay:1000, typeDelay:400, loop:false});
setTimeout( function () {
new jsTyper('messages', {slideDelay:3000, typeDelay:40});
}, 5000);
setTimeout( function () {
document.getElementById('about').style.display = '';
}, 5000);
</script>
</html>