【免费】Ajax部分效果制作，主要是通过js实现的资源-CSDN文库

共290个文件

jpg：115个

cs：44个

aspx：32个

Ajax,js

需积分: 0 176 浏览量 2010-05-17 10:31:05 上传评论收藏 2.72MB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

Ajax部分效果制作，主要是通过js实现的（290个子文件）

head.ascx 8KB

TShFL.ascx 2KB

foot.ascx 2KB

ZTShB.ascx 1KB

KShShW.ascx 639B

QKZL.ascx 635B

ysjptj.ascx 574B

ImageHandler1.ashx 1KB

ImageHandler.ashx 1KB

xzqh.asmx 81B

ZhC.aspx 20KB

tsgl.aspx 13KB

Bookshow.aspx 13KB

Default.aspx 11KB

Bookjdshow.aspx 8KB

lbgl.aspx 8KB

Default.aspx 5KB

kcgl.aspx 4KB

ShoppingCar.aspx 4KB

Default.aspx 4KB

ztgl.aspx 3KB

Bookfl.aspx 3KB

BookMain.aspx 1KB

BookSubMain.aspx 1KB

Default2.aspx 897B

Default2.aspx 811B

DisposeEvent.aspx 526B

ShoppingOrder.aspx 449B

BookSearchHigh.aspx 449B

Default.aspx 445B

hdpt.aspx 443B

BookSubject.aspx 443B

BookSublist.aspx 443B

OrderShow.aspx 441B

BookAbsent.aspx 441B

BookSearch.aspx 441B

Order.aspx 433B

index.aspx 433B

Bookcc.aspx 433B

ddgl.aspx 430B

newusers_gif.aspx 372B

web.config 9KB

Web.Config 2KB

lbgl.aspx.cs 9KB

ztgl.aspx.cs 7KB

User.cs 7KB

tsgl.aspx.cs 6KB

DisposeEvent.aspx.cs 6KB

Default.aspx.cs 4KB

newusers_gig.cs 3KB

Bookjdshow.aspx.cs 3KB

Bookshow.aspx.cs 3KB

TShFL.ascx.cs 2KB

Bookfl.aspx.cs 2KB

xzqh.cs 2KB

AjaxMethod.cs 1KB

head.ascx.cs 1KB

ZTShB.ascx.cs 1KB

ZhC.aspx.cs 874B

newusers_gif.aspx.cs 859B

Default2.aspx.cs 811B

Connection.cs 738B

Default.aspx.cs 383B

ysjptj.ascx.cs 299B

ShoppingOrder.aspx.cs 294B

BookSearchHigh.aspx.cs 293B

ShoppingCar.aspx.cs 292B

OrderShow.aspx.cs 290B

BookSubject.aspx.cs 290B

BookSublist.aspx.cs 290B

BookSearch.aspx.cs 289B

BookAbsent.aspx.cs 289B

Default.aspx.cs 287B

KShShW.ascx.cs 287B

Order.aspx.cs 286B

index.aspx.cs 286B

foot.ascx.cs 285B

QKZL.ascx.cs 285B

hdpt.aspx.cs 285B

Bookcc.aspx.cs 285B

BookSubMain.aspx.cs 285B

kcgl.aspx.cs 284B

ddgl.aspx.cs 284B

Default.aspx.cs 283B

Default2.aspx.cs 282B

BookMain.aspx.cs 282B

shouye.css 3KB

YeMian.css 3KB

yangshi.css 3KB

bookys.css 768B

sy.css 534B

zuolan.css 446B

sjy.css 351B

bys.css 251B

ystou.css 41B

hdpbf.css 15B

TuShuZhY.css 14B

共 290 条

<!-- 【程序原理】这里以SimpleDrag为例说一下基本原理。首先初始化程序中要一个拖放对象： this.Drag = $(drag); 还要两个参数在开始时记录鼠标相对拖放对象的坐标： this._x = this._y = 0; 还有两个事件对象函数用于添加移除事件： this._fM = BindAsEventListener(this, this.Move); this._fS = Bind(this, this.Stop); 分别是拖动程序和停止拖动程序。拖放对象的position必须是absolute绝对定位： this.Drag.style.position = "absolute"; 最后把Start开始拖放程序绑定到拖放对象mousedown事件： addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); 鼠标在拖放对象按住，就会触发Start程序，主要是用来准备拖动，在这里记录鼠标相对拖放对象的坐标： this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; 并把_fM拖动程序和_fS停止拖动程序分别绑定到document的mousemove和mouseup事件： addEventHandler(document, "mousemove", this._fM); addEventHandler(document, "mouseup", this._fS); 绑定到document可以保证事件在整个窗口文档中都有效。当鼠标在文档上移动时，就会触发Move程序了，这里就是实现拖动的程序。通过现在鼠标的坐标值跟开始拖动时鼠标相对的坐标值的差就可以得到拖放对象应该设置的left和top了： this.Drag.style.left = oEvent.clientX - this._x + "px"; this.Drag.style.top = oEvent.clientY - this._y + "px"; 最后放开鼠标后就触发Stop程序结束拖放。这里的主要作用是把Start程序中给document添加的事件移除： removeEventHandler(document, "mousemove", this._fM); removeEventHandler(document, "mouseup", this._fS); 这样一个简单的拖放程序就做好了，下面说说其他扩展和细节部分。【拖放锁定】锁定分三种，分别是：水平方向锁定(LockX)、垂直方向锁定(LockY)、完全锁定(Lock)。这个比较简单，水平和垂直方向的锁定只要在Move判断是否锁定再设置left和top就行，如果是完全锁定就直接返回。 if(!this.LockX){ this.Drag.style.left = ...; } if(!this.LockY){ this.Drag.style.top = ...; } 【触发对象】触发对象是用来触发拖放程序的。有的时候不需要整个拖放对象都用来触发，这时就需要触发对象了。使用了触发对象后，进行移动的还是拖放对象，只是用触发对象来触发拖放（一般的使用是把触发对象放到拖放对象里面）。【范围限制】要设置范围限制必须先把Limit设为true。范围限制分两种，分别是固定范围和容器范围限制，主要在Move程序中设置。原理是当比较的值超过范围时，修正left和top要设置的值使拖放对象能保持在设置的范围内。【固定范围限制】容器范围限制就是指定上下左右的拖放范围。各个属性的意思是：上(mxTop)：top限制；下(mxBottom)：top+offsetHeight限制；左(mxLeft)：left限制；右(mxRight)：left+offsetWidth限制。如果范围设置不正确，可能导致上下或左右同时超过范围的情况，所以要在Start程序中进行修正： this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth); this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight); 其中mxLeft+offsetWidth和mxTop+offsetHeight分别是mxRight和mxBottom的最小范围值。根据范围参数修正移动参数： iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft); iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop); 对于左边上边要取更大的值，对于右边下面就要取更小的值。【容器范围限制】容器范围限制的意思就是把范围限制在一个容器_mxContainer内。要注意的是拖放对象必须包含在_mxContainer中，因为程序中是使用相对定位来设置容器范围限制的（如果是在容器外就要用绝对定位，这样处理就比较麻烦了），还有就是容器空间要比拖放对象大，这个就不用说明了吧。原理跟固定范围限制差不多，只是范围参数是根据容器的属性的设置的。当设置了容器，会自动把position设为relative来相对定位： !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative"); 注意relative要在获取offsetLeft和offsetTop即设置_x和_y之前设置，offset才能正确获取值。由于是相对定位，对于容器范围来说范围参数上下左右的值分别是0、clientHeight、0、clientWidth。 clientWidth和clientHeight是容器可视部分的宽度和高度（详细参考这里）。为了容器范围能兼容固定范围的参数，程序中会获取容器范围和固定范围中范围更小的值： mxLeft = Math.max(mxLeft, 0); mxTop = Math.max(mxTop, 0); mxRight = Math.min(mxRight, this._mxContainer.clientWidth); mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight); 要注意如果在程序执行之前设置过拖放对象的left和top而容器没有设置relative，在自动设置relative时会发生移位现象，所以尽量避免没有设置relative而又设置了拖放对象left和top，才执行程序的情况。不过也有一个取巧的方法就是设置margin来代替定位（使用margin的话会自动修正，后面说明）。因为设置相对定位的关系，容器_mxContainer设置过后一般不要取消或修改，否则很容易造成移位异常。【鼠标捕获】我在一个拖放实例中看到，即使鼠标移动到浏览器外面，拖放程序依然能够执行，仔细查看后发现是用了setCapture。鼠标捕获(setCapture)是这个程序的重点，作用是将鼠标事件捕获到当前文档的指定的对象。这个对象会为当前应用程序或整个系统接收所有鼠标事件。使用很简单： this._Handle.setCapture(); setCapture捕获以下鼠标事件：onmousedown、onmouseup、onmousemove、onclick、ondblclick、onmouseover和onmouseout。程序中主要是要捕获onmousemove和onmouseup事件。 msdn的介绍中还说到setCapture有一个bool参数，用来设置在容器内的鼠标事件是否都被容器捕获。容器就是指调用setCapture的对象，大概意思就是：参数为true时（默认）容器会捕获容器内所有对象的鼠标事件，即容器内的对象不会触发鼠标事件（跟容器外的对象一样）；参数为false时容器不会捕获容器内对象的鼠标事件，即容器内的对象可以正常地触发事件和取消冒泡。而对于容器外的鼠标事件无论参数是什么都会被捕获，可以用下面这个简单的例子测试一下（ie）： <html> <body onclick="alert(2)"> <div onmousemove="alert(1)">mouseover </div> <script>document.body.setCapture(); </script> </body> </html> 这里的参数是true，一开始body会捕获所有鼠标事件，即使鼠标经过div也不会触发onmousemove事件。换成false的话，div就可以捕获鼠标事件，就能触发onmousemove事件了。拖放结束后还要使用releaseCapture释放鼠标，这个可以放在Stop程序中： this._Handle.releaseCapture(); setCapture是ie的鼠标捕获方法，对于ff也有对应的captureEvents和releaseEvents方法。但这两个方法只能由window来调用，而且muxrwc说这两个方法在DOM2里已经废弃了，在ff里已经没用了。不过ff里貌似会自动设置取消鼠标捕获，但具体的情形就不清楚了，找不到一个比较详细的介绍，谁有这方面的资料记得告诉我啊。下面都是我的猜测，ff的鼠标捕获相当于能自动