sha*_*aka 9 html javascript css angularjs
我正在使用Anuglar设置一个图像,该图像将用作我的页面的背景图像.目前,图像从上到下加载,看起来不太好.我想淡入图像(甚至将图像从模糊视图加载到实际图像).除了从上到下加载之外的任何其他内容.关于如何做到这一点的任何建议？我看到其他帖子显示使用javascript/jquery,但我不知道如何将它集成到我的Angular代码中.
模板
<body ng-controller="MainCtrl" ng-style="heroImage">
//rest of the html
</body>
使用Javascript
$scope.heroImage = {
'background': 'linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5) ), url('+ $scope.place["imageLink"] +')',
'background-size': 'cover',
'height': '100vh',
'background-repeat': 'no-repeat'
};
您可以使用另一个 div 元素或只是将 img 本身包裹在 body 中，并在需要时为不透明度设置动画
超文本标记语言
<body>
<div id='background'>
<img ng-src='yourimage' ng-class="{visible:imageVisible}"/>
</div>
</body>
CSS
body {
background: transparent;
}
#background > img {
opacity: 0;
display: fixed; //or absolute
left: 0;
top: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: -1;
transition: all 1s;
}
#backcgound > img.visible {
opacity: 1;
}
JS
$scope.imageVisible = true;
这是一个很好的方法，仅适用于在页面加载时显示一张图像，但如果您希望多个图像淡入淡出，那么更好的方法是画布或多个图像
<body>
<div id="background">
<img ng-reapeat="image in images track by $index" ng-src="image.src" ng-class="{visible:image.visible}"/>
</div>
</body>
然后你可以使用 $interval 通过改变不透明度 JS 来改变可见图像
images=[{
src:'yoursrc',visible:false
}, {
src:'yoursrc',visible:false
}, {
src:'yoursrc',visible:false
},
...
]
| 归档时间： |
|
| 查看次数： |
2322 次 |
| 最近记录： |