效果如下：

鼠标移动到箭头处会有动画效果的移动弹出框

 代码实现：

 function run(obj,long,callback){ clearInterval(obj.timer) obj.timer=setInterval(function(){     if(obj.offsetLeft==long){  window.clearInterval(obj.timer);  if(callback){      callback();  }     }else{  step=(long-obj.offsetLeft)/10  step=step>0?Math.ceil(step):Math.floor(step)  obj.style.left=obj.offsetLeft+step+'px';     } },20)    }

                    .out{    box-sizing: border-box;    position:absolute;    right:0;    top: 0;    width: 100px;    height: 40px;    background-color: rgb(106, 47, 200);    line-height: 40px;    padding-left: 36px;    color: aliceblue;    font-size: 25px;    z-index: 1;}.in{    box-sizing: border-box;    position: absolute;    left: 0;    top: 0;    width: 250px;    height: 40px;    background-color:rgb(106, 47, 200);    font-size: 17px;    line-height: 40px;    padding-left: 30px;    color: aliceblue;}.box{ position: absolute; right: 0; top: 0; width: 100px; height: 40px;}.father{ position: absolute; top: 300px; right: 0; top: 300px; width: 250px; height: 240px; overflow: hidden;}              
  
    
←
    
问题反馈
 
    
 var inner=document.querySelector('.in'); var out=document.querySelector('.out'); var box=document.querySelector('.box'); box.addEventListener('mouseenter',function(){    run(inner,-150,function(){ box.children[0].innerHTML='→'    }) }) box.addEventListener('mouseleave',function(){     run(inner,0,function(){ box.children[0].innerHTML='←'    }) })    

KTV音响网