日度归档:2020年5月2日

javascript 搜索时如何防止抖动呢?


摘要:
下文讲述js中防抖动的方法说明,如下所示:

防抖动: 用于避免输入指定内容时,快速点击鼠标出现了多次提交后台的效果,那么我们在前台如何避免这种现象的发生呢?

实现思路:
使用setTimeout函数指定等待指定秒后执行搜索函数

如下所示:

  <script>
  //防抖动时间间隔设置为1秒
   var t = null;
   function search(){
    clearTimeout(t);
    t = setTimeout(() => {
        //提交后台代码
    },1000)
  }
 
  </script>

如何使用css实现鼠标放在图片上时”图片反转”呢?


摘要:
下文讲述使用css代码实现图片反转的方法分享,如下所示:


实现思路:
使用css3 中transform属性对图片进行旋转操作,达到图片反转效果

例:
使用css实现一个图片反转的效果

 <html>
<head>
    <meta charset="UTF-8">
     <title>猫猫教程(www.maomao365.com)
     ---图片反转效果
   </title>
    <style>
        .rotate-container:hover .flipper {
            transform: rotateY(180deg);
        }
        .rotate-container,
        .front  {
            width: 320px;
        }
        .rotate-container {
            perspective: 1000;
            transform-style: preserve-3d;
        }
        .flipper {
            transition-duration: 1s;
            transform-style: preserve-3d;
            position: relative;
        }
        .front {
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<p>
  maomao365.com <br />
  图片反转示例分享
</p>
<hr />
    <div class="rotate-container">
        <div class="flipper">
            <div class="front">
                <img src="http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png" alt="">
            </div> 
        </div>
    </div>
</body>
</html>
css实现图片反转示例

css实现图片反转示例

如何使用css实现div横向排列呢?


摘要:
下文讲述使用css代码将div进行横向排列的方法分享,如下所示:

例:
使用css实现一个div三栏布局的示例分享

<html>
  <head>
    <meta charset='utf-8' />
    <title>三列布局</title>
    <style>
        div{
          color:white;
          font-weight:bold;
       }      
        .container{
            overflow: hidden;
        }
        .container > div{
            float: left;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
            word-break: break-all;
            width:150px;
        }
        .left{
          background:red;
        }
        .middle{
          background:orange;   
        }
        .right {
          background:blue;   
        }
    </style>
  </head>
  <body>
<p>
maomao365.com <br />
css实现div横向排列的示例分享
</p>
<hr />
<div class="container">
    <div class="left">div---1</div>
    <div class="middle">div-2</div>
    <div class="right">div-3</div>
</div>
  </body>
</html>
css 实现div三栏布局的示例分享

css 实现div三栏布局的示例分享