ANA SAYFA | FORUM | BLOG | SİTENİZ İÇİN | İÇERİK EKLE | EN YENİLER | EN POPÜLERLER | EN BEĞENİLENLER | REKLAM | İLETİŞİM
Arama:
Tüm kategorilerde Google Forumda JAVAScript Araçlar
// ÖZELLEŞTİR
E-posta:
Şifre:
Üye Ol
|
Şifremi Unuttum
>> PHP Arşivimiz Gelişiyor! (0 yorum)>> ARŞİVİMİZ FORUM AÇILDI! (0 yorum)>> Ramazan Bayramınız kutlu olsun (2 yorum)>> Kurban Bayramı (0 yorum)>> 10 Kasım (1 yorum)
// EN YENİLER
// EN POPÜLER
// Anasayfa » JAVASCRIPT» Grafik işlemleri
Oy:
<html> <head> <title>Smart Images</title> <script language="javascript"> <!-- document.onmousemove = beSmart; window.onload = init; startEnlarge = 250; // The distance to start enlarging the picture at, in pixels. enlargeTo = 200; // The number of Pixels to enlarge to. minSize = 40; // The number of Pixels to shrink to. centerOfPic = new Array(); // Calls the beSmart function to set each "smart" image to the correct size. function init(){ beSmart(); } function beSmart(){ for(i=0;i<document.images.length;i++){ if(document.images[i].className == "smart"){ mouseX = window.event.x; mouseY = window.event.y; imageX = document.images[i].offsetLeft + (document.images[i].width / 2); imageY = document.images[i].offsetTop + (document.images[i].height / 2); distance = Math.ceil(Math.sqrt(Math.pow(mouseX - imageX,2) + Math.pow(imageY - mouseY,2))); percent = distance / startEnlarge * enlargeTo; percent = enlargeTo - percent if(percent > minSize){ document.images[i].style.width = percent; document.images[i].style.height = percent; } else { document.images[i].style.width = minSize; document.images[i].style.height = minSize; } } } } // --> </script> </head> <body bgcolor="black" text="lime"> <h1>Smart Images</h1> <p>These are Smart Images. They know when the mouse gets near them, and they enlarge the closer the mouse gets! The distance is determined by the current center of the image and where the mouse is. Then the distance formula is used to calculate how far apart they are in pixels. You are able to set how far away you want the image to begin enlarging, how big it should enlarge to, and also how small it should shrink back to!</p> <p>To use this on your images, just set the images "class" attribute to "smart". The script will do the rest! I think it looks better if you set <font color="red">startEnlarge</font>, the variable that holds when the enlarging should begin, to at least 250. Right now it is set to 250. This is great for image links! Check out my JavaScript site at <a href="http://www.nicksscripts.be" target="new">Nick's Scripts.be</a>.</p> <center> <img src="http://webdeveloper.earthweb.com/repository/javascripts/2006/03/820681scriptIcon.gif" class="smart"> <img src="http://webdeveloper.earthweb.com/repository/javascripts/2006/03/820681scriptIcon.gif" class="smart"> <img src="http://webdeveloper.earthweb.com/repository/javascripts/2006/03/820681scriptIcon.gif" class="smart"> <img src="http://webdeveloper.earthweb.com/repository/javascripts/2006/03/820681scriptIcon.gif" class="smart"> <img src="scriptIcon.gif" class="smart"><br> </center> </body> </html>
Kodu Kopyala
Hata Bildir | Tavsiye Et
Bu içeriğe oy verin:
Yorumlar / Yeni Yorum Yaz Bu içeriğe yorum yazılmamış.
ANA SAYFA | İÇERİK EKLE | YENİ EKLENENLER | EN POPÜLERLER | EN BEĞENİLENLER | REKLAM | DESTEKLEYENLER | İLETİŞİM
JAVAScript İndir © 2004 - 2008Web Tasarımı: Emir Emiroğlu | Kodlama: Can "FiNaRFiN" HANHAN , Korkut TAHAOĞLU, Göktuğ İÇÖZ
