Home » Archives for Maret 2014
Archive for Maret 2014
Membuat gambar dengan CSS efek slide Hover
taruh kode ini diatas kode </head>
<script type='text/javascript'>
$(document).ready(function () {
$('div.jimgMenu ul li a').hover(function() {
if ($(this).is(':animated')) {
$(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
} else {
$(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
}
}, function () {
if ($(this).is(':animated')) {
$(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
} else {
$(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
}
});
});
</script>
kemudian taruh CSS ini diatas ]]></b:skin>
.jimgMenu {
position:relative;
width:630px;
height:200px;
overflow:hidden;
margin:10px;
}
.jimgMenu ul {
list-style:none;
margin:0px;
padding:0px;
display:block;
height:200px;
width:1340px;
}
.jimgMenu ul li {
float:left;
}
.jimgMenu ul li a {
text-indent:-1000px;
background:#FFFFFF none repeat scroll 0%;
border-right:2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:78px;
height:200px;
}
.jimgMenu ul li.satu a {background:url(http://3.bp.blogspot.com/-tV_WbAALyr8/ThKqb8arAiI/AAAAAAAAAXE/pT9KuebBecY/s1600/landscapes.jpg) repeat scroll 0%;}
.jimgMenu ul li.dua a {background:url(http://3.bp.blogspot.com/--Dw4kWyM3yo/ThKqfxFZvtI/AAAAAAAAAXM/1L5ODPu0OcU/s1600/people.jpg) repeat scroll 0%;}
.jimgMenu ul li.tiga a {background:url(http://4.bp.blogspot.com/-Uib-i2TNAsc/ThKqd6uDB6I/AAAAAAAAAXI/p89exio6t8E/s1600/nature.jpg) repeat scroll 0%;}
.jimgMenu ul li.empat a {background: url(http://4.bp.blogspot.com/-53TyMk779WE/ThKqY4c6BkI/AAAAAAAAAXA/rPFPPg0J8lc/s1600/abstract.jpg) repeat scroll 0%;}
.jimgMenu ul li.lima a {background: url(http://4.bp.blogspot.com/-m0l4jFx9_TM/ThKqhmjUqmI/AAAAAAAAAXQ/wAPNi03KSn0/s1600/urban.jpg) repeat scroll 0%;min-width:310px;}
Penerapan untuk memanggil efeknya, dengan kode berikut
<div class='jimgMenu'>
<ul>
<li class='satu'><a href='#'>Landscapes</a></li>
<li class='dua'><a href='#'>People</a></li>
<li class='tiga'><a href='#'>Nature</a></li>
<li class='empat'><a href='#'>Abstract</a></li>
<li class='lima'><a href='#'>Urban</a></li>
</ul>
</div>
hasilnya
taruh kode ini diatas kode </head>
<script type='text/javascript'>
$(document).ready(function () {
$('div.jimgMenu ul li a').hover(function() {
if ($(this).is(':animated')) {
$(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
} else {
$(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
}
}, function () {
if ($(this).is(':animated')) {
$(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
} else {
$(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
}
});
});
</script>
kemudian taruh CSS ini diatas ]]></b:skin>
.jimgMenu {
position:relative;
width:630px;
height:200px;
overflow:hidden;
margin:10px;
}
.jimgMenu ul {
list-style:none;
margin:0px;
padding:0px;
display:block;
height:200px;
width:1340px;
}
.jimgMenu ul li {
float:left;
}
.jimgMenu ul li a {
text-indent:-1000px;
background:#FFFFFF none repeat scroll 0%;
border-right:2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:78px;
height:200px;
}
.jimgMenu ul li.satu a {background:url(http://3.bp.blogspot.com/-tV_WbAALyr8/ThKqb8arAiI/AAAAAAAAAXE/pT9KuebBecY/s1600/landscapes.jpg) repeat scroll 0%;}
.jimgMenu ul li.dua a {background:url(http://3.bp.blogspot.com/--Dw4kWyM3yo/ThKqfxFZvtI/AAAAAAAAAXM/1L5ODPu0OcU/s1600/people.jpg) repeat scroll 0%;}
.jimgMenu ul li.tiga a {background:url(http://4.bp.blogspot.com/-Uib-i2TNAsc/ThKqd6uDB6I/AAAAAAAAAXI/p89exio6t8E/s1600/nature.jpg) repeat scroll 0%;}
.jimgMenu ul li.empat a {background: url(http://4.bp.blogspot.com/-53TyMk779WE/ThKqY4c6BkI/AAAAAAAAAXA/rPFPPg0J8lc/s1600/abstract.jpg) repeat scroll 0%;}
.jimgMenu ul li.lima a {background: url(http://4.bp.blogspot.com/-m0l4jFx9_TM/ThKqhmjUqmI/AAAAAAAAAXQ/wAPNi03KSn0/s1600/urban.jpg) repeat scroll 0%;min-width:310px;}
Penerapan untuk memanggil efeknya, dengan kode berikut
<div class='jimgMenu'>
<ul>
<li class='satu'><a href='#'>Landscapes</a></li>
<li class='dua'><a href='#'>People</a></li>
<li class='tiga'><a href='#'>Nature</a></li>
<li class='empat'><a href='#'>Abstract</a></li>
<li class='lima'><a href='#'>Urban</a></li>
</ul>
</div>
hasilnya