利用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 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
js闭包实例汇总
Nov 09 Javascript
Ionic快速安装教程
Jun 03 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
JS搜狐面试题分析
Dec 16 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
vue使用vue-cli快速创建工程
Jul 28 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 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 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP时间函数使用详解
2019/03/21 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
详解python中asyncio模块
2018/03/03 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
加入学生会演讲稿
2014/04/24 职场文书
面试自我评价范文
2014/09/17 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
先进典型事迹材料
2014/12/29 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle