ایجاد یک Caption ساده و زیبا
سه شنبه, ۲۱ آبان ۱۳۹۲، ۱۲:۳۳ ق.ظ
با سلام خدمت دوستان عزیز در همیار
امروز میخوام یک سبک از عنوان دهی به یه عکس رو به شما یاد بدم که تاثیری زیادی روی مخاطب میزاره .
این طرح به این صورت هست که وقتی شما موس رو روی عکس میبرید عنوان عکستون روی عکس به صورت افکتی نمایش داده میشه .
برای اینکار یک فایل index.html ایجاد کنید و این کد رو توش کپی کنید :
<!Doctype html>
<html lang="fa">
<head>
<title>Simple Caption With Jquery</title>
<script src="jquery-latest.js" ></script>
<script src="js.js" ></script>
<style>
article > figure {
width:20%;
height:20%;
margin:5px 15px 5px 10%;
border:1px #EEEEEE solid;
display: inline-block;
position: relative;
}
article > figure > img{
width:100%;
height:100%;
}
article > figure > img:hover{
cursor: pointer;
}
article > figure > p{
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
opacity: 0.8;
z-index: 100;
left:0;
right: 0;
bottom:0;
text-align: center;
}
</style>
</head>
<body>
<article>
<figure>
<img src="images/1.jpg" alt="Hi ;)" />
<p>
this is test news
</p>
</figure>
<figure>
<img src="images/2.jpg" alt="Hi ;)" />
<p>
this is test news
</p>
</figure>
<figure>
<img src="images/3.jpg" alt="Hi ;)" />
<p>
this is test news
</p>
</figure>
<figure>
<img src="images/4.jpg" alt="Hi ;)" />
<p>
this is test news
</p>
</figure>
</article>
</body>
</html>
و یه فایل js.js هم ایجاد کنید و این محتویات رو توش قرار بدید :
$(function(){
$('p').hide(); // hide all captions
$('figure').hover( // if mouse on picture
function(){
$(this).find("p").slideDown('fast'); //display caption
},
function(){
$(this).find("p").slideUp(); // hide caption
}
);
});
و 100 البته کتابخانه Jquery رو هم دانلود کنید و در صفحه اضافه کنید ( من اضافه کردم اگر خواستید نامش رو تغییر بدید ) .
شما میتونید با تغییرات کوچیکی در فایل js.js افکت های جذابتری هم ایجاد کنید .
با تشکر
By KazemB/.
واقعا وبلاگ خوبی دارید.
موفق باشید.