DLE文章附件动画下载按钮

对于安装,您需要执行一些简单的步骤,包括替换和更改引擎代码的各个部分。
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
_h5ai红黑配色以及_h5ai的一些小问题
_h5ai红黑配色以及_h5ai的一些小问题
2019-06-11, 17:25, 脚本
Cloudreve能助您以最低的成本快速搭建公私兼备的网盘系统
Cloudreve能助您以最低的成本快速搭建公私兼备的网盘系统
2019-01-10, 15:30, 脚本
Droppy V1.4.5 – PHP在线网盘系统
Droppy V1.4.5 – PHP在线网盘系统
2018-11-05, 18:30, 脚本
adlinkfly-货币化URL缩短器
adlinkfly-货币化URL缩短器
2019-08-04, 15:29, 脚本
KodExplorer(v4.38, 2018-2-26)破解教程
KodExplorer(v4.38, 2018-2-26)破解教程
2019-02-26, 19:00, 脚本
基于 11.3 / 12.0 / 12.1 以上版本,简洁优化模板-已汉化
基于 11.3 / 12.0 / 12.1 以上版本,简洁优化模板-已汉化
2019-02-25, 14:30, 脚本
图形/媒体高级下载脚本菜鸟版教材-待完善
图形/媒体高级下载脚本菜鸟版教材-待完善
2018-12-04, 16:30, 脚本
创建动画404页面
创建动画404页面
2019-01-09, 18:57, 脚本
Movie

没有评论. Гость, 不想留下第一条评论?

在提交之前,我建议您熟悉一下 规则!

Loading...

自定义新设计
某些页面和功能可能无法使用!

Loading...

我们强烈建议参阅以下参考资料.

赞助/付款 VPS推荐
«    九月 2020    »
周一周二周三周四周五周六周日
 123456
78910111213
14151617181920
21222324252627
282930 

这里可以有你的广告

dabenshi@qq.com
Loading...

发现错误?
您能通知我吗.
选择文本,按CTRL+回车

KodExplorer(v4.37, 2018-01-09)破解版
关于本站文章许可
Office Professional Plus 2019 (x86 and x64) - DVD (Chinese-Simplified)
BeDrive-文件共享云存储汉化版
Veno File Manager V3.4.8 - PHP在线存储&分享源码 已测试
DeepSound - 终极PHP音乐共享平台
DLE JAWELEVEN模板 v1.0
Reservo v1.8-图像托管脚本