|
<style type="text/css">
#ul1 li {
float:left;
list-style:none;
margin-left:5px;
font-size:12px;
}
#ul1 li a {
display:block;
padding:5px 9px;
background-color:#efef00;
text-decoration:none;
position:relative;
}
</style>
<script language="javascript">
var st
var n=0
function shack(who){
n++
if(n==1){document.getElementById(who).style.margin="-1px 0px 0px 0px"}
if(n==2){document.getElementById(who).style.margin="-2px 0px 0px 0px"}
if(n==3){document.getElementById(who).style.margin="-3px 0px 0px 0px"}
if(n==4){document.getElementById(who).style.margin="-3px 0px 0px 0px"}
if(n==5){document.getElementById(who).style.margin="-2px 0px 0px 0px"}
if(n==6){document.getElementById(who).style.margin="-1px 0px 0px 0px"}
st=setTimeout(function(){shack(who)},20)
if(n==6){n=0}
}
function stopshack(){
clearTimeout(st)
for(i=1;i<=5;i++){
document.getElementById("div"+i).style.margin="0px 0px 0px 0px"
}
n=0
}
</script>
<ul id="ul1">
<li onmouseover="shack('div1')" onmouseout="stopshack()"><a href="#"><div id="div1">连接文字</a></div></li>
<li onmouseover="shack('div2')" onmouseout="stopshack()"><a href="#"><div id="div2">连接文字</a></div></li>
<li onmouseover="shack('div3')" onmouseout="stopshack()"><a href="#"><div id="div3">连接文字</a></div></li>
<li onmouseover="shack('div4')" onmouseout="stopshack()"><a href="#"><div id="div4">连接文字</a></div></li>
<li onmouseover="shack('div5')" onmouseout="stopshack()"><a href="#"><div id="div5">连接文字</a></div></li>
</ul>
-------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
li {
list-style:none;
float:left;
font-size:12px;
margin-left:5px;
}
li div {
position:relative;
width:80px;
height:22px;
background:orange;
text-align:center
}
li div span {
position:absolute;
left:14px;
margin-top:4px;
}
</style>
<script language="javascript">
var n=14
var st,st1
function shackright(who){
document.getElementById(who).style.left=n+"px"
n++
st1=setTimeout( function(){ shackright(who) },10 )
if(n==26){
clearTimeout(st1);
shackleft(who)
}
}
function shackleft(who){
document.getElementById(who).style.left=n+"px"
n--
st=setTimeout( function(){ shackleft(who) },10 )
if(n==2){
clearTimeout(st);
shackright(who)
}
}
function stopshack(){
clearTimeout(st)
clearTimeout(st1)
for(i=1;i<=6;i++){
document.getElementById("span"+i).style.left="14px"
}
n=14
}
</script>
<ul>
<li onmouseover="shackleft('span1')" onmouseout="stopshack()"><div><span id="span1">文字导航</span></div></li>
<li onmouseover="shackleft('span2')" onmouseout="stopshack()"><div><span id="span2">文字导航</span></div></li>
<li onmouseover="shackleft('span3')" onmouseout="stopshack()"><div><span id="span3">文字导航</span></div></li>
<li onmouseover="shackleft('span4')" onmouseout="stopshack()"><div><span id="span4">文字导航</span></div></li>
<li onmouseover="shackleft('span5')" onmouseout="stopshack()"><div><span id="span5">文字导航</span></div></li>
<li onmouseover="shackleft('span6')" onmouseout="stopshack()"><div><span id="span6">文字导航</span></div></li>
</ul>
| 
