许愿墙JQ

最新推荐文章于 2021-07-28 17:40:38 发布

dinabi3790

最新推荐文章于 2021-07-28 17:40:38 发布

阅读量192

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yeyuyuni/p/11586582.html

版权

<!doctype html>

<html>

<head>

<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;

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>

(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>

</body>

</html>

转载于:https://www.cnblogs.com/yeyuyuni/p/11586582.html

dinabi3790

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
许愿墙JQ

<!doctypehtml><html><head><metacharset="utf-8"><title>1</title><style>body{background:-webkit-linea...
复制链接

扫一扫

许愿墙JQ

“相关推荐”对你有帮助么？