ورود

View Full Version : تغییر سایز تگ Div با جاوا اسکریپت


peymannaji
یک شنبه 24 شهریور 1387, 20:42 عصر
با سلام

فرض کنید که یک تگ DIV دارید با طول و عرض مشخص مثل طول 100 . عرض 10 . حالا چیزی که مد نظر بنده هست اینه که چگونه میتونیم با کمک یک تایمیر عرض تگ div رو با کلیک بروی یک دکمه از 0 به 10 برسونیم بگونه ای که این افزایش عرض به یکباره صورت نگیره و بر اساس زمان افزایش پیدا کنه که یک حالت انیمیشن ایجاد بشه . و با کلیک مجدد بروی دکمه عرض از 10 به 0 تغییر کنه .


با تشکر
Rambod
یک شنبه 24 شهریور 1387, 22:29 عصر
شما كه دوست داري توي سايتت Effect داشته باشي، به نظر من از JQuery استفاده كن كه هم امكانات خيلي زيادي رو در اختيارت ميذاره و هم خيلي ساده است.
peymannaji
یک شنبه 24 شهریور 1387, 22:58 عصر
ممنون دوست عزیز . ببینید چون این قسمتی که خدمت شما گفتم قسمتی از یک برنامه هست و از اونجایی که بنده در حال یادگیری جاوا اسکریپت هستم ترجیح میدم که از چیزی فعلا استفاده کنم که اولا با اون آشنایی دارم و اینکه فهم کدها برام ساده باشه و در ضمن این پکیج که شما معرفی کردید رو ایرانیها نمیتونن دل کنن ... یعنی مجاز نیستند چون جزو گوگل پک هست ...... اگر دوستان محبت کنند و راهنمایی بیشتری کنند ممنون میشم .
org.kiani
یک شنبه 24 شهریور 1387, 23:07 عصر
<script>
var timer;
var div = null;
var min_divWidth = 0;
var max_divWidth = 10;
var divWidth = 0;
var injector = 1;
var interval = 100;
function animate() {
if( !div ) {
div = document.getElementById( 'div_id' );
}
if( divWidth == min_divWidth ) {
div.style.display = 'inline';
}
if( divWidth > 0 && divWidth < 10 ) {
return;
}
timer = setInterval( 'start()', interval );
}
function start() {
divWidth += injector;
div.style.width = divWidth + 'px';
if( divWidth == min_divWidth || divWidth == max_divWidth ) {
stop();
injector *= -1;
}
}
function stop() {
clearInterval( timer );
if( divWidth == min_divWidth ) {
div.style.display = 'none';
}
}
</script>
<div id="div_id" style="display:none;width:0px;height:10px;border:1px gray solid;background:silver;position:absolute;"></div><br>
<a href="javascript:animate()">Start animation</a>
Rambod
یک شنبه 24 شهریور 1387, 23:51 عصر
من اومدم كه كد رو براتون بذارم ديدم org.kiani عزيز هم اين كار رو كردند. حالا ضرر نداره! ميشه 2 تا نمونه!!




<html>
<head>
<script language="javascript" type="text/javascript">

var width = 100;

function display(){
var el = document.getElementById("HiddenDiv");
var btn=document.getElementById("btnShow");

if (btn.value=='<<')
{
if (width<50)
{
btn.value = ">>";
clearTimeout("display()");
} else {
width--;
el.style.width = width;
setTimeout("display()",1);
}
}
else
{
if (width>=100)
{
btn.value = "<<";
clearTimeout("display()");
} else {
width++;
el.style.width = width;
setTimeout("display()",1);
}
}

}
display()
-->
</script>

</head>
<body>

<div id="HiddenDiv" style=" border-right: thin solid;
border-top: thin solid;
border-left: thin solid;
border-bottom: thin solid;
width: 100px;
height: 50px;
background-color: #ff6666">

</div>
<br />
<input id="btnShow" type="button" value="<<" onclick="return display()" />


</body>
</html>
peymannaji
دوشنبه 25 شهریور 1387, 16:44 عصر
ممنون دوستان عزیر محبت فرمودید . مشکلم حل شد ...