项目遇到做个地区选择的滑动二级菜单，要通过鼠标移动地区的个数，来控制对应内容的外上高度，有个方便的方法及缺点说一下

HTML:

<div class="content" style="height: 150px;overflow: hidden;text-align: center">
<div class="item" >
<div>
<h3 style="color: #FFF"><a href="">重庆</a></h3>
</div>
<div id="a" class="product-wrap posone" style="min-width: 400px;margin-top:-30px;height: 650px;background-color: #FFF">
<!--名片-->

<div class="cf">
<div class="fl wd252 pr20">
<h2><a href=" ">衣服3</a></h2>
</div>
</div>
</div>
</div>
<div class="item" >
<div>
<h3 style="color: #FFF">重庆</h3>
</div>
<div id="a" class="product-wrap posone" style="max-width: 200px;margin-top:-30px;height: 650px;background-color: #FFF">
<!--名片-->

<div class="cf">
<div class="fl wd252 pr20" >
<h2><a href=" ">衣服1</a></h2>
</div>
</div>
</div>
</div>
<div class="item" >
<div>
<h3 style="color: #FFF"><a href="">重庆</a></h3>
</div>
<div id="a" class="product-wrap posone" style="min-width: 400px;margin-top:-30px;height: 650px;background-color: #FFF">
<!--名片-->

<div class="cf">
<div class="fl wd252 pr20">
<h2><a href=" ">衣服2</a></h2>
</div>
</div>
</div>
</div>
<div class="item" >
<div>
<h3 style="color: #FFF"><a href="">重庆33</a></h3>
</div>
<div
class="product-wrap posone" style="min-width: 400px;margin-top:-30px;height: 650px;background-color: #FFF">
<!--名片-->

<div class="cf">
<div class="fl wd252 pr20">
<h2><a href=" ">衣服33</a></h2>
</div>
</div>
</div>
</div>
</div>

<!--遍历地区条数，根据焦点所在item个数改变 .product-wrap的外上高度；fast控制队列数or速度？-->
<script type="text/javascript">
var ps=$(".content .item");
ps.each(function(index,el){
$(this).on("mouseenter",function(){
/* console.log(index);
在控制台显示位数*/

$(".product-wrap").animate({marginTop:(index+1)*26+"px"}, "fast",function(){
self._chat_frame_min = 1;
});
 /* 其实正常不用（index+1）*26，如果你的item有高度的话，直接index+“px”就可以了*/
});
});</script>

1.首先通过Jq获取content下的所有item子节点

2.用each遍历，其中index 即item节点的位置数(从0 开始)

3.通过this   mouseenter执行鼠标经过item所对应的函数

重点来啦！animate方法

4.

语法 

$(selector).animate(styles,speed,easing,callback)

5.marginTop 方法，支持数字字母拼接

最后

以上就是淡然柜子为你收集整理的项目遇到做个地区选择的滑动二级菜单，要通过鼠标移动地区的个数，来控制对应内容的外上高度，有个方便的方法及缺点说一下的全部内容，希望文章能够帮你解决项目遇到做个地区选择的滑动二级菜单，要通过鼠标移动地区的个数，来控制对应内容的外上高度，有个方便的方法及缺点说一下所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。