cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery

jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery

WBOY
WBOYasal
2016-05-16 15:17:061723semak imbas

Artikel ini menerangkan contoh jQuery yang mensimulasikan slaid kesan penukaran skrin penyemak imbas, yang dikongsi dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Tangkapan skrin kesan berjalan adalah seperti berikut:

Klik di sini untuk melihat tunjuk cara dalam talian .

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>360效果幻灯片</title>
  <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript" >
    function changeDesktopBg(index) {
      $("#desktopList").animate({"margin-left": -(index*1000)+"px", "speed": 2000});
    }
  </script>
  <style type="text/css" >
    body { margin:0; padding: 0;}
    #desktop ul { padding:0; border-bottom-style:none; width:5000px; list-style:none; }
    #desktop li { padding:0; float:left;}
    .desktop_li_img { width:1000px; height:600px;}
    #desktop { width:1000px; overflow:hidden; height:600px;}
    #controller ul { width:250px; list-style:none;}
    #controller li { width:40px; float:left; padding:0; text-align:center; margin-left:5px; }
    .controller_li_block { background:#F2F2F2; height:10px; line-height:10px; border:2px solid gray; cursor:pointer;}
  </style>
</head>
<body>
<center>
  <div id="desktop">
    <ul id="desktopList">
      <li><img src="img/1.jpg" class="desktop_li_img" alt="jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery" /></li>
      <li><img src="img/2.jpg" class="desktop_li_img" alt="jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery" /></li>
      <li><img src="img/3.jpg" class="desktop_li_img" alt="jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery" /></li>
      <li><img src="img/4.jpg" class="desktop_li_img" alt="jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery" /></li>
      <li><img src="img/5.jpg" class="desktop_li_img" alt="jQuery mensimulasikan tayangan slaid kesan penukaran skrin pelayar 360 (dengan muat turun kod sumber demo)_jquery" /></li>
    </ul>
  </div>
  <div id="controller">
    <ul >
      <li><div class="controller_li_block" onclick="changeDesktopBg(0)">1</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(1)">2</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(2)">3</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(3)">4</div></li>
      <li><div class="controller_li_block" onclick="changeDesktopBg(4)">5</div></li>
    </ul>
  </div>
</center>
</body>
</html>

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas di tapak ini: "Ringkasan animasi jQuery dan penggunaan kesan khas" dan "Ringkasan klasik biasa kesan khas jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

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：Bincangkan proses pelaksanaan kemahiran JavaScript statements_javascriptArtikel seterusnya：Bincangkan proses pelaksanaan kemahiran JavaScript statements_javascript

Artikel berkaitan

Lihat lagi