Jquery Örnekleri / Jquery ile Resim Ortalamak

Jquery ile Resim Ortalamak

Bir DIV tagı ile sınırlandırılmış bir alana bir IMG tagını ortalayarak yerleştirmek

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/tm/foto_galeri_temp1/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#ana_resim_img").load(function(){
var kapsayici_width = $("#ana_resim_id").width();
var kapsayici_height = $("#ana_resim_id").height();
var image_width = $(this).width();
var image_height = $(this).height();

if(kapsayici_width){
var Fark=Math.round((image_width-kapsayici_width)/2);
$(this).css("left","-" + Fark + "px");
}
if(kapsayici_height){
var Fark=Math.round((image_height-kapsayici_height)/2);
$(this).css("top","-" + Fark + "px");
}
})
});
</script>
<style type="text/css">
#ana_resim_id { overflow:hidden; width:910px; height:400px; position: relative; z-index: 9999; }
#ana_resim_img { position: relative; }
</style>

</head>
<body>

<div style="margin-top:50px;">
<div style="width:950px; height: 650px; margin:0 auto; background-color: #C5C5C5;">

<div style="padding: 20px;">
<div id="ana_resim_id">

<img id="ana_resim_img" src="/rs/ft/ftorj/test_2.jpg" />

</div>
</div>

</div>
</div>

</body>
</html>

Jquery ile Resim Ortalamak

21,392 Okunma 10/07/2011.04:23:28

/ Yorumunuzu Ekleyin

İsminiz

Email Adresiniz

Avatar

jpg, gif, png türündeki resimleri seçmelisiniz

Yorumuzu Yazınız

JQuery İle Basit Slider Yapımı

Kendi Kendinize

31,825 okuma, 15.01.2014 21:35

Easy Slider Jquery Plugin

Jquery ile yapılmış mükkemmel sliderlardan birisi Easy Slider

31,243 okuma,

Jquery Tab Menu Örneği

Çok güzel hazırlanmış bir Jquery Tab Menu Uygulaması

28,374 okuma,

Kapsayan Tagı Silmek unwrap()

Bazen SEO için tagları bir başka tag içerisine gömmek zorunda kalırız. Fakat daha sonra bu gömen kod başımıza bela olabilir. JQuery ile bundan unwrap ile kurtulabiliriz.

27,269 okuma,