利用angularjs1.4制作的简易滑动门效果

效果图：(点击'python'效果)

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" rel="external nofollow" rel="stylesheet">
 <title></title>
</head>
<body ng-app="app" ng-controller="magazine">
<div class="container" >
 <div class="row" >
  <div class="col-md-4 col-md-offset-4">
   <ul>
    <li class="pull-left" ng-click="toggle()"><a href="javascript:;" rel="external nofollow" rel="external nofollow" >jquery</a></li>
    <li class="pull-left" ng-click="toggle2()"><a href="javascript:;" rel="external nofollow" rel="external nofollow" >python</a></li>
   </ul>
  </div>
  <div class="col-md-6" ng-show="myvar">
   <p>我就是我</p>
  </div>
  <div class="col-md-6" ng-show="myvar2">
   <p>注意注意我变了</p>
  </div>
 </div>
</div>
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
 /**
 * app Module
 *
 * Description
 */
 angular.module('app', []).controller('magazine', ['$scope', function($scope){
 $scope.myvar = true;
 $scope.myvar2 = false;
 $scope.toggle = function () {
  $scope.myvar = true;
  $scope.myvar2 = false;
 }
 $scope.toggle2 = function () {
  $scope.myvar = false;
  $scope.myvar2 = true;
 }
 }])
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# angularjs # 滑动门效果 # 基于Angular.js实现的触摸滑动动画实例代码 # 详解angularJs中自定义directive的数据交互 # AngularJS中的Directive自定义一个表格 # 详解angular2采用自定义指令（Directive）方式加载jquery插件 # Angularjs使用directive自定义指令实现attribute继承的方法详解 # Angularjs自定义指令Directive详解 # angularjs利用directive实现移动端自定义软键盘的示例 # Angular.js通过自定义指令directive实现滑块滑动效果 # 就是我 # equiv # http # edge # Compatible # UA # width # content # device # scale # initial # css # alpha # grid # external # rel # href # link # cdn # bootstrap

返回目录在线咨询

上一篇：利用阿里云建站服务代理，怎样实现快速上线我的网站？
下一篇：网站制作本地环境怎么写,hubstudio怎么配置环境？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

利用angularjs1.4制作的简易滑动门效果

您的项目需求