首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

关于页面重新加载调用COOKIES的有关问题

2013-03-12 
关于页面重新加载调用COOKIES的问题1.页面有一个可移动的DIV(页面第一次加载默认CSS样式LEFT:100PXTOP:10

关于页面重新加载调用COOKIES的问题
1.页面有一个可移动的DIV(页面第一次加载默认CSS样式LEFT:100PX;TOP:100pX).通过鼠标按下,移动,弹起后.可移动DIV的新坐标如(LEFT:300PX;TOP:200PX)=>通过COOKIES保存这个新坐标.

2.没有关闭浏览器的情况下,页面重新刷新后,如何调用COOKIES保存的坐标并赋值给这个可移动的DIV,让这个DIV的默认样式为(LEFT:300PX;TOP:200PX)而不是(LEFT:100PX;TOP:100pX),我应该怎么做呢?
[解决办法]
1.
$.cookie('left','300');
$.cookie('top','200');

2.
if($.cookie('left') && $.cookie('right')) {
    $('div').css('left',$.cookie('left')+'px');
    $('div').css('top',$.cookie('right')+'px');
}
[解决办法]
把你的<script type="text/javascript">换成下面的就行了!!!


<script type="text/javascript">
    // 拖拽与发送实现
        $(document).ready(function () {
            //拖拽
            var _move = false; //移动标记
            var _x, _y;
            var index_x, index_y;
 
            $("#drag").bind("mousedown", downIndex); //div鼠标按下事件绑定
            $(document).bind("mousemove", mmove); //鼠标移动事件绑定
            $(document).bind("mouseup", mup); //鼠标弹起事件绑定
            function mmove(e) {
                if (_move) {
                    var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置
                    var y = e.pageY - _y;
                    $("#drag").css({ top: y, left: x }); //div新位置
                    SetCookie('left',x);
                    SetCookie('top',y);
                }
            }
            function mup() {
                _move = false;
           }
            function downIndex(e) {
                _move = true;
                _x = e.pageX - parseInt($("#drag").css("left"));
                _y = e.pageY - parseInt($("#drag").css("top"));


 
            }
if(GetCookie('left') && GetCookie('top')) {
    $('#drag').css('left',GetCookie('left')+'px');
    $('#drag').css('top',GetCookie('top')+'px');
}
function SetCookie (name, value) {
       var exp = new Date();
       exp.setTime (exp.getTime()+3600000000);
       document.cookie = name + "=" + value + "; expires=" + exp.toGMTString()+"; path=/";
}
function GetCookie(name) {
         var arg = name + "=";
         var alen = arg.length;
         var clen = document.cookie.length;
         var i = 0;
         while (i < clen) {
             var j = i + alen;
             if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
             i = document.cookie.indexOf(" ", i) + 1;
             if (i == 0) break;
         }
      return null;
 } 
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
 }
 
        });
</script>


热点排行