简单的许愿墙
html：
<div id="box">
<div id="write">
<p id="move">写下你的心愿吧</p>
<textarea id="message" name="" rows="15" cols="40"></textarea>
<input type="button" name="btn" id="btn" value="点击发送心愿啦" />
</div>
</div>
<input type="button" name="hid" id="hid" value="隐藏心愿输入框" />
css
*{
margin: 0;
padding: 0;
}
#box{
width: 800px;
height: 600px;
border: 1px solid #ccc;
margin: 50px auto 0;
position: relative;
}
#write{
width: 301px;
height: 320px;
position: absolute;
top: 250px;
left: 230px;
z-index: 10;
background:#f5e6e6;
}
#message{
resize: none;
margin-left: 1px;
}
#btn{
display: block;
position: absolute;
bottom: 10px;
right: 5px;
}
#write input{
width: 100px;
height: 30px;
border: 0;
cursor: pointer;
background:#f5e6e6;
border: 1px solid #ccc;
}
#write p{
width: 300px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: move;
}
#box span{
display: block;
width: 200px;
height: 200px;
font-size: 14px;
position: absolute;
top: 0;
left: 0;
cursor: move;
overflow: auto;
border: 2px dashed #fff;
}
#hid{
margin-left: 900px;
margin-top: 10px;
}
二、js
var oBox = document.getElementById("box");
var oWrite = document.getElementById("write");
var oMessage = document.getElementById("message");
var oBtn = document.getElementById("btn");
var oMove = document.getElementById("move");
var oHid = document.getElementById("hid");
var onOff = true;//设置开关，用来隐藏和显示输入框
var num = 0;//设置一个num，下面用来改变卡片的z-index值，在上面显示
//特别说明：下面提到的输入框不是全指<textarea>标,因为东西比较碎，说详细了就更容易蒙圈，就全指输入框了，反正大体就是指那么一坨
//输入框的隐藏和显示
oHid.onclick = function(){
if( onOff ){
oWrite.style.display = 'none';
oHid.value = '显示心愿输入框';
onOff = false;
}else{
oWrite.style.display = 'block';
oHid.value = '隐藏心愿输入框';
onOff = true;
};
};
//输入框的移动
oMove.onmousedown = function(){
document.onmousemove = function( ev ){//输入框的移动
ev = ev || event;
//用鼠标距X轴的位置-大盒子的左边距-输入框的宽度的一半 就是输入框的left值
var wL = ev.clientX - oBox.offsetLeft - oWrite.offsetWidth/2;
var wT = ev.clientY - oBox.offsetTop - oMove.offsetHeight/2;
//大盒子的宽-输入框的宽 就是输入框左右移动的范围，高同理
var w = oBox.offsetWidth - oWrite.offsetWidth;
var h = oBox.offsetHeight - oWrite.offsetHeight;
//判断输入框不要移出设置的大盒子的范围内
if( wL > w ){
wL = w;
}else if( wL < 0 ){
wL = 0;
};
if( wT > h ){
wT = h;
}else if( wT < 0 ){
wT = 0;
}
oWrite.style.left = wL + 'px';//记得加单位 px
oWrite.style.top = wT + 'px';
oWrite.style.zIndex = 999;
}
document.onmouseup = function( ){
//记得都要清空，防止抽风
document.onmousemove = null;
document.onmouseup = null;
}
return false;//之前没有写return false,输入框移动的时候总是抽风，所以要记得写
}
//创建心愿单
//点击发送按钮发送心愿
oBtn.onclick = function(){
sendMsg()
}
//按回车键发送心愿
oMessage.onfocus = function(){
console.log(1)
document.onkeydown = function(ev){
ev = ev || event ;
if( ev.keyCode == '13'){
sendMsg();
return ev.preventDefault();//这里是阻止回车键回车换行,我试了不写的话，摁回车发送的时候还会换行，那么下面对输入框的清空就没用，会出现能发送空白卡片的bug
}
}
}
//这是封装的函数 发送卡片的全部过程
function sendMsg(){
var val = oMessage.value;//获取输入的框的value值，好放入下面创建的span标签内
var oWish ;
if( val ){
oWish = document.createElement('span');//创建一个span标签，用这个span来装卡片
oWish.className = 'Ospan';
oWish.innerHTML = val;//span里面的内容就是输入框中的内容
oBox.appendChild( oWish );
oWish.style.background = 'rgb('+ parseInt(Math.random()*255 +10) + ','+ parseInt(Math.random() *255 +10)+',' +parseInt(Math.random()*255 +10) + ')';//卡片生成随机颜色
oWish.style.left = parseInt(Math.random()*( oBox.offsetWidth-oWish.offsetWidth )) + 'px';//卡片的位置也是随机生成
oWish.style.top = parseInt(Math.random()*( oBox.offsetHeight-oWish.offsetHeight )) + 'px';
}
oMessage.value = '';//发送之后，输入框中的内容清空
var w = document.getElementsByClassName('Ospan');
for( var i=0;i<w.length;i++ ){
w[i].index = i;
w[i].onmousedown = function(){
var This = this;//下面用到this，指向发生改变，这里先定义好
num++;
this.style.zIndex = num;//增加z-index值
document.onmousemove = function( ev ){
ev = ev || event ;
//这些卡片都跟输入框的思路一样 不赘述
var sW = ev.clientX- oBox.offsetLeft - oWish.offsetWidth/2;
var sH = ev.clientY - oBox.offsetTop - oWish.offsetHeight/2;
var bsw = oBox.offsetWidth - oWish.offsetWidth;
var bsh = oBox.offsetHeight - oWish.offsetHeight;
for( var j=0;j<w.length;j++ ){
if( This.index == j ){
//控制卡片移动的位置
if( sW > bsw ){
sW = bsw;
}else if( sW < 0 ){
sW = 0;
};
if( sH > bsh ){
sH = bsh;
}else if( sH < 0 ){
sH = 0;
}
This.style.left = sW + 'px';
This.style.top = sH + 'px';
}
}
}
document.onmouseup = function( ){
document.onmousemove = null;
document.onmouseup = null;
![Uploading 许愿墙效果图_467121.png . . .]
}
return false;
};
}
};
大概的效果图：
许愿墙效果图.png
