Главная » Файлы » Прочие скрипты » jQuery

Необычные 3D часы для любых дизайнов через плагин Ringclock на jQuery
23.06.14, 11:32:38

Скачать файл




Оригинальные часы в 3D исполнении, которые прекрасно впишутся как в тёмные, так и в светлые дизайны. Чтобы суметь подстроить данный плагин под свой дизайн, нужно на приличном уровне разбираться в css

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<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

Следующий код в то место, где будут сами часы:
Код
<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

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Ringclock, Через, на, плагин, любых, для, дизайнов, часы, 3D, необычные
Просмотров: 399 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: