网站右下角[来源网站]显示【前端特效】

无道

发布于 2019-11-13 16:00:32

7510

发布于 2019-11-13 16:00:32

文章被收录于专栏：无道编程无道编程

背景

当别人从其他网站访问自己的网站时，如果在自己网站右下角有提示“欢迎来自XXX的朋友访问本站”，是不是逼格满满？！

效果演示

知识点

CSS

css需要了解定位(fixed,absolute) ，其余的话就是一些很基础的CSS样式知识了。

JavaScript

1、需要用到location对象中的pathname以及document的referer属性。即：location.pathname 和 document.referer。

2、以及一定的正则知识：用来匹配来源域名。

3、还用到了jquery 操作dom方便点，需要的可自行换成原生js。

代码讲解

CSS

<style type="text/css">
    .from-notice {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        /*width: 250px;*/
        height: 30px;
        background: #00cec9;
        padding: 10px;
        border-radius: 5px;
        color: #fff;
        line-height: 34px;
        z-index: 99999;
    }

    .from-notice .site {
        font-weight: bold;
        color: #000;
    }

    .from-notice .times {
        position: absolute;
        right: 9px;
        top: -6px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }

    .from-notice .times:hover {
        color: #e74c3c;
    }
</style>

.from-notice 是整个父容器。采用fixed定位。 .times 是右上的x，定位到右上。

JavaScript

<script type="text/javascript">
    let from_site = {
        'baidu.com':'百度搜索',
        'google.com':'谷歌搜索',
        'google.com.hk':'谷歌搜索',
        'misiyu.cn':'迷思雨博客',
        'hu60.net':'虎绿林',
        '127.0.0.1:5500':'本地'
    };
    let from = document.referrer;
    let from_domain = get_domain(from);
    let timer = null;
    if (from_domain && location.host.indexOf(from_domain) === -1) {


        let times = $("<span class=\"times\">&#215;</span>").click(function () {
            $(this).parent('.from-notice').slideUp(500);
            clearTimeout(timer);
        });
        let notice_site = from_site.hasOwnProperty(from_domain) ? from_site[from_domain] : from_domain;

        let msg = `欢迎来自 <span class="site">${notice_site}</span> 的朋友访问本博客。`;

        let showDom = $("<div></div>").addClass("from-notice").html(msg);
        times.appendTo(showDom);
        showDom.appendTo($("body")).show(600);

        timer = setTimeout(function () {
            $('.from-notice').slideUp(500);
        }, 3000);

    }


    function get_domain(url) {
        let result = url.match(/https?:\/\/(?:[w]){0,3}\.?(.*?)\//);
        // console.log(result)
        // console.log()
        if (result && result.length >= 2) {
            return result[1];
        } else {
            return null;
        }
    }
</script>

get_domain方法里面通过正则获取来源域名。

默认会显示网站域名（在from_site对象里面定义的，该对象key和value都是字符串类型。）

如下：

let from_site = {
    'baidu.com':'百度搜索',
    'google.com':'谷歌搜索',
    'google.com.hk':'谷歌搜索',
    'misiyu.cn':'迷思雨博客',
    'hu60.net':'虎绿林',
    '127.0.0.1:5500':'本地'
};