您的位置:首页 > Web前端 > AngularJS

angularjs css_带有AngularJS和CSS3的照片库

2020-08-06 04:29 1016 查看

angularjs css

Photo Gallery with AngularJS and CSS3 Today I will show you the process of creating photo slider with AngularJS and CSS3. The slider itself is not very complicated, but it will have a unique 3D effect when we turn the slides. During of the creation our gallery – we will use AngularJS v1.2. This framework will help us create the HTML markup and the turning slides mechanism. We will have two buttons to switch slides back and forth, as well as a small panel with thumbnails to switch immediately to a desired slide.

使用AngularJS和CSS3的图片库今天,我将向您展示使用AngularJS和CSS3创建照片滑块的过程。 滑块本身并不是很复杂,但是当我们旋转滑块时,它将具有独特的3D效果。 在创建我们的库期间–我们将使用AngularJS v1.2。 该框架将帮助我们创建HTML标记和翻转幻灯片机制。 我们将有两个按钮来回切换幻灯片,还有一个带有缩略图的小面板可立即切换到所需的幻灯片。

现场演示

步骤1. HTML (Step 1. HTML)

First at all we have to prepare a proper header (with including all necessary resources):

首先,我们必须准备一个适当的头文件(包括所有必要的资源):

index.html (index.html)

<!DOCTYPE html>
<html ng-app="example366">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Photo Gallery with AngularJS and CSS3 | Script Tutorials</title>
<meta name="description" content="Photo Gallery with AngularJS and CSS3 - demo page">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- add styles -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- add javascripts -->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-touch.min.js"></script>
<script src="js/app.js"></script>
</head>
<!DOCTYPE html>
<html ng-app="example366">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Photo Gallery with AngularJS and CSS3 | Script Tutorials</title>
<meta name="description" content="Photo Gallery with AngularJS and CSS3 - demo page">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- add styles -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- add javascripts -->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular-touch.min.js"></script>
<script src="js/app.js"></script>
</head>
[/code]

This is rather ordinary header: different meta infos, styles and javascripts. Now – the slider itself:

这是相当普通的标头:不同的元信息,样式和javascript。 现在–滑块本身:

<body ng-controller="MainCtrl">
<header>
<a href="https://www.script-tutorials.com/demos/366/index.html" class="logo"><img src="images/logo.png" /></a>
</header>
<!-- slider container -->
<div class="container slider">
<!-- enumerate all photos -->
<img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" />
<!-- prev / next controls -->
<a class="arrow prev" href="#" ng-click="showPrev()"></a>
<a class="arrow next" href="#" ng-click="showNext()"></a>
<!-- extra navigation controls -->
<ul class="nav">
<li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}">
<img src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" />
</li>
</ul>
</div>
</body>
<body ng-controller="MainCtrl">
<header>
<a href="https://www.script-tutorials.com/demos/366/index.html" class="logo"><img src="images/logo.png" /></a>
</header>
<!-- slider container -->
<div class="container slider">
<!-- enumerate all photos -->
<img ng-repeat="photo in photos" class="slide" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{photo.src}}" />
<!-- prev / next controls -->
<a class="arrow prev" href="#" ng-click="showPrev()"></a>
<a class="arrow next" href="#" ng-click="showNext()"></a>
<!-- extra navigation controls -->
<ul class="nav">
<li ng-repeat="photo in photos" ng-class="{'active':isActive($index)}">
<img src="{{photo.src}}" alt="{{photo.desc}}" title="{{photo.desc}}" ng-click="showPhoto($index);" />
</li>
</ul>
</div>
</body>
[/code]

In the beginning, we indicated the main controller (for the <body>): MainCtrl. Then, to enumerate all the given photos, we used the following technique: ng-repeat="photo in photos". This allowed us to create multiple images and thumbnails for our navigation bar. To bind the onclick event, we used ‘ng-click’ event attribute. AngularJS also allows us to bind swipe actions (for mobile devices): ‘ng-swipe-left’ and ‘ng-swipe-right’.

首先,我们指出了主控制器(对于<body>):MainCtrl。 然后,要枚举所有给定的照片,我们使用以下技术:ng-repeat =“照片中的照片”。 这使我们可以为导航栏创建多个图像和缩略图。 为了绑定onclick事件,我们使用了“ ng-click”事件属性。 AngularJS还允许我们绑定滑动操作(对于移动设备):“ ng-swipe-left”和“ ng-swipe-right”。

步骤2. CSS (Step 2. CSS)

All styles are divided into three sections: styles for the slider and its slides, styles for the navigation arrows and styles for the thumbnail navigation bar:

所有样式均分为三个部分:滑块及其幻灯片的样式,导航箭头的样式和缩略图导航栏的样式:

css / style.css (css/style.css)

.arrow {
cursor: pointer;
display: block;
height: 64px;
margin-top: -35px;
outline: medium none;
position: absolute;
top: 50%;
width: 64px;
z-index: 5;
}
.arrow.prev {
background-image: url("../images/prev.png");
left: 20px;
opacity: 0.2;
transition: all 0.2s linear 0s;
}
.arrow.next {
background-image: url("../images/next.png");
opacity: 0.2;
right: 20px;
transition: all 0.2s linear 0s;
}
.arrow.prev:hover{
opacity:1;
}
.arrow.next:hover{
opacity:1;
}
.nav {
bottom: -4px;
display: block;
height: 48px;
left: 0;
margin: 0 auto;
padding: 1em 0 0.8em;
position: absolute;
right: 0;
text-align: center;
width: 100%;
z-index: 5;
}
.nav li {
border: 5px solid #AAAAAA;
border-radius: 5px;
cursor: pointer;
display: inline-block;
height: 30px;
margin: 0 8px;
position: relative;
width: 50px;
}
.nav li.active {
border: 5px solid #FFFFFF;
}
.nav li img {
width: 100%;
}
.slider {
border: 15px solid #FFFFFF;
border-radius: 5px;
height: 500px;
margin: 20px auto;
position: relative;
width: 800px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.slide {
position: absolute;
top: 0;
left: 0;
}
.slide.ng-hide-add {
opacity:1;
-webkit-transition:1s linear all;
-moz-transition:1s linear all;
-o-transition:1s linear all;
transition:1s linear all;
-webkit-transform: rotateX(50deg) rotateY(30deg);
-moz-transform: rotateX(50deg) rotateY(30deg);
-ms-transform: rotateX(50deg) rotateY(30deg);
-o-transform: rotateX(50deg) rotateY(30deg);
transform: rotateX(50deg) rotateY(30deg);
-webkit-transform-origin: right top 0;
-moz-transform-origin: right top 0;
-ms-transform-origin: right top 0;
-o-transform-origin: right top 0;
transform-origin: right top 0;
}
.slide.ng-hide-add.ng-hide-add-active {
opacity:0;
}
.slide.ng-hide-remove {
-webkit-transition:1s linear all;
-moz-transition:1s linear all;
-o-transition:1s linear all;
transition:1s linear all;
display:block!important;
opacity:0;
}
.slide, .slide.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
.arrow {
cursor: pointer;
display: block;
height: 64px;
margin-top: -35px;
outline: medium none;
position: absolute;
top: 50%;
width: 64px;
z-index: 5;
}
.arrow.prev {
background-image: url("../images/prev.png");
left: 20px;
opacity: 0.2;
transition: all 0.2s linear 0s;
}
.arrow.next {
background-image: url("../images/next.png");
opacity: 0.2;
right: 20px;
transition: all 0.2s linear 0s;
}
.arrow.prev:hover{
opacity:1;
}
.arrow.next:hover{
opacity:1;
}
.nav {
bottom: -4px;
display: block;
height: 48px;
left: 0;
margin: 0 auto;
padding: 1em 0 0.8em;
position: absolute;
right: 0;
text-align: center;
width: 100%;
z-index: 5;
}
.nav li {
border: 5px solid #AAAAAA;
border-radius: 5px;
cursor: pointer;
display: inline-block;
height: 30px;
margin: 0 8px;
position: relative;
width: 50px;
}
.nav li.active {
border: 5px solid #FFFFFF;
}
.nav li img {
width: 100%;
}
.slider {
border: 15px solid #FFFFFF;
border-radius: 5px;
height: 500px;
margin: 20px auto;
position: relative;
width: 800px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.slide {
position: absolute;
top: 0;
left: 0;
}
.slide.ng-hide-add {
opacity:1;
-webkit-transition:1s linear all;
-moz-transition:1s linear all;
-o-transition:1s linear all;
transition:1s linear all;
-webkit-transform: rotateX(50deg) rotateY(30deg);
-moz-transform: rotateX(50deg) rotateY(30deg);
-ms-transform: rotateX(50deg) rotateY(30deg);
-o-transform: rotateX(50deg) rotateY(30deg);
transform: rotateX(50deg) rotateY(30deg);
-webkit-transform-origin: right top 0;
-moz-transform-origin: right top 0;
-ms-transform-origin: right top 0;
-o-transform-origin: right top 0;
transform-origin: right top 0;
}
.slide.ng-hide-add.ng-hide-add-active {
opacity:0;
}
.slide.ng-hide-remove {
-webkit-transition:1s linear all;
-moz-transition:1s linear all;
-o-transition:1s linear all;
transition:1s linear all;
display:block!important;
opacity:0;
}
.slide, .slide.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
[/code]

In order to achieve this beautiful 3D transition effects between slides – we used CSS3 transition effects with rotateX, rotateY and preserve-3d for the parent element

为了在幻灯片之间实现漂亮的3D过渡效果–我们将CSS3过渡效果与rotateX,rotateY和preserve-3d用作父元素

步骤3. JavaScript (Step 3. JavaScript)

This is the main AngularJS application controller:

这是主要的AngularJS应用程序控制器:

js / app.js (js/app.js)

'use strict';
angular.module('example366', ['ngAnimate', 'ngTouch'])
.controller('MainCtrl', function ($scope) {
// Set of Photos
$scope.photos = [
{src: 'http://farm9.staticflickr.com/8042/7918423710_e6dd168d7c_b.jpg', desc: 'Image 01'},
{src: 'http://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
{src: 'http://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
{src: 'http://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
{src: 'http://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
{src: 'http://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
];
// initial image index
$scope._Index = 0;
// if a current image is the same as requested image
$scope.isActive = function (index) {
return $scope._Index === index;
};
// show prev image
$scope.showPrev = function () {
$scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
};
// show next image
$scope.showNext = function () {
$scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
};
// show a certain image
$scope.showPhoto = function (index) {
$scope._Index = index;
};
});
'use strict';
angular.module('example366', ['ngAnimate', 'ngTouch'])
.controller('MainCtrl', function ($scope) {
// Set of Photos
$scope.photos = [
{src: 'http://farm9.staticflickr.com/8042/7918423710_e6dd168d7c_b.jpg', desc: 'Image 01'},
{src: 'http://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
{src: 'http://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
{src: 'http://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
{src: 'http://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
{src: 'http://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
];
// initial image index
$scope._Index = 0;
// if a current image is the same as requested image
$scope.isActive = function (index) {
return $scope._Index === index;
};
// show prev image
$scope.showPrev = function () {
$scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
};
// show next image
$scope.showNext = function () {
$scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
};
// show a certain image
$scope.showPhoto = function (index) {
$scope._Index = index;
};
});
[/code]

In the beginning we prepared a collection of photos. After we will bind it into the HTML code. After this collection – several functions to manage with an active image.

首先,我们准备了一张照片集。 之后,我们将其绑定到HTML代码中。 收集之后–使用活动图像进行管理的几种功能。

步骤4.图片 (Step 4. Images)

All used images were taken from the Marc Driesenga’s Photostream at Flickr

所有使用的图像均来自Flickr的Marc Driesenga的Photostream

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

That’s all for today, thanks for your patient attention, and if you really like what we have done today – share it with all your friends in your social networks using the form below.

今天就这些,感谢您耐心的关注,如果您真的喜欢我们今天所做的事情,请使用下面的表格与您社交网络中的所有朋友分享。

翻译自: https://www.script-tutorials.com/photo-gallery-with-angularjs-and-css3/

angularjs css

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: