(QQ) 1426140920写信给我
(E-mail) dabenshi.qq.com
» » DLE文章附件动画下载按钮

DLE文章附件动画下载按钮

2019-08-23, 星期五
193
0
对于安装,您需要执行一些简单的步骤,包括替换和更改引擎代码的各个部分。
1.通过FTP连接到您的站点。
2.打开文件attachment.tpl文件夹中/模板/ (即强调-你的主题文件夹),该文件的所有内容替换:
[allow-download]
    <div class="attachment_position">
        <a href="{link}" title="下载: {count}">
            <div class="attachment_main"></div>
            <div class="attachment_block">
                <div class="attachment_block_2">
                    <div class="attachment_block_3">
                        <div class="attachment_file">
                            <span>立即下载</span>
                            {name}
                        </div>
                        <div class="attachment_size">
                            {size}
                        </div>
                    </div>
                </div>
                <div class="icon_attachment"></div>
            </div>
        </a>
    </div>
[/allow-download]
[not-allow-download]
<br />
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel panel-warning">
            <div class="panel-heading"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> <b>信息</b></div>
                <div class="panel-body">您没有在服务器下载文件的权限,</a><a href="/index.php?do=register">免费注册</a>或联系<a href="/index.php?do=feedback">管理员</a>获取。</div>
        </div>
    </div>
[/not-allow-download]
<script>
    $(".attachment_position").on({
        mouseenter: function () {
            var attachment_target = $(this);
            $(attachment_target).addClass('attachment_active');
            setTimeout(function() {
                $(".attachment_active .attachment_block_2").css({
                    "margin": "6px 0 0 0"
                });
                $(".attachment_active .attachment_block_3").css({
                    "margin": "0 0 0 -17px"
                });
                setTimeout(function() {
                    $(".attachment_active .icon_attachment").css({
                        "opacity": "1",
                        "visibility": "visible",
                        "-webkit-transform": "translateY(0)",
                        "-moz-transform": "translateY(0)",
                        "-ms-transform": "translateY(0)",
                        "transform": "translateY(0)"
                    });
                    
                }, 400);
                
            }, 400);
        }, mouseleave: function () {
            var attachment_target = $(this);
            setTimeout(function() {
                $(".attachment_active .attachment_block_2").css({
                    "margin": "6px 0 0 37px"
                });
                $(".attachment_active .attachment_block_3").css({
                    "margin": "0 0 0 4px"
                });
                $(attachment_target).removeClass('attachment_active');
                
            }, 400);
            setTimeout(function() {
                $(".attachment_active .icon_attachment").css({
                    "opacity": "0",
                    "visibility": "hidden",
                    "-webkit-transform": "translateY(-20%)",
                    "-moz-transform": "translateY(-20%)",
                    "-ms-transform": "translateY(-20%)",
                    "transform": "translateY(-20%)"
                });
                
            }, 0);
            setTimeout(function() {
                $(".attachment_active .icon_attachment").css({
                    "opacity": "0",
                    "visibility": "hidden",
                    "-webkit-transform": "translateY(-20%)",
                    "-moz-transform": "translateY(-20%)",
                    "-ms-transform": "translateY(-20%)",
                    "transform": "translateY(-20%)"
                });
            }, 800);
        }
        
    });
</script>

3.在HEAD部分,在标记关闭之前(通常是在main.tpl文件中),连接字体:
<link href="https://fonts.loli.net/css?family=Open+Sans+Condensed:300" rel="stylesheet">
4.接下来,在您的样式文件中,在最底部插入:
.attachment_position * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.attachment_position *:before, .attachment_position *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.attachment_position {
    position: relative;
    height: 72px;
    width: 330px;
    margin: 0 auto;
}

.attachment_main {
    background: url("..//pattern_4.png");
    height: 72px;
    width: 330px;
    border-radius: 99px;
    position: absolute;
    transition: .3s;
    z-index: 99;
    top: 0;
    left: 0;
    opacity: 0;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .1) inset;
}

.attachment_position:hover .attachment_main {
    opacity: 1;
    transition: .3s;
}

.attachment_block {
    background: url("../images/pattern.png");
    width: 290px;
    height: 64px;
    border-radius: 99px;
    float: right;
    margin: 4px 4px 0 0;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}

.attachment_block_2 {
    width: 215px;
    height: 52px;
    background: url("../images/pattern_2.png");
    border-radius: 99px;
    border-bottom: 1px solid #3a9bbd;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, .2) inset;
    margin: 6px 0 0 37px;
    padding: 4px 0 0 0;
    transition: .3s;
}

.icon_attachment {
    width: 50px;
    height: 39px;
    background: url("../images/download.png") no-repeat center center;
    opacity: 0;
    margin: 16px 13px 0 0;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    transform: translateY(-20%);
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    transition: .3s;
}

.attachment_block_3 {
    width: 207px;
    height: 44px;
    background: url("../images/pattern_3.png");
    border-radius: 99px;
    margin: 0 0 0 4px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .4);
    border-top: 1px solid #53616f;
    transition: .3s;
}

.stop_animation {
    opacity: 0 !important;
    -webkit-transform: translateY(-20%) !important;
    -moz-transform: translateY(-20%) !important;
    -ms-transform: translateY(-20%) !important;
    transform: translateY(-20%) !important;
    visibility: hidden !important;
}

.attachment_file {
    font-family: "Open Sans Condensed", sans-serif;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    padding: 1px 0 0 18px;
    float: left;
}

.attachment_file span {
    font-size: 17px;
    display: block;
    margin: 0 0 -3px 0;
}

.attachment_size {
    float: right;
    color: #ffffff;
    font-family: "Open Sans Condensed", sans-serif;
    padding: 3px 17px 0 0;
    text-transform: uppercase;
    font-size: 15px;
}

.attachment_size span {
    font-size: 26px;
}

.attachment_border {
    border-left: 1px solid #3b3a3d;
    border-right: 1px solid #2b292c;
    height: 43px;
    float: right;
    margin: 0 10px 0 0;
}

.attachment_position a {
    text-decoration: none !important;
}
5.下载文章末尾的存档,将内容上传到主题文件夹。如果按钮上没有图形,请在上面的样式中将正确的地址放入其中。
6.打开/ engine / modules /文件夹中的functions.php文件,找到包含以下内容的行:
$tpl->set( '{size}', formatsize( @filesize( ROOT_DIR . '/uploads/files/' . $row['onserver'] ) ) );
并替换为:
$size_fix = formatsize(@filesize(ROOT_DIR."/uploads/files/".$row["onserver"]));
$size_fix = explode(" ", $size_fix);
$tpl->set("{size}", "<span>".$size_fix[0]."</span>".$size_fix[1]);
7. 清除站点缓存安装完成。
您没有在服务器下载文件的权限,免费注册或联系管理员获取。


优化后的模板
您没有在服务器下载文件的权限,免费注册或联系管理员获取。

*原文:DLE-博客自适应通用模板-v12
讨论
发表评论
评论 (0)
信息
想要留言? 请 登录 您的账号。还没有? 你可以 免费创建账号
最新文章
合作伙伴