حرکت نشانگر

m1113

Member
سلام
من یه سوال فنی دارم طبق اگه اونجایی که خط قرمز مثلثی مشخص است میخواستم بدونم چه جوری میتونم کار کنم که وقتی مثلا نشانگر موس رفت رو گالری اون نشانگر هم حرکت کنه و بره روی گالری و وقتی که اصلا موس روی هیچ کدومش قرار نداره فقط نشانگر زیر آیکن home باشه اگه میشه آقا توضیح بدید که چه جوری این کارو بکنم
 

پیوست ها

  • Untitled.png
    Untitled.png
    241.1 کیلوبایت · بازدیدها: 11

m1113

Member
مرسی دوست عزیز فقط مهم تغییراتش است که من درست متوجه نمیشم اگه ممکنه بگید کجاشو تغییر بدم
 

eAmin

Well-Known Member
منظور از "تغییرات اندک" این بود که عکس نشانگر مورد نظر خودتون رو در background در قسمت css قرار میدادید، وگرنه این کد کاملا قابل استفاده هست و نیاز به هیچ چیزی به غیر از jQuery نداره!
اون پایین نمونه تست گذاشته که شما بتونید طرز کارش رو متوجه بشید!

درضمن اگر این کد رو هم بجای کد اصلی استفاده کنید، موقعیت نشانگر از راست به چپ میشه:
کد:
$(function() {
	$('li', '#navigation').each(function() {
		var $li = $(this);
		var $a = $('a', $li);
		var width = $li.width();
		var left = $li.position().left;

		$('#cursor', '#navigation').css({width: width, left:left});
		$a.mouseover(function() {
			$('#cursor', '#navigation').animate({
				width: width,
				left: left
			}, 'slow');
		});
	});
});
 

m1113

Member
ببینید من الان بجای li از td استفاده کردم مشکلی نداره؟
بجای #navigation چی باید بذارم؟
بجای #cursor چی باید بذارم ؟
و اون عکس فلشه باید بهش لینک بدم یا نه؟
 

eAmin

Well-Known Member
با جدول نمیتونید خیلی روی این قضیه مانور بدید. جدول محدودیت های خودش رو داره و در این مورد یعنی منتقل کردن اون با افکتهای jQuery یکجورائی غیر ممکن هست، ذات جدولها این اجازه رو بهش نمیده یعنی اگر جابجا بشه ساختار جدول شما کاملا بهم می ریزه.
شما باید برای اینکه یک همچین چیزی رو ایجاد کنید باید طراحی تون رو بصورت Table less انجام بدید تا در آینده به اینجور مشکل ها برخورد نکنید.

ایجاد منو ناوبری ای بصورت Table less به مراتب ساده تر از ایجاد اون با جدول ها هست.
 

eAmin

Well-Known Member
الان من کد جی کئوری که توی این آدرس است رو استفاده میکنم
http://blog.gabrieleromanato.com/2011/07/jquery-menu-with-cursor/
ولی فلش به سمت چپ میره در صورتی که باید به سمت راست بره
کدهایی که استفاده کردید رو در اینجا قرار بدید تا بهتر بشه راهنمایی تون کنیم.
کدهای پست شماره 4 این تاپیک رو با کدهای خودتون عوض کنید ببینید درست میشه یا خیر.
 

m1113

Member
کد:
$(function() {
    $('li', '#navigation').each(function() {
        var $li = $(this);
        var $a = $('a', $li);
        var width = $li.width();
        var left = $li.position().left;

        $('#fl', '#navigation').css({width: width, left:left});
        $a.mouseover(function() {
            $('#fl', '#navigation').animate({
                width: width,
                left: left
            }, 'slow');
        });
    });
});

من از این کد استفاده میکنم
اون #fl دیوی است که باید زیر گزینه ها حرکت کنه
الان این کد که قرار دادم اصلاً فلشه ناپدید شد
 

eAmin

Well-Known Member
کدهای کامل این منوهایی که خود شما نوشتید رو قرار بدید ببینم مشکل اصلی کجاست.
 

m1113

Member
این کد های html
کد:
<div id="navigation">
<ul>
<li><a href="#"><strong>درباره ما</strong></a></li>
<li><a href="#"><strong>تماس با ما</strong></a></li>
<li><a href="#"><strong>کمپوست</strong></a></li>
<li><a href="#"><strong>ورمی کمپوست</strong></a></li>
<li><a href="#"><strong>گالری</strong></a></li>
<li class="home"><a href="#"><img src="image/home.png" width="47" height="55" /></a></li>
</ul>
<div id="fl"></div>
</div>

این کدهای css
کد:
#navigation {
    height:50px;
}
#navigation ul {
    padding-left:100px;
    font-family:"Arial Black", Gadget, sans-serif;
    font-size:18px;
    list-style: none;
    margin-top:-70px;
}
#navigation li {
    float:left;
}
#navigation a {
    padding-left:25px;
    padding-right:20px;
    float:left;
    line-height:20px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}
.home{
    margin-top:-30px;
}
#fl{
    background-image:url(image/fl.png);
    background-repeat:no-repeat;
    width:39px;
    height:27px;
    margin-left:647px;
    position:fixed;
    margin-top:9px;
}

اینم کد های jQuery

کد:
    <script type="text/javascript">
$(function() {
    $('li', '#navigation').each(function() {
        var $li = $(this);
        var $a = $('a', $li);
        var width = $li.width();
        var left = $li.position().left;

        $('#fl', '#navigation').css({width: width, left:left});
        $a.mouseover(function() {
            $('#fl', '#navigation').animate({
                width: width,
                left: left
            }, 'slow');
        });
    });
});
</script>
 

eAmin

Well-Known Member
دوست عزیز مشکل شما در قسمت css هست. این قسمت از کار رو خودتون باید نسبت به طرحی که زدید انجام بدید و با طراحی خودتون هماهنگش کنید.
من کمی کدهای css شما رو تغییر دادم تا حداقل به درستی کارش رو انجام بده، هماهنگ کردنش به عهده ی خود شما است.
کد:
<!DOCTYPE html>
<html>
<head>

<style>
#navigation {
    height:100px;
}
#navigation ul {
    height: 2em;
    padding-left:100px;
    font-family:"Arial Black", Gadget, sans-serif;
    font-size:18px;
    list-style: none;
}
#navigation li {
    float:left;
    margin-right: 1em;
}
#navigation a {
    padding-left:25px;
    padding-right:20px;
    float:left;
    line-height:20px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
}

#fl{
    background-image:url(image/fl.png);
    background-repeat:no-repeat;
    width:20px;
    height:27px;
    position: relative;
}

</style>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('li', '#navigation').each(function() {
        var $li = $(this);
        var $a = $('a', $li);
        var width = $li.width();
        var left = $li.position().left;

        $('#fl', '#navigation').css({width: width, left:left});
        $a.mouseover(function() {
            $('#fl', '#navigation').animate({
                width: width,
                left: left
            }, 'slow');
        });
    });
});
</script>

</head>

<body>
<div id="navigation">
	<ul>
		<li><a href="#"><strong>درباره ما</strong></a></li>
		<li><a href="#"><strong>تماس با ما</strong></a></li>
		<li><a href="#"><strong>کمپوست</strong></a></li>
		<li><a href="#"><strong>ورمی کمپوست</strong></a></li>
		<li><a href="#"><strong>گالری</strong></a></li>
	</ul>
	<div id="fl">fdffffff</div>
</div>
</body>
</html>
 

m1113

Member
فکر نکنم مشکل از css باشه چون من با کدی که شما دادی رو مطابقت دادم حتی ویرایش هم کردم ولی همه چی بهم ریخت و وقتی نشانگر رو روی گزینه ها میبردم اسکرول مرورگر تکون میخورد فکر کنم مشکل از کد جی کئوری باشه

کد jQuery پست 11 رو استفاده کردم همه چی درسته فقط بجای اینکه به سمت راست حرکت کنه وقتی روی گزینه ها میرم میره به سمت چپ یعنی اولش فلش وجود نداره وقتی میری روی گزینه آخری فلش روی گزینه اولی قرار داره
 
آخرین ویرایش:

eAmin

Well-Known Member
شما میتونید یه نمونه کامل که استفاده کردید رو اینجا برای نمونه قرار بدید؟ چون در اون مثالی که بنده برای شما در آخرین پست خودم قرار دادم کاملا بدرستی کار میکرد و فقط باید موقعیت قرار گیری نشانگر تنظیم می شد!
 

جدیدترین ارسال ها

بالا