引用：http://www.cnblogs.com/akak123/archive/2012/07/24/2606000.html#2433861
http://www.niutuku.com/js/201103/149943/
如果每天看1-2个jquery，1个月的积累也是很可观的。
今天晒一下我昨天的学习心得。
大致的效果图：
鼠标移动到哪个li ，滑动块就跟到那个区域。视觉效果不错。
主要思路：
要给li 的hover加事件。让他感知当前li的margin-left (left)
设置一个div（随便，只要是一个块，称为block）,定好他的位置，也就是在li的上层
然后在hover事件中，根据left调整block的left
思路很简单。晒代码（mycode）
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
head
>
<
title
>MyDemo</
title
>
<
script
type
=
"text/javascript"
src
=
"js/jquery-1.7.2.min.js"
></
script
>
<
script
type
=
"text/javascript"
> <
br
>
$(document).ready(function(){<
br
>
var wapper=$(".webwidget_menu_glide");
//固定block初始位置到current
var stay=$('li').filter('#current').offset();
$("#block").offset({left:stay.left,top:stay.top});
//鼠标经过事件绑定
$('.webwidget_menu_glide ul li').bind('hover',function(event){
var pos=$(event.target).offset();
var left=pos.left+'px';
$("#block").stop().animate({left:left},"fast"); //滑块速度可调
});
})
</
script
>
<
style
>
.webwidget_menu_glide{ width:600px; height:30px; background-color:red; margin:0 auto;}
.webwidget_menu_glide ul li{ width:100px; height:30px; float:left; list-style-type:none;}
.webwidget_menu_glide ul li a{ color:#000; width:100px; height:30px; float:left;}
#block{ width:100px; height:30px; float:left; background-color:green; position:absolute; margin-top:20px; opacity: 0.3;}
</
style
>
</
head
>
<
body
>
<
input
type
=
"button"
value
=
"change"
id
=
"btn"
/>
<
div
id
=
"block"
></
div
>
<
div
id
=
"webwidget_menu_glide3"
class
=
"webwidget_menu_glide"
>
<
ul
>
<
li
><
a
href
=
"#"
>Home</
a
></
li
>
<
li
id
=
"current"
><
a
href
=
"#"
>News</
a
></
li
>
<
li
><
a
href
=
"#"
>About</
a
></
li
>
<
li
><
a
href
=
"#"
>Contact</
a
></
li
>
<
li
><
a
href
=
"#"
>More...</
a
></
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
|
然后有几个注意点：
移动滑块的postion 不能为static。否则无法animate动态调整left值。
再查了点资料希望对迷惑的人有帮助：
1. position:static
所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。
一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。
#div-1 {
position:static;
}
2. position:relative
如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】
#div-1 {
position:relative;
top:20px;
left:-40px;
}
3. position:absolute
当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
当然我自己对jquery也不是很了解，慢慢学起。
这里晒下某网站的demo效果图
这是他的地址http://www.niutuku.com/js/201103/149943/demo.html
大家可以看看他的源码。写的好一些
和我的自己的差别就是他加很圆角样式。以及他的js可以让他控制菜单样式。原理一样
