Discuz留言墙等祝福墙实现:纯js+html

最近在给校青志做网站，感觉discuz的心情墙很不错的，就模仿了一下，写了一个留言墙。用到的是html+纯js。先上一张效果图啊，IE、火狐、谷歌、Opera、360浏览器亲测均完美运行，无任何Bug。使用的是纯js与html，需要数据库等动态页面的请自行修改。

                                                                         

先说一下布局代码：

HTML代码如下：

    
        
        
        
        
        
        
    
    
        

            
            

                

                    2014-11-12
                
                

                     你最孤独的时刻是什么？一个人去吃自助餐 取餐回来后发现餐具已被服务员收走.... 
                
                

                    

                        
                    
                    

                        Ken
                    
                
            
            
             

                

                    2014-11-12
                
                

                    哪件事，让你对自己的无知感到震惊？小的时候写作文要写笔名，我写的一直是“中华绘图铅笔”。
                
                

                    

                        
                    
                    

                        Ken
                    
                
            
            
        
    

css代码如下:

body
{
    font-size: 12px;
    font-family: 微软雅黑;
    margin: 0;
}
.main
{
    width: 960px;
    height: 960px;
    margin: 0 auto;
    background-image: url(../images/wall.gif);
}
.note
{
    width: 235px;
    cursor: move;
    display: none;
    position: absolute;
}
.nhead
{
    width: 175px;
    height: 23px;
    padding: 45px 30px 0px 30px;
}
.nbody
{
    width: 190px;
    height: auto;
    padding: 5px 15px 5px 30px;
}
.nfoot
{
    width: 185px;
    height: 32px;
    padding: 30px 20px 10px 30px;
}
.moodpic
{
    width: 20px;
    height: 20px;
    float: left;
}
.moodpic img
{
    width: 20px;
    height: 20px;
}

.username
{
    text-align: right;
    float: right;
}

javascript代码如下：

/*
 *下面拖动代码来源于http://www.newxing.com/Tech/WebDevelop/JavaScript/472.html
 *在此感谢原作者，转载请声明来源
 *@author @ken @1039110278
 */
Number.prototype.NaN0=function(){return isNaN(this)?0:this;}
var iMouseDown  = false;
var dragObject  = null;
var curTarget   = null;
var pageMaxNotes=50;

function makeDraggable(item){
    if(!item) return;
    item.onmousedown = function(ev){
        dragObject  = this;
        mouseOffset = getMouseOffset(this, ev);
        return false;
    }
}

function getMouseOffset(target, ev){
    ev = ev || window.event;

    var docPos    = getPosition(target);
    var mousePos  = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
    var left = 0;
    var top  = 0;
    while (e.offsetParent){
        left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
        top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
        e     = e.offsetParent;
    }

    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

    return {x:left, y:top};

}

function mouseCoords(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
}

function mouseDown(ev){
    ev         = ev || window.event;
    var target = ev.target || ev.srcElement;

    if(target.onmousedown || target.getAttribute('DragObj')){
        return false;
    }
}

function mouseUp(ev){

    dragObject = null;

    iMouseDown = false;
}

function mouseMove(ev){
    ev         = ev || window.event;

    /*
    We are setting target to whatever item the mouse is currently on

    Firefox uses event.target here, MSIE uses event.srcElement
    */
    var target   = ev.target || ev.srcElement;
    var mousePos = mouseCoords(ev);
    

    if(dragObject){
        dragObject.style.position = 'absolute';
        dragObject.style.top      = mousePos.y - mouseOffset.y;
        dragObject.style.left     = mousePos.x - mouseOffset.x;
        if(dragObject.style.zIndex!=pageMaxNotes)
        {
            pageMaxNotes++;
            dragObject.style.zIndex=pageMaxNotes;
        }
    }

    // track the current mouse state so we can compare against it next time
    lMouseState = iMouseDown;

    // this prevents items on the page from being highlighted while dragging
    if(curTarget || dragObject) return false;
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

/**
 * @author Mr.Think
 * @author blog http://mrthink.net/
 * @2011.01.27
 * 可自由转载及使用,但请注明版权归属
 */
function fadeIn(elem, speed, opacity){
        //底层共用
    var iBase = {
        Id: function(name){
            return document.getElementById(name);
        },
		//设置元素透明度,透明度值按IE规则计,即0~100
        SetOpacity: function(ev, v){
            ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
        }
    }
    
       speed = speed || 20;
        opacity = opacity || 100;
      //显示元素,并将元素值为0透明度(不可见)
        elem.style.display = 'block';
        iBase.SetOpacity(elem, 0);
       //初始化透明度变化值为0
       var val = 0;
      //循环将透明值以5递增,即淡入效果
      (function(){
          iBase.SetOpacity(elem, val);
            val += 5;
           if (val <= opacity) {
               setTimeout(arguments.callee, speed)
            }
        })();
   }

/*
 *生成随机数
 */
function GetRandomNum(Min,Max)
{   
    var Range = Max - Min;   
    var Rand = Math.random();   
    return(Min + Math.round(Rand * Range));   
} 

/*
 *当文档加载完毕时将对留言条进行初始化
 */
window.onload = function() {
    
    //取得所有的note类留言条
    var notes=document.getElementsByName("note");
    
    //此时note所在层最小为49，最高层为49+note数量
    pageMaxNotes=49+notes.length;
    
    //得到此时文档宽度
    var bodyWidthMain = document.body.offsetWidth;
    
    //因为留言条的拖动是相对于整个body，而定位是相对于这个main
    //左右宽度body与main的差值
    var baseOffsetLeft = (bodyWidthMain-960)/2;
    
    //上下高度body与main的差值
    var baseOffsetTop = 0;
    
    //留言条出现的最低位置
    var maxHeight = 960-225;
    
    //留言条出现的最右位置
    
    var maxWidth = 960-235;
        
    for(var i=0;i

详细解释都在注释里，这里就不再多说了。学生党写得不好，还请见谅。

附：留言墙源码下载地址