jQuery许愿墙代码实例
分类：实例代码
曾经流行过一段时间的许愿墙，形式大家都不会陌生。
下面就通过javascript代码实现此功能，代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
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%);
overflow: hidden;
font-family: '微软雅黑', font-size: 16px;
height: 1500px;
}
.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;
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);
}
#container p {
height: 80px;
margin: 30px 10px;
overflow: hidden;
word-wrap: break-word;
line-height: 1.5;
}
#container a {
position: relative;
left: 150px;
color: red;
font-size: 14px;
}
input {
display: block;
height: 30px;
padding: 0 1em;
line-height: 30px;
width: 300px;
margin: 85px auto;
font-size: 20px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
(function ($) {
var container;
// 可选颜色
var colors = ['#96C2F1', '#BBE1F1', '#E3E197', '#F8B3D0', '#FFCC00'];
//创建许愿页
var createItem = function (text) {
var color = colors[parseInt(Math.random() * 5, 10)]
$('<div class="item"><p>' + text + '</p><a href="#">关闭</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
});
}
});
};
// 初始化
var init = function () {
container = $('#container');
// 绑定关闭事件
container.on('click', 'a', function () {
$(this).parent().remove();
}).height(($(window).height() - 200) < 0 ? 520 : ($(window).height() - 200))
.width(($(window).width() - 200) < 0 ? '100%' : $(window).width());
var tests = ['前端教程网一', '前端教程网二', '前端教程网三', '前端教程网四', '前端教程网五'];
$.each(tests, function (i, v) {
createItem(v);
});
// 绑定输入框
$('#input').keydown(function (e) {
var $this = $(this);
if (e.keyCode == '13') {
var value = $this.val();
if (value) {
createItem(value);
$this.val('');
}
}
});
};
$(function () {
init();
});
})(jQuery);
</script>
</head>
<body>
<div id="container" style="height:520px;"></div>
<input id="input" type="text" placeholder="随便说说吧..." />
</body>
</html>
jQuery许愿墙代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery许愿墙代码实例就介绍到这了。
jQuery许愿墙代码实例属于前端实例代码，有关更多实例代码大家可以查看。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu