利用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 UI-Draggable 参数集合
Jan 10 Javascript
js里的prototype使用示例
Nov 19 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
第一篇初识bootstrap
Jun 21 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 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
谈谈PHP语法(5)
2006/10/09 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
python如何生成各种随机分布图
2018/08/27 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
如何利用find命令查找文件
2016/11/18 面试题
入股协议书范本
2014/04/14 职场文书
会计学毕业生求职信
2014/06/25 职场文书
五一活动标语
2014/06/30 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
中秋节晚会开场白
2015/05/29 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
golang生成并解析JSON
2022/04/14 Golang
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android