cari

Rumah >hujung hadapan web >tutorial js >js tayangan slaid indah kemahiran perkongsian kod_javascript kesan khas

js tayangan slaid indah kemahiran perkongsian kod_javascript kesan khas

WBOY
WBOYasal
2016-05-16 15:41:411409semak imbas

Contoh dalam artikel ini menerangkan penciptaan kesan khas tayangan slaid yang indah menggunakan js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah pemalam dengan kesan khas untuk tayangan slaid cantik berdasarkan JavaScript, yang berbeza daripada tayangan slaid lain. Mengapa terdapat perbezaan? Kerana penukaran imej pemalam ini termasuk 4 arah, iaitu, ia juga mungkin untuk menukar ke atas, bawah, kiri dan kanan Anda boleh menggunakannya dalam contoh.
Paparan operasi: -------------------Lihat kesan Muat turun kod sumber--------- - --------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Kod kunci untuk contoh ini: 

var o = {
 init: function(){
 this.portfolio.init();
 },
 portfolio: {
 data: {
 },
 init: function(){
  $('#portfolio').portfolio(o.portfolio.data);
 }
 }
}
 
$(function(){ o.init(); });

Kod kesan khas tayangan slaid indah js yang dikongsi dengan anda adalah seperti berikut

<!doctype html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>js精美的幻灯片画集特效</title>
 <link rel="shortcut icon" href="../favicon.ico">
 <meta name="description" content="Portfolio Image Navigation with jQuery" />
 <meta name="keywords" content="jquery, plugin, navigation, portfolio, images, 2d, scroll to, template" />
 <meta name="author" content="Marcin Dziewulski for Codrops" />
 <link href='http://fonts.googleapis.com/css&#63;family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/portfolio.js" type="text/javascript"></script>
 <script src="js/init.js" type="text/javascript"></script>
 </head>
 <body>
 
 <div id="portfolio">
 <div id="background"></div> 
 <div class="arrows">
 <a href="#" class="up">Up</a>
 <a href="#" class="down">Down</a>
 <a href="#" class="prev">Previous</a>
 <a href="#" class="next">Next</a>
 </div>
 <div class="gallery">
 <div class="inside">
 <div class="item">
 <div><img src="images/1.jpg" alt="js tayangan slaid indah kemahiran perkongsian kod_javascript kesan khas" /></div>
 <div><img src="images/2.jpg" alt="image2" /></div>
 <div><img src="images/3.jpg" alt="image3" /></div>
 </div>
 <div class="item">
 <div><img src="images/4.jpg" alt="image4" /></div>
 <div><img src="images/5.jpg" alt="image5" /></div>
 </div>
 <div class="item">
 <div><img src="images/6.jpg" alt="image6" /></div>
 <div><img src="images/7.jpg" alt="image7" /></div>
 <div><img src="images/8.jpg" alt="image8" /></div>
 <div><img src="images/9.jpg" alt="image9" /></div>
 <div><img src="images/10.jpg" alt="js tayangan slaid indah kemahiran perkongsian kod_javascript kesan khas0"/></div>
 <div><img src="images/11.jpg" alt="js tayangan slaid indah kemahiran perkongsian kod_javascript kesan khas1"/></div>
 </div>
 <div class="item">
 <div><img src="images/12.jpg" alt="js tayangan slaid indah kemahiran perkongsian kod_javascript kesan khas2"/></div>
 <div><img src="images/13.jpg" alt="js tayangan slaid indah kemahiran perkongsian kod_javascript kesan khas3"/></div>
 <div><img src="images/14.jpg" alt="js tayangan slaid indah kemahiran perkongsian kod_javascript kesan khas4"/></div>
 <div><img src="images/15.jpg" alt="js tayangan slaid indah kemahiran perkongsian kod_javascript kesan khas5"/></div>
 </div>
 </div>
 </div>
 </div>
 </body>
</html>

Di atas ialah kod kesan khas tayangan slaid indah yang dikongsi dengan anda.

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.mousewheel mencapai effect_jquery membalik skrin penuhArtikel seterusnya：jquery.mousewheel mencapai effect_jquery membalik skrin penuh

Artikel berkaitan

Lihat lagi