当鼠标点击到<li></li>标签时，背景花瓣会跟着鼠标移动。当点击<li></li>时鼠标会定住，当鼠标移走的时候，花瓣会退回到上一次记录的位置。
样式如下：
源码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>花瓣导航</title> <style> *{ margin: 0; padding: 0; } body{ background: pink; } #box{ width: 800px; height: 42px; border-radius: 8px; position: relative; margin: 200px auto; background: rgba(0,0,0,0.7) url("img6/112.png") right center no-repeat; } ul{ list-style: none; position: relative; } li{ width: 83px; height: 42px; color:blue; font: 500 16px/42px sinsun; float: left; text-align: center; } span{ background-image: url("img6/11.png"); position: absolute; left: 0; top: 0; width: 83px; height: 42px; } </style> <script> window.onload=function(){ var liArr=document.getElementsByTagName("li"); var liWidth=liArr[0].offsetWidth; var span=document.getElementsByTagName("span")[0]; var count=0; //移动图片定位到li for(var i=0;i<liArr.length;i++){ liArr[i].index=i; liArr[i].onmouseover=function(){ animate(span,this.index*liWidth); } //鼠标移开 liArr[i].onmouseout=function(){ animate(span,count*liWidth); } //点击事件记录该功能 liArr[i].onclick=function(){ count=this.index; animate(span,count*liWidth); } } //定义动画 function animate(ele,target){ clearInterval(ele.timer); ele.timer=setInterval(function(){ var stept=(target-ele.offsetLeft)/10; stept>0?Math.ceil(stept):Math.floor(stept); ele.style.left=ele.offsetLeft+stept+"px"; if(Math.abs(target-ele.offsetLeft)<=Math.abs(stept)){ ele.style.left=target+"px"; clearInterval(ele.timer); } },18) } } </script> </head> <body> <div id="box"> <span></span> <ul> <li>兰花</li> <li>荷花</li> <li>梅花</li> <li>菊花</li> <li>莲花</li> <li>芙蓉</li> <li>牡丹</li> <li>玫瑰</li> </ul> </div> </body> </html>
