半步多 玄玉的博客

做环保的程序员从不用百度开始

2013-11-05
玄玉

混迹网络的,大家都知道,如果你很幸运的从百度搜到了酷壳http://coolshell.cn的文章

点击进去的时候,一定会看到类似下面这样的弹窗

这只是以前,现在应该是看不到了

不过这个弹窗很有意思,所以就找到了它的实现:http://coolshell.cn/articles/9308.html

其思想就是Referrer中匹配baidu.com(基于此原理可以统计源自搜索引擎的请求数量)

弹窗效果用的是bPopup插件,其官网为http://dinbror.dk/bpopup/(里面有很多例子,效果很炫)

下面是代码

<!DOCTYPE HTML>
<html>
<head>
    <title>做环保的程序员,从不用百度开始!</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script src="//cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bPopup/0.9.0/jquery.bpopup.min.js"></script>
    <!--
    <script src="http://coolshell.cn/wp-content/themes/inove/js/jquery.bpopup-0.8.0.min.js"></script>
    -->
</head>
<script>
;(function($){
    $(function(){
        var url = document.referrer;
        if(url && url.search("http://")>-1){
            var refurl = url.match(/:\/\/(.[^/]+)/)[1];
            if(refurl.indexOf("baidu.com")>-1){
                $('#nobaidu_dlg').bPopup();
            }
        }
    });
})(jQuery);
$(function(){
    $('#nobaidu_dlg').bPopup();
});
</script>
<body>
<div id="nobaidu_dlg" style="background-color:#fff; border-radius:15px; color:#000; display:none; padding:20px; min-width:450px; min-height:180px;">
    <img src="http://coolshell.cn/wp-content/themes/inove/img/nobaidu.jpg" align="left">
    <p style="margin-left:200px; margin-top:20px; line-height:30px;">
        检测到你还在使用百度这个搜索引擎,<br/>
        做为一个程序员,这是一种自暴自弃!<br/>
        <br/>
    </p>
    <p align="center" style="margin-top:20px;">
        <b><a href="http://coolshell.cn/articles/7186.html">作环保的程序员,从不用百度开始!</a></b>
    </p>
</div>
<h2>本弹窗代码转载自酷壳http://coolshell.cn/articles/9308.html</h2>
</body>
</html>

Comments

Content