cari

Rumah >hujung hadapan web >tutorial js >jQuery super cool kesan jam rata kod sharing_jquery

jQuery super cool kesan jam rata kod sharing_jquery

WBOY
WBOYasal
2016-05-16 15:43:091074semak imbas

Contoh dalam artikel ini menerangkan kod kesan jam rata super cool jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Kesan jam rata super sejuk yang dihasilkan oleh jQuery memaparkan tarikh dan masa melalui bar skala mendatar Selepas ujian, kesannya sangat sejuk dan ia merupakan contoh pembelajaran yang sangat baik.
Di sini kami juga ingin menyebut satu lagi gaya paparan masa yang telah kami laksanakan sebelum ini: JS melaksanakan gaya masa termometer , yang kedua-duanya menembusi sepenuhnya konsep jam tradisional Don jangan terlepas.

Rendering operasi: -----------------------Lihat kesan Muat turun kod sumber--- --------------------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.
Kod kesan jam rata super sejuk jQuery yang dikongsi dengan anda adalah seperti berikut 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,时钟,日期,刻度条,jQuery" />
<meta name="description" content="jQuery制作的超酷平面式时钟效果，更多时钟,日期,刻度条,jQuery请访问脚本之家JS代码频道。" />
<title>jQuery制作的超酷平面式时钟效果_脚本之家</title>

<style type="text/css">

body { background:#bae1ea url(back.jpg) 50% 0px no-repeat; color:#000; }

/* container for clock */
#wrap { position:relative; margin: 100px auto 0; width:700px; height:440px; background:url("slider clock(trans).png") no-repeat top left; border-style:solid; border-width:1px; overflow:hidden; }

/* style background and size of all sliding divs */
#wrap div { position:absolute; margin-left:-700px; width:1400px; height:40px; background:url("slider clock(trans).png") repeat-x; } 

/* specific position and background position for sliding divs */
#wrap #day { top:40px; background-position:0 -440px; }

#wrap #month { top:120px; background-position:0 -480px; }

#wrap #date { top:200px; background-position:0 -520px; }

#wrap #hour { top:280px; background-position:0 -560px; }

#wrap #min { top:320px; background-position:0 -600px; }

#wrap #sec { top:400px; background-position:0 -640px; }

#title { margin:20px auto; width:550px; text-align:center; }

#other { margin:10px auto; width:550px; text-align:center; }

</style>



<script type="text/javascript" src="jquery.js"> </script>

<script>

 $(document).ready(function(){

  function checktime(olddel){

   var now = new Date();

    var nowdel = now.getDay() + "|" + now.getMonth() + "|" + now.getDate() + "|" + now.getHours() + "|" + now.getMinutes() + "|" + now.getSeconds();

    if ( olddel != nowdel ) {

     var oldsplit = olddel.split("|");
     var nowsplit = nowdel.split("|");

     if ( oldsplit[5] != nowsplit[5] ) {

      clock_slide('#sec',nowsplit[5],11);
      if ( oldsplit[4] != nowsplit[4] ) {

       clock_slide('#min',nowsplit[4],11);
       if ( oldsplit[3] != nowsplit[3] ) {

        clock_slide('#hour',nowsplit[3],28);
        if ( oldsplit[2] != nowsplit[2] ) {

         clock_slide('#day',nowsplit[0],100);
         clock_slide('#date',(nowsplit[2]-1),22);

         if ( oldsplit[1] != nowsplit[1] ) {
          clock_slide('#month',nowsplit[1],57);

         };
        };
       };
      };
     };
    };

    function clock_slide(which,howmuch,multiple){
     $(which).stop().animate({marginLeft: ((howmuch*multiple)-700)+'px'}, 250, 'linear');
    };

    setTimeout(function(){checktime(nowdel);}, 250);


  };

   checktime("0|0|0|0|0|0");

 });

</script>



</head>

<body>



 <div id="wrap">

  <div id="day"> </div>

  <div id="month"> </div>
  <div id="date"> </div>
  <div id="hour"> </div>
  <div id="min"> </div>
  <div id="sec"> </div>

 </div> <!-- End "wrap" -->


<div style="text-align:center;clear:both">
<p>来源：<a href="http://www.jb51.net" target="_blank">vonholdt</a>　代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a>　感谢：<a href="http://www.jb51.net" target="_blank">liulisuo</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>

Di atas ialah kod kesan jam rata sejuk jQuery yang dikongsi dengan anda, saya harap anda menyukainya.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery tiruan 360 ikon halaman navigasi seret isihan kesan kod sharing_jqueryArtikel seterusnya：jQuery tiruan 360 ikon halaman navigasi seret isihan kesan kod sharing_jquery

Artikel berkaitan

Lihat lagi