Необычные 3D часы для любых дизайнов через плагин Ringclock на jQuery - 2 Марта 2011 - Блог - MAXVK.RU
▲ Вверх
Главная » 2011 » Март » 2 » Необычные 3D часы для любых дизайнов через плагин Ringclock на jQuery
16:08
Необычные 3D часы для любых дизайнов через плагин Ringclock на jQuery

Поделитесь моим сайтом =)

  • Оригинальные часы в 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 

  • Просмотров: 874 | Добавил: max | Теги: Необычные 3D часы для любых дизайно | Рейтинг: 0.0/0
    Оставить комментарий Вконтакте

    Оставить комментарий на Фейсбук
    >