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


Posted in Javascript onFebruary 28, 2017

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

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

代码如下:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
js 转义字符及URI编码详解
Feb 28 #Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 #Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 #Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 #Javascript
原生js实现可拖拽效果
Feb 28 #Javascript
javascript 面向对象function详解及实例代码
Feb 28 #Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
Phpbean路由转发的php代码
2008/01/10 PHP
php后门URL的防范
2013/11/12 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
详解JS函数stack size计算方法
2018/06/18 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python基础教程之异常详解
2019/01/10 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
教师年终个人自我评价
2013/10/04 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
销售演讲稿范文
2014/01/08 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
财务总监岗位职责
2014/03/07 职场文书
法人任命书范本
2014/06/04 职场文书
2014高考励志标语
2014/06/05 职场文书
小学教师节活动总结
2015/03/20 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
MySQL创建管理子分区
2022/04/13 MySQL