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

无道 2019-07-17 0 条评论 前端相关 阅读313 手机阅读

背景

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

效果演示

右下角来源网站窗口展示

知识点

CSS

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

JavaScript

1、需要用到location对象中的pathname以及documentreferer属性。即:location.pathnamedocument.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':'本地'
};

注意

1、代码采用了let 申明变量,不兼容低版本浏览器,想要兼容换成var

2、本地演示想要查看效果的话需要将一判断条件删除:

截图-1563275632

因为这是判断是否是同网站的。

3、需要用户服务器打开test.html然后跳转到notice.html,方能看到效果。

也即不能一文件系统打开文件。如下:

截图-1563275713

要以服务器形式打开,因为才能获取到referer

截图-1563275767

服务器推荐使用vscode的Live Server

参考:https://www.misiyu.cn/article/6.html#HTML%E7%83%AD%E5%88%B7%E6%96%B0

demo下载

文件下载

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 2019-07-23 11:49
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~