分享一个优雅的约妹子的方法 保准成功

falost

昨天好像是什么劳什子的白色情人节吧，作为一名code dog 我真不知道啊！

在群里，我看见大姐说，要弄一个页面，看了下，是一个约妹子的页面，如果妹子不同意的话，需要点击关闭！

否则就答应约，那么有人肯定会问了，一个页面，能关闭不了吗？

哼哼，关闭浏览器，那肯定能关闭了啊，但是这不是我们设计计划的所在啊！

要想拒绝，必须点击页面内的一个拒绝按钮，才算拒绝成功哦！

下面，我们来看看实现过程吧！

首先，我们看看css吧

[CSS] 纯文本查看 复制代码

 html,body{
        background-color: #FF6A6A;
        height: 100%;
        position: relative;
    }
    .love_me {
        width: 200px;
        height: 100px;
        font-size: 18px;
        text-align: center;
        color: white;
        line-height: 50px;
        position: fixed;
        top: 0;
        left: 0;
    }
    h1{
        color: #fff;
        font-size: 16px;
        background-color: #FF016F;
        cursor: pointer;
        width: 150px;
        height: 60px;
        margin: 20px auto;
        line-height: 60px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

css 很简单，就是布局效果，这些没啥说的，HTNL也很简单哦！

[HTML] 纯文本查看 复制代码

<div class="love_me">
    <h1>点击这里拒绝我</h1>
</div>

重要的都会在后面做压轴的！
来吧，首先我们先引入jQuery吧！

[HTML] 纯文本查看 复制代码

<script src="http://cdn.code.fedte.cc/libs/jquery/jquery-1.11.3.min.js"></script>

来上程序的关键代码吧

[JavaScript] 纯文本查看 复制代码

$(function(){
        //1.我们获取窗口的宽高,为了不让红方框出去,备用
        var browserWidth = $(window).innerWidth();
        var browserHeight = $(window).innerHeight();
        //2.鼠标移入到元素的事件,hover有两个参数,写上第一个function,第二个空着就好
        $(".love_me").mousemove(function() {
            //3.循环啊
            while (true) {
                //4.循环的时候随机一个top和left
                var randomTop = parseInt(Math.random() * (browserHeight - 200) );
                var randomLeft = parseInt(Math.random() * (browserWidth - 400) );
                //5.获取元素的位置
                var eventY = $(this).offset().top;
                var eventX = $(this).offset().left;
                //6.设定两个条件 元素和随机数的关系
                var top = randomTop > eventY && randomTop < eventY ;
                var left = randomLeft > eventX && randomLeft < eventX ;
                //7.如果条件都正确结束循环
                if (top && left) {
                    continue;
                    //8.否则就给元素赋新都随机值
                } else {
                    $(this).css({top: randomTop + "px", left: randomLeft + "px"});
                    break;
                }
            }
            console.log("randomTop:"+randomTop +"  randomLeft:"+randomLeft);
            console.log("eventX:"+eventX+"  eventY:"+eventY)
        });
        //如果真被点击上了，那就天意啊，老实的做一个单身汪吧
        $(".love_me h1").click(function(){
           confirm("你真的要拒绝吗？")
        })
    });

代码的功能，已经注释进去了

如果这还是被妹子点上了，只能说你运气差了，千万别放弃，说不定妹子已经答应你了，只是想玩玩这个页面而已，加油吧！

最后，贴上在线演示地址：http://demo.fedte.cc/libs/2016-03-15/loveme.html

@psgr  

戳戳X

    我 竟然点进去看了

戳戳X

好神奇

falost

戳戳X 发表于 2016-3-30 23:17
好神奇

然后 你关闭了吗