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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
| <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>RAMOS</title>
<link href="css/ramos.css" rel="stylesheet" type="text/css" />
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<!--début du plugin sliders -->
<div id="wrapper">
<a href="http://dev7studios.com" id="dev7link">dev7studios</a>
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="img/ramos2.jpg" width="618" height="246" alt="photo-ramos" /><a href="http://dev7studios.com"><img src="img/imgplugin3.jpg" width="618" height="246" alt="" title="This is an example of a caption" /></a>
<img src="img/imgplugin2.jpg" width="618" height="246" alt="">
<img src="img/imgplugin4.jpg" width="618" height="246" alt="">
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<!--fin du plugin sliders -->
<div class="clear"></div>
<div id="menu">
<ul id="nav">
<li id="selected"><a href="index.html">Accueil</a></li>
<li><a href="news.html">News</a></li>
<li><a href="bibliographie.html">Bibliographie</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="navigation-block">
<ul id="sliding-navigation">
<li class="sliding-element"><a href="#">Accueil</a></li>
<li class="sliding-element"><a href="news.html">News</a></li>
<li class="sliding-element"><a href="bibliographie.html">Bibliographie</a></li>
<li class="sliding-element"><a href="photos.html">Photos</a></li>
<li class="sliding-element"><a href="videos.html">Videos</a></li>
<li class="sliding-element"><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="col-m">
<h2>Ramos en concert</h2>
<p><img src="img/ramos2.jpg" alt="ramos" width="338" height="225" class="floatimgleft" />Now’s the <strong>perfect time </strong>to pop on your hat and gloves and head to ZSL London Zoo.</p>
<p>It’s a great time for visitors to see some of the world’s most <em>amazing animals</em> up close and having the snow.<br />
Alternatively let the Zoo help your escape winter by <strong><em>transporting you</em></strong> to the tropics, thanks to several heated indoor exhibits. </p>
<p>le site du <a href="http://www.zsl.org">zoo de Londres</a></p></div>
<div id="col-d"><h2>News</h2>
<p><img src="img/_.jpg" alt="" width="130" height="166" class="floatimgleft" />
Les gardiens comptent les animaux</p>
<p>Les lionceaux jouent dans la neige</p>
<p>Nouvelle arrivée : l'outre Harri Oter</p></div>
<div class="clear"></div>
<div id="footer">
<ul>
<li>Mentions</li>
</ul>
</div>
<div class="clear"></div>
</div><!--fin de conteneur-->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/sliding_effect.js"></script>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="js/jquery1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
//transitions
//for more transition, goto <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">http://gsgd.co.uk/sandbox/jquery/easing/</a>
var style = 'easeOutElastic';
//Retrieve the selected item position and width
var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
var default_width = $('#lava li.selected').width();
//Set the floating bar position and width
$('#box').css({left: default_left});
$('#box .head').css({width: default_width});
//if mouseover the menu item
$('#lava li').hover(function () {
//Get the position and width of the menu item
left = Math.round($(this).offset().left - $('#lava').offset().left);
width = $(this).width();
$('#debug').html(left);
//Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});
$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});
//if user click on the menu
}).click(function () {
//reset the selected item
$('#lava li').removeClass('selected');
//select the current item
$(this).addClass('selected');
});
//If the mouse leave the menu, reset the floating bar to the selected item
$('#lava').mouseleave(function () {
//Retrieve the selected item position and width
default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
default_width = $('#lava li.selected').width();
//Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});
});
});
</script>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
</body>
</html> |
conflit entre 2 jquery
Répondre avec citation
Partager