時間：2023-05-31 13:42:02 | 來源：網站運營
時間：2023-05-31 13:42:02 來源：網站運營
Django搭建網絡相冊：模態(tài)與動畫：如何展示圖片的細節(jié)有很多種方法。作為一個小巧的相冊網站，不需要給每張照片單獨的詳情頁面，而是用浮窗的形式就足夠了。這更多的是模板部分的內容。
在線咨詢
/static/hover.css 文件，寫入：（直接復制即可，暫時不用深究細節(jié)）/* /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 文件與媒體文件類似，都屬于靜態(tài)文件，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 %} 標簽載入靜態(tài)文件相關的全局配置。{% 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 報錯。有就表示靜態(tài)文件載入失敗。
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 循環(huán)中 -->{% 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 ...> 包裹，點擊則觸發(fā)模態(tài)窗打開的事件。data-bs-toggle 屬性指定了當前元素為模態(tài)窗。data-bs-target 的值要嚴格對應模態(tài)窗的 id 值，Bootstrap 依據此來鏈接多個按鈕和模態(tài)窗的映射關系。點贊 or 吐槽？來評論區(qū)！
關鍵詞：相冊,網絡
