ورود

View Full Version : مبتدی: حرکت دادن شی با css



hamedeb2012
سه شنبه 13 تیر 1391, 22:48 عصر
چطوری میشه یک باکس رو که با css ساختی بعد از اتمام لود صفحه به طور خودکار در طی مثلا یک ثانیه از بالای صفحه تا وسط صفحه بیاری و در وسط ثابت بشه؟
{ترجیحا با خود css}

hamidre13
چهارشنبه 14 تیر 1391, 01:53 صبح
این کار با css تنها ممکن نیست ، می تونید باکس رو تو وسط صفحه بزاری و پوزیشن رو اسکرول بدی اینجوری باکست با صفحه اسکرول میخوره در غیر اینصورت باید از جاوااسکریپت استفاده کنی من پیشنهاد میدم به جای جاوااسکریپت خام از کتابخانه جی کوئری استفاده کنید.
موفق باشید

cyrusthegreat
جمعه 16 تیر 1391, 10:25 صبح
دوست عزیز

با CSS نسخه 3 قابل انجام هست. ولی خب هنوز بخش های حرکتی CSS بطور کامل حتی در آخرین نسخه های مرورگر ها پیاده سازی نشده است. پس بهتره از راه حل JS اون اکتفا کنیم.


کد برای Jquery:



<div class="salam">
Salam
</div>



$(document).ready(function(){
$("div.salam").animate({
top: '200px'
},200);
});




div.salam {
width: 500px;
height: 200px;
background: #555;
position: fixed;
top: 0;
left: 300px;
}


امیدوارم مفید بوده باشه.

hamidmahjoob
شنبه 26 بهمن 1392, 13:28 عصر
سلام، این کد رو اجرا کنید.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<style>
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: fixed;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>



</head>


<script>
var countdownfrom=3
var currentsecond=countdownfrom+1
countredirect()
function countredirect()
{
if (currentsecond!=1){
currentsecond-=1

}
else{
test()
return
}
setTimeout("countredirect()",1000)
}
countredirect()


function test()
{
document.getElementById('light').style.display='bl ock'
document.getElementById('fade').style.display='blo ck'

}

</script>


<div id="light" class="white_content">

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='no ne';document.getElementById('fade').style.display= 'none'">
<img src="http://s5.picofile.com/file/8113373300/Close_64.png" alt="HTML tutorial" width="42" height="42">
</a>
<br>
<br>
<br>
<br>
<center>
<div style="font-family:'B davat',tahoma">
هزاران درود بر شما

</div>
</center>
</div>
<div id="fade" class="black_overlay"></div>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
<h1>Hello</h1><br>
</html>

tekide
شنبه 26 بهمن 1392, 14:42 عصر
دوستان من تو اسکرول ضعیفم .سایتی مقاله ای ندارید معرفی کنید؟