Variable
جمعه 30 تیر 1391, 01:09 صبح
من اگه به این مشکل بر میخوردم . میومد . به هر سر منو یه شماره میدادم . مثلا سر منو اول 1 . دوم 2 و ... الا اخر بعد هربار که موس رو یکی از این سر منو ها قرار گرفت . یه متغیر به نام val رو مساوی با این مقدار قرار میدی. مثلا وقتی رو دومی قرار گرفت .. val=2 ;
بعد مثلا اگر سایز هر سر منو 100 پیکسل باشه . شما 8 تا سرمنو داری. 8*100=800 ...
بعد حالا برا تعیین مکان اون قسمت سفید. میام pos=val*100 قرارمیدم . pos مکان x اون شی سفید هست.
پس شد : هر وقت موس روی یکی از این سرمنو ها قرارگرفت شما میای این عمل محاسباتی رو انجام میدی pos=val*100
<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#main{
width: 100%;
height: 50px;
background-color:blue;
padding:0px;
}
#box{
left: 0px;
position: absolute;
width:50px;
height: 50px;
background-color: red;
}
.menu{
display: inline-block;
position: relative;
width:100px;
height:50px;
/*left:0;*/
background-color :yellow;
margin-right:10px;
}
</style>
</head>
<body>
<div id="main">
<div class="menu">0</div>
<div class="menu">1</div>
<div class="menu">2</div>
<div class="menu">3</div>
<div class="menu">4</div>
<div class="menu">5</div>
<div class="menu">6</div>
<div id="box"></div>
</div>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('.menu').each(function(){
$(this).on('mouseover',function(e){
var mleft=parseInt($(this).text() ,10 );
$('#box').animate({left:mleft*100+ (mleft+1)*10+25 });
});
});
});
</script>
</body>
</html>