7 / 7 / 2
Регистрация: 16.11.2011
Сообщений: 251
|
|
|
1
|
Выежджающие блоки на JQuery
22.04.2012, 23:46. Показов 418. Ответов 0
На странице есть ссылка после нажатия на нее выезджают по очереди три блока. При следующем нажатии блоки уезджают. На JavaScript все работает, а как сделать тоже самое используя JQuery?
| Javascript | 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
84
85
86
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#bl1, #bl2, #bl3
{
border: outset 4px black;
width: 500px;
position:absolute;
left: -510px;
}
#bl1 {top:50px;}
#bl2 {top:150px;}
#bl3 {top:250px;}
-->
</style>
<script type="text/javascript">
<!--
dx=0;
flag=0;
flg2= true;
function t(bl)
{
mbl=document.getElementById(bl);
computedStyle = mbl.currentStyle || window.getComputedStyle(mbl, null);
return parseInt(computedStyle.left);
}
function mv(bl,tx)
{
//x=t(bl);
tx+=dx;
document.getElementById('ttt').value=tx;
document.getElementById(bl).style.left=tx+'px';
if ((tx<10)&&(tx>-510)) {window.setTimeout("mv('"+bl+"',"+tx+");",5);}
}
function start()
{
if (flag!=1){strt();}
//flag=false;
}
function strt(){
if (dx!=2) {xx=-510;dx=2;flag=1}else{xx=10;dx=-2;flag=1}
mv('bl1',xx);
window.setTimeout("mv('bl2',"+xx+")",1000);
window.setTimeout("mv('bl3',"+xx+")",2000);
window.setTimeout("flag=0",5050);
//flag=0;
}
// -->
</script>
</head>
<body>
<a href="#" onclick="start();">----------</a>
<input type="text" id="ttt">
<div id="bl1">
text text text text text text text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text text text text
</div>
<div id="bl2">
text text text text text text text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text text text text
</div>
<div id="bl3">
text text text text text text text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text text text text
text text text text text text text text text text text text text
</div>
</body>
</html> |
|
0
|
(
