查看“模板:挂边元素-陶生”的源代码

<noinclude>{{面包屑|编辑指南}}[[分类:模板]]{{模板说明}}</noinclude>
<includeonly><!--
--><div class="hang-aside {{#ifeq:{{{方向|}}}|右|hang-aside-r}}" data-ha-id="{{#var:h-a-id|0}}">[[file:{{{1|}}}|link=]]</div><!--
--><div class="hang-aside-show" data-ha-id="{{#var:h-a-id|0}}"><!--
    --><div><!--
-->{{#if:{{{内容图|}}}|<div>[[file:{{{内容图}}}|link=]]</div>}}<!--
-->{{#if:{{{内容页面|}}}|{{{内容页面|}}}}}<!--
--></div><!--
    --><div style="color: white; text-align: center; padding: 10px; font-size: 1em; position: fixed; bottom: 0;z-index: 1000;">< 点 击 两 端 可 退 出 ></div><!--
--></div><!--
-->{{#if: {{#varexists: hang-aside-add }} | | {{#vardefine: hang-aside-add|1}} {{JS|Amplification-expansion}}<!--
    --><div id="g-a-unload">看到此行说明js未正常加载，请尝试刷新页面!</div><!--
    --><bstyle>/*<pre>*/
.hang-asidee{}
#g-a-unload{
    width: 100%;
    text-align: center;
    font-size: 2.2em;
    font-weight: bold;
    background: red;
    border-radius: 8px;
    color: white;
    padding: 10px 0;
}
.hang-aside
{
    position: fixed;
    left: 0;
    top:50vh;
    width: calc(50px + 4vw);
}
.hang-aside:hover
{
    cursor: zoom-in;
}
.hang-aside-r{left: auto; right: 0;}
.hang-aside-show
{
    top: 0px;
    left: 0px;
    position: fixed;
    display: none;
    background-color: rgba(0,0,0,0.50);
    height: 100%;
    width: 100%;
    cursor: zoom-out;
    transition: 0.5s;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: visible;
    z-index: 999;
    opacity: 0;
}
.hang-aside-show>div{
    /* 移除 overflow: auto; */
}

@media (max-width: 1280px)
{
    .hang-aside-show>div
    {
        width: 90vw;
    }
}
/*</pre>*/</bstyle>}}{{#vardefine:h-a-id|{{#expr: {{#var:h-a-id|0}}+1 }}}}</includeonly>