• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 利用angularjs1.4制作的简易滑动门效果

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

作者:歪脖酱 字体:[增加 减小] 来源:互联网 时间:2017-05-11

歪脖酱通过本文主要向大家介绍了angularjs1.4下载,如图是利用滑动变阻器,利用电源 滑动变阻器,利用滑动变阻器,所示是利用滑动变阻器等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

效果图:(点击'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>
</div>

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11AngularJS监听路由变化的方法
  • 2017-05-11关于angular js_$watch监控属性和对象详解
  • 2017-05-11详解基于webpack和vue.js搭建开发环境
  • 2017-05-11angular 动态组件类型详解(四种组件类型)
  • 2017-05-11Angular2 路由问题修复详解
  • 2017-05-11JS实现页面打印功能
  • 2017-05-11d3.js入门教程之数据绑定详解
  • 2017-05-11微信小程序 JS动态修改样式的实现代码
  • 2017-05-11angularjs实现的前端分页控件示例
  • 2017-05-11Vue开发过程中遇到的疑惑知识点总结

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js eval函数使用,js对象和字符串互转实例
    • jquery中$.fn和图片滚动效果实现的必备知识总结
    • three.js绘制地球、飞机与轨迹的效果示例
    • 微信小程序实战之上拉(分页加载)效果(2)
    • jQuery快速高效制作网页交互特效
    • JS中使用 after 伪类清除浮动实例
    • 原生js实现焦点轮播图效果
    • 微信小程序组件 contact-button(客服会话按钮)详解及实例代码
    • JQuery 进入页面默认给已赋值的复选框打钩
    • 基于Vue实现timepicker

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有