昨天好像是什么劳什子的白色情人节吧,作为一名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
|