利用angularjs1.4制作的簡易滑動門效果
更新時間：2017年02月28日 14:23:44 作者：歪脖醬
本文主要介紹了利用angularjs1.4制作的簡易滑動門效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
效果圖：(點擊'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 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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
本篇文章主要介紹了angular2系列之路由轉(zhuǎn)場動畫的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
在 Angular 中實現(xiàn)搜索關(guān)鍵字高亮示例
本篇文章主要介紹了在 Angular 中實現(xiàn)搜索關(guān)鍵字高亮示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
本篇文章主要介紹了詳解angular中的作用域及繼承，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Angular4.x通過路由守衛(wèi)進行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面(推薦)
這篇文章主要介紹了Angular4.x通過路由守衛(wèi)進行路由重定向，實現(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面,這個功能在網(wǎng)上商城項目上經(jīng)常會用到，下面小編給大家?guī)砹私鉀Q方法一起看看吧2018-05-05
Angular5.0 子組件通過service傳遞值給父組件的方法
這篇文章主要介紹了Angular5.0 子組件通過service傳遞值給父組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了關(guān)于 angularJS的一些用法的相關(guān)資料,需要的朋友可以參考下2017-11-11
淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定
這篇文章主要介紹了淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
AngularJS中的$watch()，$digest()和$apply()區(qū)分
這篇文章主要介紹了AngularJS中的$watch()，$digest()和$apply()區(qū)分，感興趣的朋友可以參考一下2016-04-04
淺談angular.js中實現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實現(xiàn)的。你可能會看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問題，其實它們在官方的文檔里都已經(jīng)回答了，但是我還是想把它們結(jié)合在一起來講2015-10-10
詳解Angular4中路由Router類的跳轉(zhuǎn)navigate
這篇文章主要介紹了詳解Angular4中路由Router類的跳轉(zhuǎn)navigate，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06