美文网首页html5Web前端Web前端之路
动态效果输入框制作(angularjs和原生js两种实现)

动态效果输入框制作(angularjs和原生js两种实现)

作者: MakingChoice | 来源:发表于2016-01-04 22:12 被阅读1793次

    最近感冒了，导致好几天没有更新博客，所以来更新了一个刚看到的一个动态变化的输入框，先来看一下效果。

    这里是界面，可以直接点进去看一下,http://www.bandenghui.com/user/login

    我们来看一下：

    图一：

    图一.PNG
    刚开始没有给输入框添加焦点之前，没有任何效果。然后点击其中任何一个，焦点就会触发一个动画，动画的结果见图二： 图二.png

    中间的输入登录密码，会自动添加到顶部（原谅我没有截取到动画过程的图片），具体可以看一下网站。
    我测试了一下，这样的效果只有高级浏览器支持（IE只有IE10、IE11、Edge支持）。
    下面我来把代码贴上来，原理很简单，就是通过事件触发类名的增加和删除。具体的动画由CSS3来实现，这也是为什么低级浏览器不支持的原因。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .demo{
      border: 1px solid gray;
      width: 300px;
      height: 200px;
      position: relative;
      left: 200px;
      top: 200px;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }
    .demo input{
      width: 200px;
      height: 100px;
      position: absolute;
      left: 50px;
      top: 50px;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }
    .demo label{
      position: absolute;
      top: 100px;
      left:80px;
      font-size: 14px;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }
    .activeDemo{
      border: 1px #fd715a solid;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .activeInput{
      border: 1px #fd715a solid;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .activeLabel{
      font-size: 10px;
      color: #fd715a;
      background: white;
      -webkit-transform: translate(-20px, -58px);
      -moz-transform: translate(-20px, -58px);
      -ms-transform: translate(-20px, -58px);
      -o-transform: translate(-20px, -58px);
      transform: translate(-20px, -58px);
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3 linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }

  </style>
</head>
<body>
  <div class="demo">
    <input type="text" id="inputDemo"/>
    <label for="inputDemo">请输入内容</label>
  </div>
</body>
<script>
  var addEvent= function (obj,event,callback) {
    if(obj.addEventListener){
      obj.addEventListener(event,callback)
    }else if(obj.attachEvent){
      obj.attachEvent('on'+event,callback)
    }
  };
  var demo=document.querySelector(".demo");

  var input=document.querySelector("#inputDemo");
  var label=document.querySelector(".demo label");
  addEvent(input,"focus", function () {
    demo.className+=" activeDemo";
    this.className+=" activeInput";
    label.className+=" activeLabel";
  });
  addEvent(input,'blur', function () {
    this.className=this.className.replace(/\s*activeInput\s*/,' ');
    label.className=label.className.replace(/\s*activeLabel\s*/,' ');
    demo.className=demo.className.replace(/\s*activeDemo\s*/,' ');
  })
</script>
</html>

    下面是用Angular实现的一个简单的效果，原理很简单，就是在指令中通操作DOM来实现动画。

    <!DOCTYPE html>
<html lang="en" ng-app="formAnimation">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="lib/angular.min.js" type="text/javascript"></script>
  <script src="lib/angular-animate.js" type="text/javascript"></script>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .container{
      width: 445px;
      height: 370px;
      border-left: 10px solid #d4d4d4;
      position: relative;
      left: 100px;
      top: 100px;
    }
    .container input{
      position: absolute;
      top: 100px;
      left: 25px;
      height: 40px;
      width: 385px;
    }
    .container span{
      width: 80px;
      height: 25px;
      font-size: 10px;
      background: rgb(237,97,83);
      color: white;
      position: absolute;
      left: 300px;
      top: 109px;
      line-height: 25px;
      text-align: center;
    }
    .container .labelStyle{
      position: absolute;
      left: 45px;
      top: 115px;
      font-size: 14px;
      color: #929292;
      z-index: 999;
      font: "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .inputActive{
      border: 2px solid rgb(237,97,90);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .labelActive{
      position: absolute;
      left: 45px;
      top: 115px;
      z-index: 999;
      background: white;
      border: 2px solid white;
      color: rgb(237,97,90);
      font-size: 10px;
      -webkit-transform: translate(-10px, -23px);
      -moz-transform: translate(-10px, -23px);
      -ms-transform: translate(-10px, -23px);
      -o-transform: translate(-10px, -23px);
      transform: translate(-10px, -23px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
  </style>
</head>
<body ng-controller="formAnimationController">
  <form action="" class="container" form-animation>
    <label for="inputDemo" class="labelStyle">请输入内容</label>
    <input type="text" id="inputDemo" />
    <span>请填写内容</span>
  </form>
</body>
<script>
  angular.module('formAnimation',[])
    .controller('formAnimationController', function () {

    })
    .directive('formAnimation',['$animate', function ($animate) {
      return {
        restrict:'EA',
        link: function (scope, element, attr) {
          element.find("input").on('focus', function () {
            element.find("input").addClass("inputActive");
            element.find("label").removeClass("labelStyle").addClass("labelActive")
          });
          element.find("input").on('blur', function () {
            element.find("input").removeClass("inputActive");
            element.find("label").removeClass("labelActive").addClass("labelStyle");
          })
        }
      }
    }])
  
</script>
</html>

    又来填坑里，一写又折腾到夜里两点了。。。。。

    上面写的那个太不完美了，只是体现了一下实现的方式，晚上我有时间，用Angular自带的form表单验证又写了一遍，这次完全可以独立出来用来，还可以进一步封装成指令。

    下面是效果图，具体细节没有仔细调整，不过已经用AngularJS实现了功能，具体的效果，大家可以参照UI，调节CSS样式。

    图三.PNG
    不多说了，先放代码，以后来解释，睡觉去了。。。。 
    <!DOCTYPE html>
<html lang="en" ng-app="formApp">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="lib/angular.min.js" type="text/javascript"></script>
  <script src="lib/angular-animate.js" type="text/javascript"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      position: relative;
      left: 200px;
      top: 100px;
      height: 365px;
      width: 445px;
      border-left: 10px solid #f6f6f6;
    }
    .container .spanSubmit{
      font-size: 18px;
      color: black;
      position: absolute;
      left: 30px;
      top: 35px;
    }
    .container .labelOne{
      position: absolute;
      left: 45px;
      top: 105px;
      font-size: 14px;
      color: rgb(176,176,176);
      z-index: 999;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }


    .container .inputOne{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 90px;
      border: 1px solid rgb(233,233,233);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .container .spanOne{
      position: absolute;
      left: 325px;
      top: 105px;
      width: 80px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      background: rgb(273,97,83);
      color: white;
    }
    .container .spanOneRight{
      position: absolute;
      left: 295px;
      top: 105px;
      width: 110px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      background: rgb(273,97,83);
      color: white;
    }

    .container .labelTwo{
      position: absolute;
      left: 45px;
      top: 170px;
      font-size: 14px;
      color: rgb(176,176,176);
      z-index: 999;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .container .inputTwo{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 155px;
      border: 1px solid rgb(233,233,233);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .container .spanTwo{
      position: absolute;
      left: 325px;
      top: 170px;
      width: 80px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      background: rgb(273,97,83);
      color: white;
    }
    .container .spanTwoRight{
      position: absolute;
      left: 295px;
      top: 170px;
      width:110px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      background: rgb(273,97,83);
      color: white;
    }
    .labelOneActive{
      position: absolute;
      left: 45px;
      top: 105px;
      font-size: 10px;
      color: rgb(255, 255, 255);
      background: rgb(273,97,83);
      width: 65px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      z-index: 999;
      -webkit-transform: translate(-10px, -22px);
      -moz-transform: translate(-10px, -22px);
      -ms-transform: translate(-10px, -22px);
      -o-transform: translate(-10px, -22px);
      transform: translate(-10px, -22px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .labelOneRight{
      position: absolute;
      left: 45px;
      top: 105px;
      font-size: 10px;
      color: rgb(176,176,176);
      background:rgb(255, 255, 255);
      width: 65px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      z-index: 999;
      -webkit-transform: translate(-10px, -22px);
      -moz-transform: translate(-10px, -22px);
      -ms-transform: translate(-10px, -22px);
      -o-transform: translate(-10px, -22px);
      transform: translate(-10px, -22px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }

    .inputOneActive{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 90px;
      border: 1px solid rgb(273,97,83);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }

    .inputOneRight{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 90px;
      border: 1px solid rgb(273,97,83);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }

    .labelTwoActive{
      position: absolute;
      left: 45px;
      top: 170px;
      font-size: 10px;
      color: rgb(255, 255, 255);
      background: rgb(273,97,83);
      width: 65px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      z-index: 999;
      -webkit-transform: translate(-10px, -22px);
      -moz-transform: translate(-10px, -22px);
      -ms-transform: translate(-10px, -22px);
      -o-transform: translate(-10px, -22px);
      transform: translate(-10px, -22px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .labelTwoRight{
      position: absolute;
      left: 45px;
      top: 170px;
      font-size: 10px;
      color: rgb(176,176,176);
      background:rgb(255, 255, 255);
      width: 65px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      z-index: 999;
      -webkit-transform: translate(-10px, -22px);
      -moz-transform: translate(-10px, -22px);
      -ms-transform: translate(-10px, -22px);
      -o-transform: translate(-10px, -22px);
      transform: translate(-10px, -22px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .inputTwoActive{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 155px;
      border: 1px solid rgb(273,97,83);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .inputTwoRight{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 155px;
      border: 1px solid rgb(273,97,83);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
  </style>
</head>
<body ng-controller="formController">
<form action="" class="container" name="formName" ng-init="isInputOneBlurred=true;flagSpan1_1=true;isInputTwoBlurred=true;flagSpan2_1=true">
  <span class="spanSubmit">登录</span>
  <label for="inputOne" ng-class="{'labelOne':isInputOneBlurred,'labelOneActive':isInputOneFocused ,'labelOneRight':inputOneRight}">请输入内容</label>
  <input type="email" name="email" ng-model="email" id="inputOne" ng-class="{'inputOne':isInputOneBlurred,'inputOneActive':isInputOneFocused,'inputOneRight':inputOneRight}" ng-focus="inputFun1()" ng-blur="inputFun1Opposite()"/>
  <span class="spanOne" ng-show="flagSpan1_1">请输入内容</span>
  <span class="spanOneRight" ng-show="flagSpan1_2">请输入正确的内容</span>

  <label for="inputTwo" ng-class="{'labelTwo':isInputTwoBlurred ,'labelTwoActive':isInputTwoFocused,'labelTwoRight':inputTwoRight}">请输入内容</label>
  <input type="text" name="text" ng-model="text" id="inputTwo" ng-minlength="6" ng-maxlength="12" ng-class="{'inputTwo':isInputTwoBlurred,'inputTwoActive':isInputTwoFocused,'inputTwoRight':inputTwoRight}" ng-focus="inputFun2()" ng-blur="inputFun2Opposite()"/>
  <span class="spanTwo" ng-show="flagSpan2_1">请输入内容</span>
  <span class="spanTwoRight" ng-show="flagSpan2_2">请输入正确的内容</span>
</form>
</body>
<script>
  angular.module('formApp',[])
    .controller('formController', function ($scope) {
      $scope.inputFun1= function () {
        $scope.isInputOneBlurred=false;
        $scope.isInputOneFocused=true;
      };
      $scope.inputFun1Opposite= function () {
        $scope.isInputOneBlurred=true;
        $scope.isInputOneFocused=false;
        //验证正确并且，通过修改过
        if($scope.formName.email.$valid && $scope.formName.email.$dirty){
          //消除span的提示信息
          $scope.flagSpan1_1=false;
          $scope.flagSpan1_2=false;
          //消除input样式
          $scope.isInputOneBlurred=false;
          $scope.isInputOneFocused=false;
          //验证正确的样式
          $scope.inputOneRight=true;
        }
        if($scope.formName.email.$invalid && $scope.formName.email.$dirty){
          //消除span的提示信息
          $scope.flagSpan1_1=false;
          $scope.flagSpan1_2=true;
          //消除input样式
          $scope.isInputOneBlurred=false;
          $scope.isInputOneFocused=true;
        }
        //当输入框值为空的时候
        if($scope.email==''){
          //先清空以前设置的样式
          $scope.inputOneRight=false;

          $scope.isInputOneBlurred=true;
          $scope.isInputOneFocused=false;

          $scope.flagSpan1_1=true;
          $scope.flagSpan1_2=false;
        }
      };
      $scope.inputFun2= function () {
        $scope.isInputTwoBlurred=false;
        $scope.isInputTwoFocused=true;
      };
      $scope.inputFun2Opposite= function () {
        $scope.isInputTwoBlurred=true;
        $scope.isInputTwoFocused=false;
        if($scope.formName.text.$valid && $scope.formName.text.$dirty){
          //消除span的提示信息
          $scope.flagSpan2_1=false;
          $scope.flagSpan2_2=false;
          //消除input样式
          $scope.isInputTwoBlurred=false;
          $scope.isInputTwoFocused=false;
          //验证正确的样式
          $scope.inputTwoRight=true;
        }
        if($scope.formName.text.$invalid && $scope.formName.text.$dirty){
          //消除span的提示信息
          $scope.flagSpan2_1=false;
          $scope.flagSpan2_2=true;
          //消除input样式
          $scope.isInputTwoBlurred=false;
          $scope.isInputTwoFocused=true;
        }
        if($scope.text==''){
          //先清空以前设置的样式
          $scope.inputTwoRight=false;

          $scope.isInputTwoBlurred=true;
          $scope.isInputTwoFocused=false;

          $scope.flagSpan2_1=true;
          $scope.flagSpan2_2=false;
        }
      }
    })
</script>
</html>

    相关文章

      网友评论

      • Q丁:提个意见，我输入账号后，上面还是请输入账户，是不是当用户输入账户的时候这个提示消失，否则用户会困惑，我不是已经输入了账户，怎么还提醒我输入账户
        MakingChoice:@Q丁 实际情况会根据颜色变化来进行提示的，其实现在这里主要为了体现Angularjs 内部封装的form 指令的一些内容。比如scope.formname.text.$invalid、scope.formname.text.$dirty、scope.formname.text.$valid等等这样的内容。
      • 249efa81dd6e:AngularJS代码好长
        MakingChoice:@249efa81dd6e 主要是根据ng-modal来验证，长的话可以封装到一个具体的服务里。

      本文标题：动态效果输入框制作(angularjs和原生js两种实现)

      本文链接：https://www.haomeiwen.com/subject/vkjahttx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      html5

      Web前端

      Web前端之路

      Web 前端开发

      关于我们|服务条款|联系我们|动态效果输入框制作(angularjs和原生js两种实现)|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！