<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>许愿墙</title>
<style>
*{
margin:0px;
padding:0px;
}
body{
background:-webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
background:-moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
font-family:'微软雅黑',
font-size:16px;
position:relative;
top:0px;
left:0px;
bottom:0px;
right:0px;
}
.item{
width:200px;
height:200px;
line-height:30px;
-webkit-border-bottom-left-radius:20px 500px;
-webkit-border-bottom-right-radius:500px 30px;
-webkit-border-top-right-radius:5px 100px;
-moz-border-bottom-left-radius:20px 500px;
-moz-border-bottom-right-radius:500px 30px;
-moz-border-top-right-radius:5px 100px;
box-shadow:0 2px 10px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 10px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 2px 10px 1px rgba(0, 0, 0, 0.2);
}
#containerp{
height:80px;
margin:30px 10px;
overflow:hidden;
word-wrap:break-word;
line-height:1.5;
}
#containera{
position:relative;
left:150px;
coler:red;
font-size:14px;
}
input{
display:block;
height:30px;
padding:0 1em;
line-height:30px;
width:300px;
margin:85px auto;
font-size:20px;
}
</style>
<scriptsrc="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="height:520px;">
</div>
<input id="input" type="text" placeholder="随便说说吧..."/>
<script>
(function ($) {
varcontainer;
//可选颜色
varcolors = ['#96C2F1', '#BBE1F1', '#E3E197', '#F8B3D0', '#FFCC00'];
//创建许愿页
varcreateItem = function(text){
varcolor = colors[parseInt(Math.random() * 5, 10)]
$('<divclass="item"><p>'+ text +'</p><ahref="#">关闭</a></div>').css({ 'background': color}).appendTo(container).drag();
};
//定义拖拽函数
$.fn.drag = function () {
var $this = $(this);
var parent = $this.parent();
var pw = parent.width();
var ph = parent.height();
var thisWidth = $this.width() + parseInt($this.css('padding-left'), 10)+ parseInt($this.css('padding-right'), 10);
var thisHeight = $this.height() + parseInt($this.css('padding-top'), 10)+ parseInt($this.css('padding-bottom'), 10);
var x, y, positionX, positionY;
var isDown = false;
var randY = parseInt(Math.random() * (ph - thisHeight), 10);
var randX = parseInt(Math.random() * (pw - thisWidth), 10);
parent.css({
"position": "relative",
"overflow": "hidden"
});
$this.css({
"cursor": "move",
"position": "absolute"
}).css({
top: randY,
left: randX
}).mousedown(function (e) {
parent.children().css({
"zIndex":"0"
});
$this.css({
"zIndex": "1"
});
isDown = true;
x = e.pageX;
y = e.pageY;
positionX = $this.position().left;
positionY = $this.position().top;
return false;
});
$(document).mouseup(function (e) {
isDown = false;
}).mousemove(function (e) {
var xPage = e.pageX;
var moveX = positionX + xPage - x;
var yPage = e.pageY;
var moveY = positionY + yPage - y;
if (isDown == true) {
$this.css({
"left": moveX,
"top": moveY
});
} else {
return;
}
if (moveX < 0) {
$this.css({
"left":"0"
});
}
if (moveX > (pw - thisWidth)) {
$this.css({
"left": pw -thisWidth
});
}
if (moveY < 0) {
$this.css({
"top":"0"
});
}
if (moveY > (ph - thisHeight)) {
$this.css({
"top": ph -thisHeight
});
}
});
};
//初始化
varinit = function () {
container= $('#container');
//绑定关闭事件
container.on('click','a',function() {
$(this).parent().remove();
}).height($(window).height()-204);
vartests = ['web前端学习部落22群与你风雨同舟？', 'I have adream...', '路漫漫其修远兮。。。', '需要web前端资料，加群120342833', '既然选择了远方，便只顾风雨兼程！'];
$.each(tests,function (i,v) {
createItem(v);
});
//绑定输入框
$('#input').keydown(function(e) {
var$this = $(this);
if(e.keyCode== '13') {
varvalue = $this.val();
if(value){
createItem(value);
$this.val('');
}
}
});
};
$(function(){
init();
});
})(jQuery);
</script>
</body>
</html>
需要web前端课程工具和电子书，可以加群120342833，或者扫码
扫一扫
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
