昨天下了一些jquery的小特效。心想如果每天看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">
$(document).ready(function(){
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可以讓他控制菜單樣式。原理一樣