Newest Post

// Posted by :Sabri Sangjaya // On :Minggu, 16 Juni 2013


a

efek ini terinspirasi dari template blognya santa-mars.blogspot.com yang windows 8
gue udah tanya ke pemilik blognya tapi gue nggak ngerti maksudnya
ini ssnya
a 

tapi setelah gue belajar javascript sedikit-sedikit dari http://www.w3schools.com/jsref/dom_obj_style.asp gue paham dan ini javascript versi gue
javascript ini lumayan simple karena hanya menggunakan fungsi display dan mengganti background

yang dibutuhkan
gambar shutdown a 
script dan htmlnya


Javascript
<script type='text/javascript'>
function shutdown()
{
document.getElementById('wrapper').style.display = 'none';
document.body.style.backgroundImage="url('http://2.bp.blogspot.com/-eT8oUAN8Rwk/URJ4TFvihLI/AAAAAAAAB-M/Wm-0hAYWjzg/s1600/shutdown.gif')";  
document.body.style.backgroundRepeat="repeat";
} </script'>


HTML
 <a href='#' onClick='shutdown()' title='Shutdown'>
<img alt='a' height='50' src='http://icons8.com/wp-content/uploads/2012/04/shutdown.png' style='cursor: pointer;' width='50'/>
</a>
 gampangkan klik gambar ini a   atau yang ada di bottom menu 

maka terjadi efek shutdown


terus cara mengembalikannya gimana ya harus reload halaman atau bikin javascriptnya


ini untuk menyalakannya tapi script diatas harus diubah menjadi

function shutdown()
{
document.getElementById('wrapper').style.display = 'none';
document.body.style.backgroundImage="url('http://2.bp.blogspot.com/-eT8oUAN8Rwk/URJ4TFvihLI/AAAAAAAAB-M/Wm-0hAYWjzg/s1600/shutdown.gif')";  
document.getElementById('antishutdown').style.display = 'block';
}   


ini html dan javascript antishutdownn ya

<script type='text/javascript'>
function live()
      {
      document.getElementById('wrapper').style.display = 'block';
document.getElementById('kincir').style.display = 'none';
document.getElementById("wrapper").style.MozTransition = "block 5s ease-in-out";

document.body.style.backgroundImage="url('http://2.bp.blogspot.com/-yndS-oEUhYI/Ua9cskOmbmI/AAAAAAAAFio/LW5MxQWdpjs/s1600/Untitled-3.png')";
      }
</script>

<div id='kincir' style='z-index: -999999; display:none;bottom: 300px; left: 550px; position: fixed; right: 0px;font-size:32;font-weight:bold;color:#FFF;   '>
<img alt='a' onclick='live()' src='http://icons8.com/wp-content/uploads/2013/03/long_beard-78.png' style='cursor: pointer;'/>
CLICK THE IMAGE TO TURN ON
</div>

silahkan kreasikan sesuka hati ganti alamat gambarnya

kalau tanya-tanya tentang javascript mending pelajari dulu di http://www.w3schools.com/jsref/dom_obj_style.asp karena di sana ada demonya simple tapi langsung paham


kalau ada pertanyaan komen aja

Leave a Reply

Subscribe to Posts | Subscribe to Comments

// Copyright © 2012 Pakdhe Girang //Anime-Note//Powered by Blogger // Designed by Johanes Djogan //