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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:41:41
asal
1451 orang telah melayarinya

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(); });
Salin selepas log masuk

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>
Salin selepas log masuk

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

Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan