jquery 插件下载

引用：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）

 

 

?

< html  xmln = "http://www.w3.org/1999/xhtml" > < 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可以让他控制菜单样式。原理一样

转载于:https://www.cnblogs.com/sode/archive/2012/08/27/2658451.html