调试客户端脚本 - javaca88

调试客户端脚本

控制面板----Internet选项----高级---浏览类别清除禁用脚本调试

设置短点

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Test_TestJavascript_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>

<link href="../../Test/TestJavascript/StyleSheet.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="JScript.js"></script>
   <script language="javascript" type="text/javascript">

   </script>
</head>
<body>

    <form id="form1" runat="server">
    <span id="p" >fdsafasfasdfasddas111111111111111111111111111111111111111111111</span>
    <div id="d">

    </div>

    <div id="info">
<h1>一些三角形的写法</h1> <div id="com_a"></div>
<div id="com_b"></div> <div id="com_f"></div>
<div id="com_g"></div> <div id="com_c"></div>
<div id="com_d"></div> <div id="com_e"></div>
<div id="com_h"></div> <div id="com_i"></div>
</div>
<input id="xx" type="text" />
<input id="yy" type="text" />
<input id="cm" type="text" />
<img src="../../Images/4.gif" name="gg" id="gg" alt="" />
<img src="../../Images/2.gif" name="ff" id="ff" alt="" />
    </form>
</body>
</html>

body
{

}

html>form #p
{
background-color:Red;
color:Lime;
}

#tri
{
border-left:solid #fff 20px;
border-top:solid 10px #666;
border-bottom:10px solid #FFFFCC;

}
/*
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体",
Arial; line-height:1.8; list-style:none;}

#info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC;
padding:50px;}

*/
#info div{background:#FF0000; width:0px; height:0px; overflow:hidden;
margin-bottom:10px;}/*point to innerHtml*/
/*一些三角的写法*/
#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid
#FF3300;border-bottom:10px solid #FFFFCC;}
#com_b{ border-top:10px solid #FFFFCC;border-right:10px solid
#FF3300;border-bottom:10px solid #FFFFCC;}
#com_c{ border-top:10px solid #FFFFCC;border-right:10px solid
#FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid
#FF3300;}
#com_d{ border-top:10px solid #FF3300;border-right:10px solid
#FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid
#FFFFCC;}
#com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_f{ border-top:10px solid #FF3300;border-right:10px solid
#FFFFCC;border-left:10px solid #FFFFCC;}
#com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid
#FF3300;border-left:10px solid #FFFFCC;}
#com_h{ border-top:10px solid #FF3300;border-bottom:10px solid
#FF3300;border-left:10px solid #FFFFCC;}
#com_i{ border-top:10px solid #FF3300;border-right:10px solid
#FF3300;border-bottom:10px solid #FF3300;border-left:10px solid
#FFFFCC;}

// JScript 文件

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

mouseCordnate(ev);

document.getElementById("xx").value = x;
document.getElementById("yy").value = y;
}
/*

你首先要声明一个evnet对象．不论何时你移动鼠标／点击／按键等等，会对应一个event的事件．在Internet Explorer里event是全局变量，会被存储在window.event里．在firefox中，或者其他浏览器，event事件会被相应的自定义函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove会获取鼠标移动事件．

　　(ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值．在MSIE下ev是空的，所以ev将设置为window.event.

　　因为我们在这篇文章中需要多次获取鼠标坐标，所以我们设计了mouseCoords这个函数，它只包含了一个参数，就是the event.

　　我们需要运行在MSIE与Firefox为首的其他浏览器下．Firefox以event.pageX和event.pageY来代表鼠标相应于文档左上角的位置．如果你有一个500*500的窗口，而且你的鼠标在正中间，那么paegX和pageY将是250，当你将页面往下滚动500px，那么pageY将是750.此时pageX不变，还是250.

　　MSIE和这个相反，MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置，并不是文档．当我们有一个500*500的窗口，鼠标在正中间，那么clientX与clientY也是250，如果你垂直滚动窗口到任何位置，clientY仍然是250，因为相对ie窗口并没有变化．想得到正确的结果，我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性．最后，由于MSIE并没有0,0的文档起始位置，因为通常会设置2px的边框在周围，边框的宽度包含在document.body.clientLeft与clientTop这两个属性中，我们再加入这些到鼠标的位置中．

　　很幸运，这样mouseCoords函数就完成了，我们不再为坐标的事操心了．

*/
document.onmousemove = mouseMove;
function mouseCordnate(ev)
{

   if(ev.pageX || ev.pageY)
   {
    x=v.pageX;
    y=ev.pageY;
   }
   else
   {
      x=ev.clientX+document.body.scrollLeft-document.body.clientLeft;
      y=ev.clientY+document.body.scrollTop-document.body.clientTop;

   }
}

var x;
var y;
/*

捕捉鼠标点击
　下次我们将知道鼠标何时点击与何时放开．如果我们跳过这一步，我们在做拖拽时将永远不知道鼠标移动上面时的动作，这将是恼人的与违反直觉的．
这里有两个函数帮助我们:onmousedown与onmouseup.我们预先设置函数来接收document.onmousemove，
这样看起来很象我们会获取document.onmousedown与document.onmouseup．但是当我们获取document.onmousedown时，
我们同时获取了任何对象的点击属性如:text,images,tables等等.我们只想获取那些需要拖拽的属性，所以我们设置函数来获取我们需要移动的对象．

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

target = ev.target || ev.srcElement;

if(target.onmousedown || target.getAttribute("Dragobj"))
{
return false;
}
}

function makeClickAble(item)
{
if(!item) return;

item.onmousedown=function(ev){

document.getElementById("cm").value = this.name;
}
}

document.onmousedown = mouseDown;

window.onload=function()
{
makeClickAble(document.getElementById("gg"));
makeClickAble(document.getElementById("ff"));

}
/*
．首先，要确定一个明确的页面位置，css样式表要用'absolute'.设置元素绝对位置意味着我们可以用样式表的.top和.left来定位，
可以用相对位置来定位了．我们将鼠标的移动全部相对页面top-left，基于这点，我们可以进行下一步了．

*/
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;

var dragObject =null;
var mouseOffset = null;
var curTarget = null;

var gx;
var gy;
function getMouseOffSet(target,ev)
{
ev= ev ||window.event;

mouseCordnate(ev);

getPosition(ev);

gx = x-m;
gy = y-n;
}
var m;
var n;
function getPosition(e)
{
var left=0;
var top =0;

while(e.offsetParent)
{
    left += e.offsetLeft;
    top += e.offsetTop;
    e=e.offsetParent;
}

left += e.offsetLeft;
top += e.offsetTop;

m=left;
n=top;
}

function mouseUp()
{
gx=0;
gy=0;
}

posted on 2006-12-05 16:13 javaca88 阅读(216) 评论(0) 收藏举报

刷新页面返回顶部

漫漫技术人生路

公告