html可以移动的浮动窗口

阅读更多

先看例子:

http://182.92.97.72/float_suspend/

效果描述:

(1) 鼠标点击" "即可拖动;

(2)滚动网页的竖直滚动条时,该窗口的位置固定不变;

(3)无论怎么移动,该窗口不会跑到网页可视范围之外

 

关键code:

// 拖拽效果
	function drag(){
		var tags = arguments;
		// alert(tags[0].length);//长度为4
		
		for(var i=0;i getInner().width + getScroll().left - $(_this).parent().get(0).offsetWidth) {
					left = getInner().width + getScroll().left- $(_this).parent().get(0).offsetWidth;
				}
				
				if (top < 0) {
					top = 0;
				}else if(top <= getScroll().top){
					top = getScroll().top
				} else if (top > getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight) {
					top = getInner().height + getScroll().top - $(_this).parent().get(0).offsetHeight;
				}


				$(_this).parent().get(0).style.left = left + 'px';
				$(_this).parent().get(0).style.top = top + 'px';
				//$(_this).parent().get(0).style.bottom= (50+old_top)+ 'px';
				if (typeof _this.setCapture != 'undefined') {
					_this.setCapture();
				} 
			}
			
			function up(e) {
				$('div.suspend').css("position", 'fixed');//保证上下移动滚动条时div保持不变,所以必须恢复为fixed
				var event_clientY=e.clientY;
				var top =event_clientY  - diffY;
				var screenHight=document.body.clientHeight;//屏幕高度,不兼容IE
				if(isIEtest ){//IE中,isIEtest的初始化在common_util.js 中
					screenHight=document.documentElement.clientHeight;//屏幕高度
				}
				var divHeight22=$(_this).parent().get(0).offsetHeight;//div 的高度
				//console.log(event_clientY+"\t "+diffY+"\t"+screenHight+"\t"+divHeight22+"\t"+document.body.scrollTop );
				var bottomZero=screenHight-divHeight22+diffY;
				//console.log(bottomZero+"\t"+top);
				if(event_clientY>bottomZero){//防止div跑到bottom以下,防止div跑出窗口之下
					//alert(111);
					top-=(event_clientY-bottomZero);
				}
				if(top<0)//top为负数,就表示div拖拽到窗口之上了
				{
					top=0;//防止div跑出窗口之上
				}
				$(_this).parent().get(0).style.top = top + 'px';//解决鼠标松开时位置突变的不正常现象
				$(document).unbind('mousemove',move);
				$(document).unbind('mouseup',up);
				if (typeof _this.releaseCapture != 'undefined') {
					_this.releaseCapture();
				}
			}


			});
		}

 源代码见附件float_suspend.zip

参考:http://huangkunlun520.blog.51cto.com/2562772/1570707

• 
• 大小: 59.8 KB

• 
• 大小: 2.6 KB

• float_suspend.zip (264.6 KB)
• 下载次数: 37

• 查看图片附件