Ajax Blog 用到的几个函数第3/3页

 更新时间:2006年10月03日 00:00:00   作者:  

drag.js主要用于移动
复制代码 代码如下:

var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;  
var normal='#C6E7FF';  //正常时的背景颜色
var index=10000;      //z-index;

//开始拖动;
function startDrag(obj)
{
    if(event.button==1)
    {
        obj.setCapture(); //锁定标题栏;
        var win = obj.parentNode; //定义对象;
        x0 = event.clientX;    //记录鼠标和层位置;
        y0 = event.clientY;
        x1 = parseInt(win.style.left);
        y1 = parseInt(win.style.top);
        moveable = true;
    }
}

//拖动;
function drag(obj)
{
    if(moveable)
    {
        var win = obj.parentNode;
        win.style.left = x1 + event.clientX - x0;
        win.style.top  = y1 + event.clientY - y0;
    }
}

//停止拖动;
function stopDrag(obj)
{
    if(moveable)
    {
        obj.releaseCapture();
        moveable = false;
    }
}

//获得焦点;
function getFocus(obj)
{
    if(obj.style.zIndex!=index)
    {
        index = index + 2;
        var idx = index;
        obj.style.zIndex=idx;
        obj.nextSibling.style.zIndex=idx-1;
    }
}
//最小化;
function min(obj)
{
    var win=obj.parentNode.parentNode.parentNode;
    var msg=win.childNodes;
    var flg=msg(1).style.display;
    if(flg=="none")
    {
        msg(1).style.display = "block";
        obj.src= "images/opentriangle.gif";
    }else{
        msg(1).style.display = "none";
        obj.src= "images/TRIANGLE.GIF";
    }
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
    index = index+2;
    this.id      = id;
    this.width   = w;
    this.height  = h;
    this.left    = l;
    this.top     = t;
    this.zIndex  = index;
    this.title   = tit;
    this.message = msg;
    this.obj     = null;
    this.bulid   = bulid;
    this.bulid();
}
//初始化;
function bulid()
{
    var str = ""
        + "<div id=xMsg" + this.id + " "
        + "style='"
        + "z-index:" + this.zIndex + ";"
        + "width:" + this.width + ";"
        + "left:" + this.left + ";"
        + "top:" + this.top + ";"
        + "background-color:#fff;"
        + "color:#000;"
        + "font-size:14px;"
        + "position:absolute;"
        + "display:none;"
        + "border:#6BC3FF 1px solid ;'"
        + "onmousedown='getFocus(this)'>"

        + "<div "
        + "style='"
        + "background-color:" + normal + ";"
        + "width:" + (this.width+5) + ";"
        + "line-height:26px;cursor:move;border:1px #ccc solid;"
        + "margin:1px;vertical-align:middle"
        + "' "
        + "onmousedown='startDrag(this)' "
        + "onmouseup='stopDrag(this)' "
        + "onmousemove='drag(this)' "
        + "ondblclick='min(this.childNodes[1])'"
        + ">"
        + "<span style='float:left;width:50%;text-align:left;padding-left:3px;font-weight:bold;'>" + this.title +""+"</span>"
        + "<span style='float:right;width:47%;text-align:right;padding-right:3px;padding-top:5px;'> "
        +"<img src='images/opentriangle.GIF' onclick='min(this)' style='cursor:pointer;'/>&nbsp;"
        +"<img src='images/CloseBtn.gif' onclick='$SHwin(\""+this.id+"\")' style='cursor:pointer;'/></span>"    
        + "</div>"

        + "<div style='"
        + "width:100%;"
        + "height:" + this.height + ";"
        + "background-color:white;"
        + "line-height:14px;"
        + "word-break:break-all;"
        + "padding:3px;"
        + "'>" + this.message + "</div>"

        + "</div>"
    document.body.insertAdjacentHTML("beforeEnd",str);
}

function $SHwin(id){
    if(document.getElementById("xMsg"+id).style.display=='none'){
     document.getElementById("xMsg"+id).style.display='block';
    }
    else{
      document.getElementById("xMsg"+id).style.display='none';
    }
}

相关文章

  • js自定义回调函数

    js自定义回调函数

    这篇文章主要介绍了javascript自定义回调函数,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • javascript 在网页中的运用(asp.net)

    javascript 在网页中的运用(asp.net)

    javascript在网页中的运用实现,需要的朋友可以参考下。
    2009-11-11
  • 再谈Javascript中的异步以及如何异步

    再谈Javascript中的异步以及如何异步

    大家都知道js是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然没有问题,如果遇到可以并发执行的业务逻辑,再排队就很低级了!所以这里我们再来简单的谈谈JS中的异步以及如何异步。
    2016-08-08
  • JS实现简单的二元方程计算器功能示例

    JS实现简单的二元方程计算器功能示例

    这篇文章主要介绍了JS实现简单的二元方程计算器功能,涉及javascript数学运算相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • JavaScript 变量作用域及闭包

    JavaScript 变量作用域及闭包

    作用域JavaScript 的变量作用域是按照函数划分的,为了快速的了解它的特性,我们通过实例来进行演示。
    2009-08-08
  • echarts图表无数据/空数据如何展示"暂无数据"

    echarts图表无数据/空数据如何展示"暂无数据"

    在开发echarts的时候我们不得不考虑数据为空的情况,其实有很多种解决办法,下面这篇文章主要给大家介绍了关于echarts图表无数据/空数据如何展示“暂无数据”的相关资料,需要的朋友可以参考下
    2022-10-10
  • 原生javascript实现拖动元素示例代码

    原生javascript实现拖动元素示例代码

    首先改变被拖动元素的布局属性,接着捕捉鼠标事件,当触发mousedown时,记录下当前鼠标在元素中的相对位置,接着处理mousemove事件
    2014-09-09
  • javascript实现表单隔行变色

    javascript实现表单隔行变色

    这篇文章主要为大家详细介绍了javascript实现表单隔行变色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路

    扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路

    js的扩展方法是基于原型的,如Array.prototype.XXXX就是给Array扩展XXX方法,然后数组都能使用这个方法了,在对象数组里面经常有根据属性来进行排序的,升序,降序的,下面与大家分享自己写的一个
    2013-05-05
  • js类型转换与引用类型详解(Boolean_Number_String)

    js类型转换与引用类型详解(Boolean_Number_String)

    本篇文章主要是对js中的类型转换与引用类型(Boolean_Number_String)进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03

最新评论