حرکت آرام عکس [بایگانی]

omid.s_net

پنج شنبه 09 شهریور 1391, 13:41 عصر

سلام خدمت برنامه نویسان عزیز
ببخشیدمن یه عکس دارم وقتی روش میرم عکسه میره بالا و زیرش یک لینک هست اگه بخواهم کاری کنم که عکس خیلی خیلی آرام بره بالا بایدچه کدی به این کدها اضافه کنم لطفاکمکم کنید
ممنون

.boxgrid
{
width: 220px;
height: 170px;
float: right;
background: #333;
margin: 10px 1px;
overflow: hidden;
position: relative;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-html-border-radius: 10px;
border-radius: 10px;
}

.boxgrid img
{
width: 220px;
height: 170px;
position: absolute;
top: 0;
left: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-html-border-radius: 10px;
border-radius: 10px;

alitavakoli

پنج شنبه 09 شهریور 1391, 13:55 عصر

دوست عزیز برای انجام این کار بایستی از j query استفاده کنید برنامه ای که مد نظرتون هست رو اینجا (http://jsfiddle.net/9UgEF/65/)نوشتم

omid.s_net

پنج شنبه 09 شهریور 1391, 14:01 عصر

ببخشید میتونیدبگیدکدومه کدش وکجا اضافه کنم؟من سردر نمیارم

alitavakoli

پنج شنبه 09 شهریور 1391, 14:14 عصر

این کدی که شما ارسال کردین کد css هست در واقع دیزاین صفحتون هست.لینکی که براتون داخلش کد نوشتم خیلی واضحه شمال کد اچ تی ام ال + کد css و کد jquery هست.

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Highlight background (stackoverflow) - jsFiddle demo</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type="text/css">
span
{
text-align:justify;
}
</style>

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
});//]]>

</script>
</head>
<body>
<div id="clickme">

<img id="book" src="http://naras.ir/cache/widgetkit/gallery/2/logo6-3e0fa5c3a9.png" alt="" width="100" height="123" style="position: relative; left: 10px;">
</div>
<div>http://www.naras.ir</div>

</body></html>

omid.s_net

پنج شنبه 09 شهریور 1391, 14:28 عصر

خیلی ممنون امامن میخواهم لینک پشت عکس باشه و وقتی عکس رفت بالا نشان داده بشه،داخل این کدبایدروی عکس کلیک کنی تا بره بالا من میخواهم وقتی ماوس رفت روی عکس این اتفاق بیافته و وقتی ماوس رو بر میداریم دوباره ظاهربشه