Сообщения Вам не доступны.
Так как Вы входите в группу ГОСТИ (менее возможностей).
Нажмите для регистрации или войдите с помощью uNet
Обсуждения Музыка Радио
Тысячи радиостанций мира
Видео добавленное пользователями с
yotube
mail.ru
smotri.com
Комедии
Боевики
Фантастика
Клипы
Приколы
и многое другое...
Скачать файлы
Скачивание бесплатное
Выход Вход Регистрация



   

Оповещения!

У нас появилось телевидение!

(Нажмите ESC либо закрыть.)

























   

Оповещения!

  • Вам сообщение. Читать
  • Вы не зарегистрированы.

    (Нажмите ESC либо закрыть.)




  • Регистрация
  • --> Вход <--
  • Поиск
    Категории
    JavaScript [13]
    Jquery [0]
    HTML & DHTML [1]
    CSS [4]
    Оцените мой сайт
    Всего ответов: 125
    Реклама


    BannerFans.com
     

    Вы не зарегистрированы! Просим Вас пройти быструю регистрацию для увеличения возможностей пользования сайтом.
    Обсужд.
    Гостям запрещены обсуждения. Войдите на сайт в режиме "Пользователь".


    Чат
    200
    Сейчас слушают
    Радио Maximum

    Радио Ди ФМ (Di-FM)

    Гагаузское радио (Молдова)

    Radio Alla MD

    Хит fm






    Посоветуй друзьям!




    Смотрите ТНТ онлайн

    Все о вине! Для тех кто его делает и любителей побаловать себя приятным напитком!

    Курсы английского языка.
    Главная » Файлы » Скрипты » CSS
    Название программы: Стрелочные часы с использованием CSS3
    Оцените файл: Категория: CSS
    Добавил: Maliw
    Просмотров: 297

    Рейтинг: 0.0/0

    Дата загрузки: 09.05.2011, 02:14

    Пример:

    Скрипт:


    <script type="text/javascript" src="http://ruseller.com/lessons/les904/demo/jquery-1.2.6.min.js"></script> 
        
        <style type="text/css"> 
            * {
            margin: 0;
            padding: 0;
            }
            
            #clock {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 20px auto 0 auto;
            background: url(images/clockface.jpg);
            list-style: none;
            }
            
            #sec, #min, #hour {
            position: absolute;
            width: 30px;
            height: 600px;
            top: 0px;
            left: 285px;
            }
            
            #sec {
            background: url(images/sechand.png);
            z-index: 3;
                }
               
            #min {
            background: url(images/minhand.png);
            z-index: 2;
                }
               
            #hour {
            background: url(images/hourhand.png);
            z-index: 1;
                }
               
            p {
                text-align: center; 
                padding: 10px 0 0 0;
                }
        </style> 
        
        <script type="text/javascript"> 
        
            $(document).ready(function() {
             
                  setInterval( function() {
                  var seconds = new Date().getSeconds();
                  var sdegree = seconds * 6;
                  var srotate = "rotate(" + sdegree + "deg)";
                  
                  $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
                      
                  }, 1000 );
                  
             
                  setInterval( function() {
                  var hours = new Date().getHours();
                  var mins = new Date().getMinutes();
                  var hdegree = hours * 30 + (mins / 2);
                  var hrotate = "rotate(" + hdegree + "deg)";
                  
                  $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
                      
                  }, 1000 );
            
            
                  setInterval( function() {
                  var mins = new Date().getMinutes();
                  var mdegree = mins * 6;
                  var mrotate = "rotate(" + mdegree + "deg)";
                  
                  $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
                      
                  }, 1000 );
             
            }); 
        
        </script> 
     
    </head> 
     
    <body> 
     
    <ul id="clock">
      <li id="sec"></li> 
      <li id="hour"></li> 
    <li id="min"></li> 
    </ul> 


    0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]


    Обратная связь Быстрый поиск по youtube.com Ваша реклама
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0