时间：2023-05-31 13:42:02 | 来源：网站运营
时间：2023-05-31 13:42:02 来源：网站运营
Django搭建网络相册：模态与动画：如何展示图片的细节有很多种方法。作为一个小巧的相册网站，不需要给每张照片单独的详情页面，而是用浮窗的形式就足够了。这更多的是模板部分的内容。
在线咨询
/static/hover.css 文件，写入：（直接复制即可，暂时不用深究细节）/* /static/hover.css *//* 此样式来自 Hover.css *//* https://ianlunn.github.io/Hover/ *//* Float Shadow */.hvr-float-shadow {display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);position: relative;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;}.hvr-float-shadow:before {pointer-events: none;position: absolute;z-index: -1;content: '';top: 100%;left: 5%;height: 10px;width: 90%;opacity: 0;background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);/* W3C */-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform, opacity;transition-property: transform, opacity;}.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {-webkit-transform: translateY(-5px);transform: translateY(-5px);/* move the element up by 5px */}.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {opacity: 1;-webkit-transform: translateY(5px);transform: translateY(5px);/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */}css 文件与媒体文件类似，都属于静态文件，Django 默认是不处理它们的。hover.css 的路径）# /album/settings.py...# 修改STATIC_URL = '/static/'# 新增STATICFILES_DIRS = ( BASE_DIR / 'static',)接着同样的，将其注册到 url 路径中：# /album/urls.py...urlpatterns = [ ...]urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)然后就可以像下面这样，在 base.html 中引入它了：<!-- /templates/base.html -->... <head> ... {% load static %} <link rel="stylesheet" href="{% static 'hover.css' %}"> </head>...{% load static %} 标签载入静态文件相关的全局配置。{% static 'hover.css' %} 载入此 css 文件的实际地址。class="hvr-float-shadow" 就可以了。list.html ：<!-- /templates/photo/list.html -->...{% for photo in photos %}<div class="..."> <div class="... hvr-float-shadow"> ... </div></div>{% endfor %}...刷新页面并将鼠标悬停在图片卡片上，它就有向上腾空的动画了。如果无此效果，检查浏览器控制台是否有 404 报错。有就表示静态文件载入失败。
list.html 代码对应位置：<!-- /templates/photo/list.html -->...{% block content %}...{% for photo in photos %}<div class="col-4 py-2"> <div class="card hvr-float-shadow"> <!-- 修改了这里 --> <a href="#" data-bs-toggle="modal" data-bs-target="#photo-{{ photo.id }}" > <img src="{{ photo.image.url }}" alt="" class="card-img" > </a> <!-- ******* --> </div></div>{% endfor %}...<!-- 新增了这里 --><!-- 注意下面这部分代码不能直接写在卡片的 for 循环中 -->{% for photo in photos %}<!-- Modal --><div class="modal fade" id="photo-{{ photo.id }}"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content"> <div class="modal-body"> <img src="{{ photo.image.url }}" alt="" class="card-img" > </div> </div> </div></div>{% endfor %}<!-- ************ -->{% endblock content %}<a ...> 包裹，点击则触发模态窗打开的事件。data-bs-toggle 属性指定了当前元素为模态窗。data-bs-target 的值要严格对应模态窗的 id 值，Bootstrap 依据此来链接多个按钮和模态窗的映射关系。点赞 or 吐槽？来评论区！
关键词：相册,网络
