引用: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{ 600px; height:30px; background-color:red; margin:0 auto;} .webwidget_menu_glide ul li{ 100px; height:30px; float:left; list-style-type:none;} .webwidget_menu_glide ul li a{ color:#000; 100px; height:30px; float:left;} #block{ 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; 200px; }
当然我自己对jquery也不是很了解,慢慢学起。
这里晒下某网站的demo效果图
这是他的地址http://www.niutuku.com/js/201103/149943/demo.html
大家可以看看他的源码。写的好一些
和我的自己的差别就是他加很圆角样式。以及他的js可以让他控制菜单样式。原理一样