利用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 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 Javascript
详解Vue数据驱动原理
Nov 17 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 高手之路(一)
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
深入解析Python中的线程同步方法
2016/06/14 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python实现屏保计时器的示例代码
2018/08/08 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python 在局部变量域中执行代码
2020/08/07 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript