js特效之“分享栏”

来源:互联网 发布:润飞rf2148软件下载 编辑:程序博客网 时间:2024/06/05 21:13

<html>
<head>
<title>无标题文档</title>
<style>
#div1{
 width:150px;
 height:300px;
 background:lime;
 position:absolute; 
 left:-150px;
 top:150px;
}
#div1 span{
 width:20px;
 height:60px;
 position:absolute;
 background:pink;
 right:-20px;
 top:110px;
}
</style>
<script>
 window.onload=function(){
  var oDiv=document.getElementById('div1');
  oDiv.onmouseover=function(){
   move(0);
  }
  oDiv.onmouseout=function(){
   move(-150);
  }
  var times;
  function move(iTarget){
   clearInterval(times);
   times=setInterval(function(){
    var speed;
    if(oDiv.offsetLeft < iTarget){
     speed=10;
    }
    else{
     speed=-10; 
    }
    if(oDiv.offsetLeft == iTarget){
     clearInterval(times);
    }
    else{
     oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
    }
        
   },30);
  }
 }
</script>
 
</head>
<body>
 <div id='div1'>
     <span>分享到</span>
<a href="http://www.baidu.com">百度</a>
    </div>
</body>

</html>

效果图:



原创粉丝点击