换了博客的第一篇博文

一个简单的滑动动态效果
css代码:

       <style type="text/css">     
          #div1
          {
             width: 200px;
             height: 100px;
              background: #ccc;
             position: absolute;
             left: -200px;
             position:absolute;
         }
         #button1
         {
             width: 30px;
             height: 90px;    
             right: -30px;
             position: absolute;
             top: 0px;
             text-align: center;
         }
         #div2{width: 200px;
             height: 100px;
              background: #ccc;
             position:absolute;
              top: 150px;
             left: -200px;}
         #button2{width: 30px;right: -30px;position: absolute;}
     </style>  

js代码:

 <script type="text/javascript">
     window.onload = function () 
     {
         var oDiv1 = document.getElementById('button1');
         var oDiv2 = document.getElementById('button2');
         if('oDiv1')
         {               
         oDiv1.onmousedown= function ()
          {
             shareMove(0);               
          }
          oDiv1.onclick= function ()
          {               
             shareMove(-200);
          }
         }
         else('oDiv2')
         {
             oDiv2.onmousedown= function ()
          {
              shareMove1(0);

          }
         oDiv2.onclick= function ()
          {
          shareMove1(-200);
          }
         }
     }
     var timer = null;
     function shareMove(end) {
        var oDiv1 = document.getElementById('div1');
         var speed = 0;
         if (oDiv1.offsetLeft < end) {       //根据DIV的offsetLeft距离判断DIV所要走的正负方向
            speed = 10;
       }
         else {
             speed = -10;
         }
        clearInterval(timer);           //在一个setInterval开始之前都要先清除之前的setInterval
         timer = setInterval(function () {
             if (oDiv1.offsetLeft == end) {      //根据参数判断DIV要走的距离
                 clearInterval(timer);
             }
             else {
                 oDiv1.style.left = oDiv1.offsetLeft + speed + 'px'      //DIV要走的距离
             }
         }, 30);
     }
     function shareMove1(end) {
        var oDiv2 = document.getElementById('div2');
         var speed = 0;
         if (oDiv2.offsetLeft < end) {       //根据DIV的offsetLeft距离判断DIV所要走的正负方向
            speed = 10;
       }
         else {
             speed = -10;
         }
        clearInterval(timer);           //在一个setInterval开始之前都要先清除之前的setInterval
         timer = setInterval(function () {
             if (oDiv2.offsetLeft == end) {      //根据参数判断DIV要走的距离
                 clearInterval(timer);
             }
             else {
                 oDiv2.style.left = oDiv2.offsetLeft + speed + 'px'      //DIV要走的距离
             }
         }, 30);
     }
<script>

html代码:

<div style="height:2000px; background-color:;">
    <div id="div1">
        <button id="button1">通知公告</button>
        <h4>fff</h4>       
    </div>
    <div id="div2">
        <button id="button2">友情连接</button>
        <h4>fff</h4>       
    </div>    
    fff
posted @ 2015-09-26 16:40  纸鸢&红豆·绿豆  阅读(120)  评论(0编辑  收藏  举报