با سلام
برنامه ای در اینجا نوشته ام بدین صورت که سه تا div در صفحه می باشد و وقتی که ماوس بر روی هر کدام از div ها رفت مقداری آن را بزرگتر می کند و وقتی که ماوس از روی آن div کنار رفت دوباره به اندازه اولش برگردد
این برنامه وقتی که به آهستگی ماوس را از div ی به div دیگر حرکت می دهیم درست کار می کند اما وقتی که به سرعت ماوس را از روی div ها حرکت می دهیم همه چیز به هم می ریزد
لطفا برای رفع این مشکل اگر می توانید دریغ نفرماییید
با تشکر
سلام باید تمام مقادیر به صورت ثابت حساب شود
من به این شکل تغیر دادم درست شدکد HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> var tmp = null; $(document).ready(function () { $(".a").mouseover(function () { $(this).animate({ top:360, left: 150, width: 200, height:200 },300); }); $(".a").mouseout( function () { $(this).animate({ top: 400, left: 200, width: 100, height:100 },300); }); $(".b").mouseover(function () { $(this).animate({ top: 360, left: 300, width: 200, height:200 },300); }); $(".b").mouseout( function () { $(this).animate({ top: 400, left: 350, width: 100, height: 100 },300); }); $(".c").mouseover(function () { $(this).animate({ top: 400, left: 450, width: 200, height:200 },300); }); $(".c").mouseout( function () { $(this).animate({ top: 400, left: 500, width: 100, height: 100 },300); }); }); </script> </head> <body> <form id="form1" runat="server"> <div class="a" style="width: 100px; height: 100px; position: absolute; left: 200px; top: 400px; background-color: Red"> </div> <div class="b" style="width: 100px; height: 100px; position: absolute; left: 350px; top: 400px; background-color: Red"> </div> <div class="c" style="width: 100px; height: 100px; position: absolute; left: 500px; top: 400px; background-color: Red"> </div> </form> </body> </html>
ببخشید مقدار top کلاس c هنگام mouseover باید 360 باشد که 400 نوشتم
ممنون از راهنماییتان
در ابتدا خودم هم مقادیر را ثابت گرفته بودم تا درست کار کند اما به دلیل هدف این برنامه نمی توانستم آنها را ثابت در نظر بگیرم چرا که
این divها بیانگر عکس به صورت thumbnail می باشد به این صورت که در یک مستطیل کشیده وبه اندازه 100 * 500 حدود 20 عکس را نمایش می دهم وقتی هم که ماوس بر روی دکمه های دو طرف این مستطیل قرار می گیرد عکس ها به حرکت در می آیند تا تمام عکس ها دیده شوند (منظورم همان Rotator در ASP.NET می باشد) هدفم این است که هنگامی که ماوس بر روی هر عکس رفت مقداری آن را بزرگتر کنم و وقتی که کاربر عکس را کلیک کرد در مستطیل بزرگ بالای این Rotator آن را به اندازه واقعی نمایش دهم به دلیل حرکت عکس ها در Rotator جای عکس ها که حدود 20 تا می باشد ثابت نمی باشد و فقط می توان width و height و top را ثابت بگیرم و مقادیر left بسته به مکان عکس ها متغیر می باشد حال با این تفاسیر اگر راه حلی به نظرتان می رسد لطفا دریغ نفرمایید.
البته راه حلی که به ذهنم می رسد این است به ازای تمام عکس ها متغیری به صورت آرایه در نظر بگیرم برای ذخیره top هر عکس و وقتی کاربر با ماوس روی دکمه های دو طرف Rotator برای حرکت دادن عکس ها اشاره کرد دائما مقدار left هر عکس چه آنهای که دیده نمی شوند و چه آنهایی که دیده می شوند را حساب و در اندیس آرایه ذخیره کنم سپس با رفتن ماوس بر روی هر عکس مقدار left آن را از آرایه بخوانم و از آن کم و زیاد کنم تا افکت بزرگتر شدن آن بهتر شود اما در پیاده سازی این ایده مشکل دارد اگر در پیاده سازی این ایده می توانید کمک کنید و یا ایده بهتری داشته باشید ممنون می شوم دریغ نفرمایید و کمکم کنید
با تشکر
برای تمام دیو ها به این شکل عمل کنید
حالا کدهارا در داخل دو تابع a , b بنویسیدکد HTML:<div class="a" style="width: 100px; height: 100px; position: absolute; left: 200px; top: 400px; background-color: Red" onmouseover="a(this,width,height,left,top)" onmouseout="b(this,width,height,left,top)"> </div>
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول