Flex.js

Flex.js Flex uygulaması sitenizdeki çerçevelere animasyonlu grid (ızgara düzeni çerçeveler) özelliği eklemeye yarayan ve benzerlerinden çok farklı olan bir çalışmadır. Benzerleri arasındaki farkı mouse çerçevelerin üzerine geldiği anda çerçeve genişler ve içerik daha büyük bir şekilde görünür. Bu işlem sırasında diğer elemanların bulunduğu çerçeveler de orantılı olarak küçülürler ve web sitesinde herhangi bir taşma olayı gerçekleşmez.  Jason English‘in yapmış olduğu Flex eklentisini  portfolyo yada resim galerileri olarak ta kullanabilirsiniz.  Kullanım

  • Head etiketleri  arasına eklenmesi gereken bölümler.

Js dosya  adresleri : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="../jquery.flex.js"></script>

 Stil  :

	<style>
		body {background-color:#CCC;font-family:Verdana;}
		.flex {position:relative;width:850px;min-height:300px;margin:0 auto;border:0px solid red;margin-top:10px;}
		.flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;border:3px solid white;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;text-decoration:none;}
		[bg=a] {background-image:url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);}
		[bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
		[bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
		[bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
		[bg=e] {background-image:url(http://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
		[bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
		[bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
		[bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
		[bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
		[bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
		[bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;}
		h1, h3 {width:850px;font-weight:normal;margin:0 auto;}
		h1 {margin-top:100px;}
		h3 {color:#666;margin-top:5px;}
		p {width:850px;margin:0;padding:0;margin:0 auto;font-size:14px;color:black;margin-top:0px;margin-bottom:20px;color:#989898;}
		.marginleft {margin-left:25px;}
	</style>

 JavaScript : 

	<script type="text/javascript">
	$(function() {
	    $(".flex").flex();
	});
	</script>
  •  Body  etiketleri arasına eklenmesi gereken bölüm.

Html : 

	<div class="flex">
		<a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="350" height="275">A</a>
		<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
		<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
		<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
		<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
		<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
		<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="225" height="150">G</a>
		<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
		<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="250" height="140">I</a>
		<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
		<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a>
	</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-06 tarihinde yayınlandı,Toplam 3800 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...