Jquery

Web Projesinde jQuery Kodlarıyla Ekran Koruyucu Yapma

İşletim sistemlerinde açık olan bilgissayarda ekrana gelen resim ya da animasyonun fare ya da klavyeden bir tuşa dokunucaya kadar gösterimesine ekran koruyucu denir. Özellikle açık olan bilgisayarda başkalarının bilgisayarı kullanmaması isteniyorsa, ekranda reklam amaçlı bir animasyonun dönmesi isteniyorsa, kullanıcı uyarılmak isteniyorsa bu yapı kullanılır. Web sayfaları da artık masaüstü uygulamalarından fazla kullanıldığına göre burada da ekran koruyucu kullanılabilir. Bu uygulamamızda ekran koruyucunun yapımını anlatmaya çalışacağız.

Html tarafı

    <div id="screensaver" style="width:100%; height:100%; background-color:red;  display:none;"></div>

Css tarafı

    <style>
        body, html{
            margin:auto;
            width:100%;
            height:100%;
        }
    </style>

jQuery tarafı

        $(function () {
            var timer;
            $(this).mousemove(function (event) {
                clearTimeout(timer);
                timer = setTimeout(function () { $('div').fadeIn(900); }, 10000);
                $('div').fadeOut(900);
            });
            $(this).keydown(function (e) {
                if (e.keyCode == 27) {
                    $('div').fadeOut(900);
                }
            });
        });

Burada yer alan kodları şöyle de yazabilirsiniz.

        $(function () {
            var timer;
            $('body').mousemove(function () {
                clearTimeout(timer);
 
                timer = setTimeout(function () {
                    $('#screensaver').fadeIn(900);
                }, 6000);
 
                $('#screensaver').fadeOut(100);
            });
            $('body').keydown(function (e) {
                if (e.keyCode == 27) {
                    $('div').fadeOut(900);
                }
            });
        });

Ya da şöyle yazabilirsiniz.

        var timer;
        $(document).mousemove(function (event) {
            clearTimeout(timer);
            timer = setTimeout(function () { $('div').fadeIn(900); }, 10000);
            $('div').fadeOut(900);
        });
        $(document).keydown(function (event) {
            if (event.keyCode == 27) {
                $('div').fadeOut(900);
            }
        });
 
İlgili Makaleler
Facebook Web Sayfasına Ait Üye Kayıt Formunu Tasarlayan Programı JQuery İle Kodlayınız
2022 TYT Matematik Ondördüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Üçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Resmin Ekranın Sol Üst Köşesinden Başlayarak Büyüyerek Küçülmesini Sağlayan Programı JQuery İle Yapınız
Core Mvc Projesinde Resmin Sol Üstten Başlayıp Büyüyerek Ekranı Kapladığı Animasyonu Jquery Dilinde Kodlayınız
2022 TYT Matematik Yirmiüçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Birinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 LGS Boyanmayan Kutudaki Üslü İfadeyi Bulan Matematik Sorusunu jQuery Diliyle Bulan Uygulama
2022 TYT Matematik Onbirinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
JQuery Script Dilinde bind ve unbind Fonksiyonları
JQuery Yardımıyla Web Sayfasından JSON Veri Çekme
2022 TYT Matematik Altıncı Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2023 TYT Matematik Beşinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Onbeşinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Yirmidördüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Html Dom Yapısını Anlamak
2022 TYT Matematik Onyedinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Onsekizinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2023 TYT Matematik Birinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Web Projesinde jQuery Kodlarıyla Ekran Koruyucu Yapma

Yorum Ekle
   
Kötü
İyi