簡單的許愿墻
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="點(diǎn)擊發(fā)送心愿啦" />
</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;//設(shè)置開關(guān)规求，用來隱藏和顯示輸入框
var num = 0;//設(shè)置一個(gè)num，下面用來改變卡片的z-index值撮胧，在上面顯示
//特別說明：下面提到的輸入框不是全指<textarea>標(biāo),因?yàn)闁|西比較碎，說詳細(xì)了就更容易蒙圈，就全指輸入框了蒙畴，反正大體就是指那么一坨
//輸入框的隱藏和顯示
oHid.onclick = function(){
if( onOff ){
oWrite.style.display = 'none';
oHid.value = '顯示心愿輸入框';
onOff = false;
}else{
oWrite.style.display = 'block';
oHid.value = '隱藏心愿輸入框';
onOff = true;
};
};
//輸入框的移動(dòng)
oMove.onmousedown = function(){
document.onmousemove = function( ev ){//輸入框的移動(dòng)
ev = ev || event;
//用鼠標(biāo)距X軸的位置-大盒子的左邊距-輸入框的寬度的一半 就是輸入框的left值
var wL = ev.clientX - oBox.offsetLeft - oWrite.offsetWidth/2;
var wT = ev.clientY - oBox.offsetTop - oMove.offsetHeight/2;
//大盒子的寬-輸入框的寬 就是輸入框左右移動(dòng)的范圍酪夷，高同理
var w = oBox.offsetWidth - oWrite.offsetWidth;
var h = oBox.offsetHeight - oWrite.offsetHeight;
//判斷輸入框不要移出設(shè)置的大盒子的范圍內(nèi)
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( ){
//記得都要清空榴啸，防止抽風(fēng)
document.onmousemove = null;
document.onmouseup = null;
}
return false;//之前沒有寫return false,輸入框移動(dòng)的時(shí)候總是抽風(fēng)，所以要記得寫
}
//創(chuàng)建心愿單
//點(diǎn)擊發(fā)送按鈕發(fā)送心愿
oBtn.onclick = function(){
sendMsg()
}
//按回車鍵發(fā)送心愿
oMessage.onfocus = function(){
console.log(1)
document.onkeydown = function(ev){
ev = ev || event ;
if( ev.keyCode == '13'){
sendMsg();
return ev.preventDefault();//這里是阻止回車鍵回車換行,我試了不寫的話晚岭，摁回車發(fā)送的時(shí)候還會(huì)換行鸥印，那么下面對(duì)輸入框的清空就沒用，會(huì)出現(xiàn)能發(fā)送空白卡片的bug
}
}
}
//這是封裝的函數(shù) 發(fā)送卡片的全部過程
function sendMsg(){
var val = oMessage.value;//獲取輸入的框的value值腥例，好放入下面創(chuàng)建的span標(biāo)簽內(nèi)
var oWish ;
if( val ){
oWish = document.createElement('span');//創(chuàng)建一個(gè)span標(biāo)簽辅甥，用這個(gè)span來裝卡片
oWish.className = 'Ospan';
oWish.innerHTML = val;//span里面的內(nèi)容就是輸入框中的內(nèi)容
oBox.appendChild( oWish );
oWish.style.background = 'rgb('+ parseInt(Math.random()*255 +10) + ','+ parseInt(Math.random() *255 +10)+',' +parseInt(Math.random()*255 +10) + ')';//卡片生成隨機(jī)顏色
oWish.style.left = parseInt(Math.random()*( oBox.offsetWidth-oWish.offsetWidth )) + 'px';//卡片的位置也是隨機(jī)生成
oWish.style.top = parseInt(Math.random()*( oBox.offsetHeight-oWish.offsetHeight )) + 'px';
}
oMessage.value = '';//發(fā)送之后，輸入框中的內(nèi)容清空
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燎竖，指向發(fā)生改變璃弄，這里先定義好
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 ){
//控制卡片移動(dòng)的位置
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
