Linux中国  设为主页
 收藏本站
 
当前位置: > 首页 ->网站设计 ->JavaScript ->用来实现Web页面图片移动托拽的代码段
  相关分类: 
AJAX教程
CSS/CSS2
Dreamweaver
Fireworks
Flash
HTML/DHTML
JavaScript
Phososhop
网页制作
  站内搜索: 
热门文章排行
热门文章排行 网页对联广告代码效果大全(06-05)
用JavaScript判断日期、数字、整数(04-13)
各种网页播放器代码大全(04-13)
几个很有用的javascript函数(04-13)
JavaScript方法和技巧大全(06-05)
精采文章排行
精采文章排行 用javascript+php随机显示图片(06-05)
限制文本字节数的JS源代码程序(06-05)
用来实现Web页面图片移动托拽的代码(06-05)
开发跨浏览器JavaScript时要注意的问(06-05)
javascript分页(06-05)
  ·限制文本字节数的JS源代码程序·用来实现Web页面图片移动托拽的代码段·开发跨浏览器JavaScript时要注意的问题·javascript分页·使用Javascript制作声音按钮·JavaScript技巧:让网页自动穿上外套·Javascript模拟的DOS窗口·利用javascript从数据库取数据来实现CSDN·将js文件编译成动态链接库(dll)文件

用来实现Web页面图片移动托拽的代码段

作者:Webmaster   来源:Linuxdby.com   点击:   日期:2007-06-05 [收藏] [投稿]

  IE是否经常中毒?推荐您

以下这段JS是主要解决在画面生成Image项目,并通过鼠标事件进行脱拽、移动等操作的代码。
<script language="javascript" type="text/javascript">
var top,left;
var src,drag,dir,ope,refer,halfwidth;
var unit=30;

var aryItems,itemNum=10,index,isInit,id,max=23;

function PageLoad()
{
    document.form1.onsubmit=OnSubmit;

    aryItems=new Array(itemNum);
    top=document.getElementById("TABLE").getClientRects()[0].top;
    left=document.getElementById("TABLE").getClientRects()[0].left;
   
    if(document.getElementById("__Gantt").value!=null&&document.getElementById("__Gantt").value!="")
    {
        var gantt=document.getElementById("__Gantt").value;
        var array=gantt.split(";");
        var length=array.length-1;
        var start,width,item;
       
        for(index=0;index<length;index++)
        {
            item=array[index].split(",");
            start=item[0];
            width=item[1];
           
            id="Item"+index;
            aryItems[index]=id;
           
            var track = document.createElement("IMG");
            track.setAttribute("id",id);
            track.setAttribute("src","blue.gif");

            document.body.appendChild(track);
            document.getElementById(id).style.position="absolute";
            document.getElementById(id).style.top=top+unit*index;
            document.getElementById(id).style.left=left+unit*start;
            document.getElementById(id).width=unit*width;
            document.getElementById(id).style.zIndex=9;
        }
    }
    else
    {
        for(index=0;index<itemNum;index++)
        {
            id="Item"+index;
            aryItems[index]=id;
           
            var track = document.createElement("IMG");
            track.setAttribute("id",id);
            track.setAttribute("src","blue.gif");

            document.body.appendChild(track);
            document.getElementById(id).style.position="absolute";
            document.getElementById(id).style.top=top+unit*index;
            document.getElementById(id).style.left=left+unit*index;
            document.getElementById(id).width=unit;
            document.getElementById(id).style.zIndex=9;
        }
    }
    drag=false;
    left=document.getElementById(aryItems[0]).getClientRects()[0].left;
}

function OnDrag()
{
    if(event.srcElement.tagName!="IMG"&&!drag)
    {
        if(event.srcElement.id=="btnTrim")
        {
//            OnTrim();
        }
    }
    else
    {
        if(!drag)

 如果您对本文有任何疑问或者建议,请到讨论区发表您的意见: >> 论坛入口 <<

上一页12 3 4 下一页

上一篇:开发跨浏览器JavaScript时要注意的问题   下一篇:限制文本字节数的JS源代码程序
文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论

   相关文章:
·用javascript+php随机显示图片

   文章评论:(1条)
  
 请留名: 匿名评论   点击查看所有评论 论坛讨论
 

 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。