zoukankan      html  css  js  c++  java
  • 换了博客的第一篇博文

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

           <style type="text/css">     
              #div1
              {
                  200px;
                 height: 100px;
                  background: #ccc;
                 position: absolute;
                 left: -200px;
                 position:absolute;
             }
             #button1
             {
                  30px;
                 height: 90px;    
                 right: -30px;
                 position: absolute;
                 top: 0px;
                 text-align: center;
             }
             #div2{ 200px;
                 height: 100px;
                  background: #ccc;
                 position:absolute;
                  top: 150px;
                 left: -200px;}
             #button2{ 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
    
    努力吧,为了媳妇儿,为了家。。。
  • 相关阅读:
    基于 mockm 的一款 HBuilderX 插件
    css 加载中省略号动画
    定时获取远程文件并存储更新记录
    跨域实例和解决方案
    接口数据总是返回 null 如何回馈和处理
    get 请求中如何携带 body 参数
    看起来像一个 textarea 的 div
    js 高精度运算
    nodejs 服务终端使用 nodemon 运行脚本时实时输出
    解决 vue-cli3 多入口打包 BASE_URL is not defined
  • 原文地址:https://www.cnblogs.com/jlj9520/p/4840936.html
Copyright © 2011-2022 走看看