Оригинальные часы в 3D исполнении, которые прекрасно впишутся как в тёмные, так и в светлые дизайны. Чтобы суметь подстроить данный плагин под свой дизайн, нужно на приличном уровне разбираться в css Для начала посмотрите Демо
Установка:
После /head на нужных страницах вставляйте:
Code
<script type="text/javascript" src="/js/jquery.ringclock.js"></script>
<style>
div#ringclock{margin:0;padding:0;overflow:hidden;position:relative;}
div#ringclock-mover{position:relative;}
div#ring-hour-container,div#ring-min-container,div#ring-sec-container{margin:0;padding:0;position:absolute;}
ul#ring-sec,ul#ring-min,p#ring-hour{position:relative;margin:0;padding:0;list-style-type:none;}
ul#ring-sec li,ul#ring-min li{position:absolute;}
div#ring-hour-container{top:0px;left:0;}
div#ring-min-container{ top:-20px;left:105px;}
div#ring-sec-container{top:8px;left:170px;}
div#ringclock{
width:100%;
height:500px;
background-color:#000;
border:solid 5px #306;
}
div#ringclock-mover{
width:100px;
height:50px;
}
ul#ring-sec{
color:#fff;
}
ul#ring-min{
color:#fff;
}
p#ring-hour{
color:#fff;
}
ul#ring-sec,
ul#ring-min{
font-size:20px;
}
p#ring-hour{
font-size:60px;
}
</style>
<script type="text/javascript">
$(function(){
$("div#ringclock").ringclock({
rsh:300,
rmw:300,
top:150,
left:0
});
});
</script>
Повторюсь, что для того, чтобы суметь адаптировать данные часы под свой сайт, необходимо хорошо разбираться в css Следующий код в то место, где будут сами часы:
Code
<div id="ringclock">
<div id="ringclock-mover">
<div id="ring-hour-container">
<p id="ring-hour">hour</p>
</div>
<div id="ring-min-container">
<ul id="ring-min">
<li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li>
<li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li>
<li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li>
<li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li>
<li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
</ul>
</div>
<div id="ring-sec-container">
<ul id="ring-sec">
<li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li>
<li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li>
<li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li>
<li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li>
<li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
</ul>
</div>
</div>
</div>
сталось лишь залить скрпт из прикреплённого архива в папку js
