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

混迹网络的，大家都知道，如果你很幸运的从百度搜到了酷壳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>

补充

弹窗效果里面的那个封杀baidu的图片来自豆瓣的拒绝百度兴趣小组