欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简单JS动画之分享框实现教程

程序员文章站 2022-10-25 14:36:41
用js实现最简单的动画,用setinterval(fun(),milltime); 其中fun()是每隔milltime毫秒执行一次的函数。 以下是简陋效果图,当鼠标在分享位置上时...

用js实现最简单的动画,用setinterval(fun(),milltime); 其中fun()是每隔milltime毫秒执行一次的函数。 以下是简陋效果图,当鼠标在分享位置上时,红色p将从边上慢慢向右展示,当鼠标离开分享位置时,红色p将慢慢向左隐藏

简单JS动画之分享框实现教程

详细代码:

    <body>
      <p id="p1" >
          <span id="share">分享</span>
      </p>
    </body>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    p{
        width: 200px;
        height: 200px;
        background-color: #f00;
        position: relative;
        left: -200px;
    }
    span{
        width: 30px;
        height: 50px;
        background-color: aqua;
        position: absolute;
        top: 70px;
        left: 200px;
        text-align: center;
    }
</style> 
 <script type="text/javascript"> 

      var p1 = document.getelementbyid("p1"); 

      var share = document.getelementbyid("share"); 

      var timer = null; 

      var speed = 0; 

      p1.onmouseover = function(){ 

          startmove(0); 

      } 

      p1.onmouseout = function(){ 

          startmove(-200); 

      } 

      var startmove = function(target) { 

          if(target >= 0){ 

              speed  = 10; 

          }else { 

              speed = -10; 

          } 

          clearinterval(timer); 

          timer = setinterval(function () { 

              if(p1.offsetleft == target){ 

                  clearinterval(timer); 

              }else { 

                  p1.style.left = p1.offsetleft + speed + "px"; 

              } 

          }, 30); 

      } 

</script>