天天综合色天天综合色hd,精品国产一二,欧美黄色免费

拖動(dòng)效果封裝已經(jīng)修改，適應(yīng)火狐

藍(lán)色理想 2009/5/2 21:35:40 深山行者字體:大中小瀏覽 12807

以下為詳細(xì)代碼

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖動(dòng)效果 封裝 已經(jīng)修改，適應(yīng)火狐</title>
<style type="text/css">

</style>
<script type="text/javascript">
/*
十三妖
qq:181907667
msn:wl181907667@hotmail.com
郵箱:thirdteendevil@163.com
*/
function dragClass(){
	this.mouseState = document.all ? 1 : 0 ;
	this.x;
	this.y;
	this.dragId = null;
	this.index = 100;
	document.onselectstart = function(){return false;};
}
dragClass.prototype = {
	dragStar:function(dragId,moveId){//拖動(dòng)入口函數(shù)
		var _this = this;	
		_this.$(dragId).style.cursor = "move";	
		_this.$(dragId).onmousedown = function(e){
			var e = e ? e : event;
			//_this.$(moveId).style.zIndex = _this.index++;
			if(e.button == _this.mouseState)
			{
				_this.setDragInfo(e,moveId,moveId);
				_this.dragPro(moveId);
			}			
		},
		_this.$(moveId).onmousedown = function(e){
			_this.$(moveId).style.zIndex = _this.index++;
		},		
		_this.$(dragId).onmouseup = function(){
			_this.clearDragId();
		}
		document.onmouseup = function(){
			_this.clearDragId();
		}
	},
	setDragInfo:function(e,dragId,moveId){//拖動(dòng)初始化
		this.x = e.clientX;
		this.y = e.clientY;
		this.dragId = dragId;
		if(this.$(moveId).style.position != "absolute")
		{
			this.$(moveId).style.width = this.$(moveId).offsetWidth + "px";	
			this.$(moveId).style.height = this.$(moveId).offsetHeight + "px";
			this.$(moveId).style.position = "absolute";
			this.$(moveId).style.left = this.$(moveId).offsetLeft + "px";
			this.$(moveId).style.top = this.$(moveId).offsetTop + "px";
		}				
	},
	clearDragId:function(){ //清除拖動(dòng)ID
		this.dragId = null;
	},
	dragPro:function(moveId){
		var _this = this;
		document.onmousemove = function(e){
			var e = e ? e : event;
			if(e.button == _this.mouseState && _this.dragId != null)
			{
				var x = e.clientX;
				var y = e.clientY;
				//_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";
				//_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";
				_this.$(moveId).style.left = (parseInt(_this.$(moveId).style.left) + (x - _this.x)) + "px";
				_this.$(moveId).style.top = (parseInt(_this.$(moveId).style.top) + (y - _this.y)) + "px";
				_this.x = x;
				_this.y = y;
				//alert(_this.$(dragId).style.left);
			}
			
		}
	},
	$:function(o){//獲取對(duì)象
		if(typeof(o) == "string")
		{
			if(document.getElementById(o))
			{
				return document.getElementById(o);
			}
			else
			{
				alert("errId \""+ o + "\"!");
				return false;
			}
		}
		else
		{
			return o;
		}
	}
}
window.onload = function(){
	var c = new dragClass();
	c.dragStar("b","a");
	c.dragStar("d","c");
}
</script>
</head>
<body>
<div class="bodyer">
	<h1 class="t_rt">
		鼠標(biāo)拖動(dòng)層封裝類
	</h1>
	
	<h2>
		效果預(yù)覽
	</h2>
	
	<div class="preview">
		<div class="scrolldoorFrame">
			<div id="a" style="width:200px;height:150px;background:#FFF;border:1px solid #DDD;">
				<div id="b" style="height:20px;margin:1px;line-height:22px;overflow:hidden;background:#999;font-size:12px;font-weight:bold;color:#FFF;padding-left:15px;">
				拖動(dòng)層1
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;移動(dòng)層
			</div>
			
			<div id="c" style="width:200px;height:150px;background:#FFF;border:1px solid #DDD;">
				<div id="d" style="height:20px;margin:1px;line-height:22px;overflow:hidden;background:#999;font-size:12px;font-weight:bold;color:#FFF;padding-left:15px;">
				拖動(dòng)層2
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;移動(dòng)層
			</div>
		</div>
	</div>
	
	<h2>
		源代碼
	</h2>
	
	<div class="textDiv">
		<textarea id="sourse">
function dragClass(){
	this.mouseState = document.all ? 1 : 0 ;
	this.x;
	this.y;
	this.dragId = null;
	this.index = 100;
	document.onselectstart = function(){return false;};
}
dragClass.prototype = {
	dragStar:function(dragId,moveId){//拖動(dòng)入口函數(shù)
		var _this = this;	
		_this.$(dragId).style.cursor = "move";	
		_this.$(dragId).onmousedown = function(e){
			var e = e ? e : event;
			//_this.$(moveId).style.zIndex = _this.index++;
			if(e.button == _this.mouseState)
			{
				_this.setDragInfo(e,moveId,moveId);
				_this.dragPro(moveId);
			}			
		},
		_this.$(moveId).onmousedown = function(e){
			_this.$(moveId).style.zIndex = _this.index++;
		},		
		_this.$(dragId).onmouseup = function(){
			_this.clearDragId();
		}
		document.onmouseup = function(){
			_this.clearDragId();
		}
	},
	setDragInfo:function(e,dragId,moveId){//拖動(dòng)初始化
		this.x = e.clientX;
		this.y = e.clientY;
		this.dragId = dragId;
		if(this.$(moveId).style.position != "absolute")
		{
			this.$(moveId).style.width = this.$(moveId).offsetWidth + "px";	
			this.$(moveId).style.height = this.$(moveId).offsetHeight + "px";
			this.$(moveId).style.position = "absolute";
			this.$(moveId).style.left = this.$(moveId).offsetLeft + "px";
			this.$(moveId).style.top = this.$(moveId).offsetTop + "px";
		}				
	},
	clearDragId:function(){ //清除拖動(dòng)ID
		this.dragId = null;
	},
	dragPro:function(moveId){
		var _this = this;
		document.onmousemove = function(e){
			var e = e ? e : event;
			if(e.button == _this.mouseState && _this.dragId != null)
			{
				var x = e.clientX;
				var y = e.clientY;
				//_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";
				//_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";
				_this.$(moveId).style.left = (parseInt(_this.$(moveId).style.left) + (x - _this.x)) + "px";
				_this.$(moveId).style.top = (parseInt(_this.$(moveId).style.top) + (y - _this.y)) + "px";
				_this.x = x;
				_this.y = y;
				//alert(_this.$(dragId).style.left);
			}
			
		}
	},
	$:function(o){//獲取對(duì)象
		if(typeof(o) == "string")
		{
			if(document.getElementById(o))
			{
				return document.getElementById(o);
			}
			else
			{
				alert("errId \""+ o + "\"!");
				return false;
			}
		}
		else
		{
			return o;
		}
	}
}
		</textarea>
	</div>
	
	<h2>
		使用方法
	</h2>
	
  <div class="preview">
		1.把以上代碼引進(jìn)你的頁(yè)面 &lt;script type=&quot;text/javascript&quot; src=&quot;dragClass.js&quot;&gt;&lt;/script&gt;<br/>
		2.在頁(yè)面的"&lt;/body&gt;"標(biāo)簽前加入以下代碼:<br/>
		<div class="example">			
			&lt;script type=&quot;text/javascript&quot;&gt;<br/>
			window.onload = function(){<br />
	var c = new dragClass();//創(chuàng)建對(duì)象<br />
	c.dragStar(&quot;拖動(dòng)id&quot;,&quot;移動(dòng)層id&quot;);<br />
}<br/>
			&lt;/script&gt;
		</div>	
		其中sd方法中的參數(shù)為:<br/>
			參數(shù)一 "拖動(dòng)id":鼠標(biāo)經(jīng)過(guò)時(shí)候鼠標(biāo)樣式變成移動(dòng)樣式模樣的元素的id<br/>
			參數(shù)二 "移動(dòng)層id":即將移動(dòng)的元素的id<br/>	
		<span class="red">3.建議移動(dòng)層是絕對(duì)定位(position:absolute;).</span>		
  </div>
	
</div>
<div class="authorInfo">
	<div class="cont">
		十三妖 ThirdteenDevil <br/>
		[qq:181907667] [msn:wl181907667@hotmail.com] [e-mail:thirdteendevil@163.com]
	</div>
</div>
</body>
</html>

前一頁(yè):兼容IE和FF的收藏本站、設(shè)為首頁(yè)代碼

后一頁(yè):漂亮的頁(yè)面loading等待頁(yè)面特效(3)

相關(guān)閱讀: 淮安電視臺(tái)主持人選拔大賽網(wǎng)絡(luò)投票; 吉林省觀光國(guó)際旅行社; 圖片漸顯輪流播放; 簡(jiǎn)單的圓角實(shí)現(xiàn)方案; 在網(wǎng)頁(yè)標(biāo)題欄上或收藏夾前面顯示網(wǎng)站ico小圖標(biāo)的方法; 抖音直播音掛載小雪花懂車帝小程序; iframe里阻止_blank彈出新窗口的方法; uni-app自定義組件調(diào)用

共有0條關(guān)于《拖動(dòng)效果封裝已經(jīng)修改，適應(yīng)火狐》的評(píng)論: 發(fā)表評(píng)論

正在加載評(píng)論......

返回頂部發(fā)表評(píng)論

呢稱:
表情:
內(nèi) 容:	評(píng)論內(nèi)容:不能超過(guò) 1000 字,需審核,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。
驗(yàn)證碼:

網(wǎng)友評(píng)論聲明,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。

您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。

更多信息>>欄目類別選擇: 百度小程序開(kāi)發(fā); 微信小程序開(kāi)發(fā); 微信公眾號(hào)開(kāi)發(fā); uni-app; asp函數(shù)庫(kù); ASP; DIV+CSS; HTML; python

更多>>同類信息: jquery下拉到某個(gè)固定位置然后某些元素發(fā)生改變樣式狀態(tài); canvas繪制的文字如何換行; 兼容pc、移動(dòng)端用js實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板（支持蘋果safari瀏覽器）; js兼容多個(gè)瀏覽器右下角漂浮廣告; 兼容ie6+和火狐的禁止右鍵; 做在線客服時(shí)，聊天窗口的div滾動(dòng)條始終在底部

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動(dòng)端自動(dòng)化測(cè)試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來(lái)做投票; 火狐Mozilla Firefox出現(xiàn)：無(wú)法載入您的Firefox配置文件它可能已經(jīng)丟失或是無(wú)法訪問(wèn) 問(wèn)題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過(guò)代碼修改pip下載源讓下載庫(kù)飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機(jī)抽取信息: ul,li設(shè)置新聞列表,超出范圍對(duì)象,自動(dòng)隱藏; uni-app設(shè)置像頁(yè)面html或者body的全局背景色; 連云港旅游網(wǎng); 一個(gè)非常實(shí)用的當(dāng)你在關(guān)閉任何窗口時(shí)都作出提示[推薦]; 留言板留言板V7.21; HTML文檔中meta標(biāo)簽的作用

更多標(biāo)簽熱門標(biāo)簽

快捷鍵 table 驗(yàn)證碼教程預(yù)覽參數(shù) PSD msn 留言板萬(wàn)年歷進(jìn)度過(guò)期高亮背景風(fēng)格 Request float blog position 創(chuàng)建初級(jí) border 二級(jí) 樹(shù)型 DOCTYPE 高度單選 IE8 css 透明路徑增大奮斗 clear 酷表達(dá)式 163 選擇框后臺(tái) 標(biāo)語(yǔ) VBScript asp alert 動(dòng)態(tài) js 十字美化貨幣 instr 小旋風(fēng) 不對(duì)齊

99热热热_国产成人自拍一区_欧美一级网站_99热在线播放_国产精品乱码一区二区三区_久久精品国产一区二区三区

拖動(dòng)效果 封裝 已經(jīng)修改，適應(yīng)火狐

拖動(dòng)效果封裝已經(jīng)修改，適應(yīng)火狐