论坛首页 Web前端技术论坛

jQueryUI完美许愿墙

浏览 4279 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2015-05-08  
相信很多网友见过类似许愿墙的程序,用户可以在网页上贴个许愿的纸条,并且可以拖动到页面的任意位置上。今天我要给大家演示的是使用PHP+MySQL+jQuery实现一个工作当中用到的贴便签纸的功能。

许愿墙网页特效演示http://www.sucaihuo.com/php/70.html
添加许愿条:
$("#addbtn").live('click', function(e) { 
        var txt = $("#note_txt").val(); 
        var user = $("#user").val(); 
        var color = $("#mycolor").val(); 
        if (txt == "") { 
            $("#msg").html("内容不能为空"); 
            $("#note_txt").focus(); 
            return false; 
        } 
        if (user == "") { 
            $("#msg").html("请输入您的姓名!"); 
            $("#user").focus(); 
            return false; 
        } 
        var left = 0; 
                var top = 0; 
        var data = { 
            'zIndex': ++zIndex, 
            'content': txt, 
            'user': user, 
            'color': color, 
            'left':left, 
            'top':top 
        }; 
        $.post('posts.php', data, function(msg) { 
            zIndex = zIndex++; 
            //alert(zIndex); 
            if (parseInt(msg)) { 
                 
                var str = "<div class='note " + color + "' style='left:"+left+";top:"+top+";z-index:" + zIndex + "'><span class='data'>" + msg + ".</span>" + txt + "<p>——" + user + "(刚刚)</p></div>"; 
                $(".container").append(str); 
                make_draggable($('.note')); 
                $.fancybox.close(); 
            } else { 
                $("#msg").html(msg); 
            } 
        }); 
        e.preventDefault(); 
    });
   发表时间:2015-05-11  
good~~~~~~~~~~~~~~
0 请登录后投票
   发表时间:2015-05-12  
火狐下每次新增框都在最底层,建议每次新增许愿墙的时候,新增框在最顶层。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics