急 急 急！！！ JavaScript 滚动条无法动态添加的问题？

yqyqyoyo 2009-07-21 03:01:21
这个是一个JS重写滚动条，现在出现一个问题。 在我点击发表按钮的时候，会出现页面发表的内容无法显示出来。请高手看看是怎么回事！ 在线等。 分不够可以加！


var isIE = (document.all) ? true : false;

var $$ = function (id) {

	return "string" == typeof id ? document.getElementById(id) : id;

};

var Class = {

	create: function() {

		return function() { this.initialize.apply(this, arguments); }

	}

}

var Extend = function(destination, source) {

	for (var property in source) {

		destination[property] = source[property];

	}

}

var Bind = function(object, fun) {

	var args = Array.prototype.slice.call(arguments).slice(2);

	return function() {

		return fun.apply(object, args);

	}

}

var BindAsEventListener = function(object, fun) {

	return function(event) {

		return fun.call(object, Event(event));

	}

}

function Event(e){

	var oEvent = isIE ? window.event : e;

	if (isIE) {

		oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft;

		oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop;

		oEvent.preventDefault = function () { this.returnValue = false; };

		oEvent.detail = oEvent.wheelDelta / (-40);

		oEvent.stopPropagation = function(){ this.cancelBubble = true; }; 

	}

	return oEvent;

}

var Each = function(list, fun){

	for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }

};

var CurrentStyle = function(element){

	return element.currentStyle || document.defaultView.getComputedStyle(element, null);

}

function addEventHandler(oTarget, sEventType, fnHandler) {

	if (oTarget.addEventListener) {

		oTarget.addEventListener(sEventType, fnHandler, false);

	} else if (oTarget.attachEvent) {

		oTarget.attachEvent("on" + sEventType, fnHandler);

	} else {

		oTarget["on" + sEventType] = fnHandler;

	}

};

function removeEventHandler(oTarget, sEventType, fnHandler) {

    if (oTarget.removeEventListener) {

        oTarget.removeEventListener(sEventType, fnHandler, false);

    } else if (oTarget.detachEvent) {

        oTarget.detachEvent("on" + sEventType, fnHandler);

    } else { 

        oTarget["on" + sEventType] = null;

    }

};

var Slider = Class.create();

Slider.prototype = {

  initialize: function(container, bar, options) {	

	this.Bar = $$(bar);

	this.Container = $$(container);

	this._timer = null;

	this._ondrag = false;

	this._IsMin = this._IsMax = this._IsMid = false;

	this._drag = new Drag(this.Bar, { Limit: true, mxContainer: this.Container,

		onStart: Bind(this, this.DragStart), onStop: Bind(this, this.DragStop), onMove: Bind(this, this.Move)

	});

	this.SetOptions(options);

	this.WheelSpeed = Math.max(0, this.options.WheelSpeed);

	this.KeySpeed = Math.max(0, this.options.KeySpeed);

	this.MinValue = this.options.MinValue;

	this.MaxValue = this.options.MaxValue;

	this.RunTime = Math.max(1, this.options.RunTime);

	this.RunStep = Math.max(1, this.options.RunStep);

	this.Ease = !!this.options.Ease;

	this.EaseStep = Math.max(1, this.options.EaseStep);

	this.onMin = this.options.onMin;

	this.onMax = this.options.onMax;

	this.onMid = this.options.onMid;

	this.onDragStart = this.options.onDragStart;

	this.onDragStop = this.options.onDragStop;

	

	this.onMove = this.options.onMove;

	

	this._horizontal = !!this.options.Horizontal;//一般不允许修改

	

	//锁定拖放方向

	this._drag[this._horizontal ? "LockY" : "LockX"] = true;

	

	//点击控制

	addEventHandler(this.Container, "click", BindAsEventListener(this, function(e){ this._ondrag || this.ClickCtrl(e);}));

	//取消冒泡，防止跟Container的click冲突

	addEventHandler(this.Bar, "click", BindAsEventListener(this, function(e){ e.stopPropagation(); }));

	

	//设置鼠标滚轮控制

	this.WheelBind(this.Container);

	//设置方向键控制

	this.KeyBind(this.Container);

	//修正获取焦点

	var oFocus = isIE ? (this.KeyBind(this.Bar), this.Bar) : this.Container;

	addEventHandler(this.Bar, "mousedown", function(){ oFocus.focus(); });

	//ie鼠标捕获和ff的取消默认动作都不能获得焦点，所以要手动获取

	//如果ie把focus设置到Container，那么在出现滚动条时ie的focus可能会导致自动滚屏

  },

  //设置默认属性

  SetOptions: function(options) {

	this.options = {//默认值

		MinValue:	0,//最小值

		MaxValue:	100,//最大值

		WheelSpeed: 5,//鼠标滚轮速度,越大越快(0则取消鼠标滚轮控制)

		KeySpeed: 	50,//方向键滚动速度,越大越慢(0则取消方向键控制)

		Horizontal:	true,//是否水平滑动

		RunTime:	20,//自动滑移的延时时间,越大越慢

		RunStep:	2,//自动滑移每次滑动的百分比

		Ease:		false,//是否缓动

		EaseStep:	5,//缓动等级,越大越慢

		onMin:		function(){},//最小值时执行

		onMax:		function(){},//最大值时执行

		onMid:		function(){},//中间值时执行

		onDragStart:function(){},//拖动开始时执行

		onDragStop:	function(){},//拖动结束时执行

		onMove:		function(){}//滑动时执行

	};

	Extend(this.options, options || {});

  },

--这个是滚动条的JS代码。

麻烦各位高手看看，有什么解决办法？ 因为BT美工要求做图片背景的滚动条。所以只能用到重写滚动条了。
...全文
397 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
yqyqyoyo 2009-07-21
  • 打赏
  • 举报
 回复
没人知道吗？ 是因为样式文件中有 overflow:hidden; 所以在添加的时候隐藏了，之后再添加就没有显示出来，但如果把这个属性去掉，就会出现多个滚动条。改怎么解决啊？
yqyqyoyo 2009-07-21
  • 打赏
  • 举报
 回复
PS :shenzhenNBA 不是需要滚动条，是写出来了滚动条，但动态往页面中创建 element元素不能显示了。
yqyqyoyo 2009-07-21
  • 打赏
  • 举报
 回复
大哥，你有测试动态创建一个元素放在滚动条的内容元素内吗？ 可以显示吗？
shenzhenNBA 2009-07-21
  • 打赏
  • 举报
 回复
还是给你参考一个JS控制滚动条的例子吧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>人工添加并控制滚动条</title>
</head>
<script language="javascript" type="text/javascript">
function userScrollDown(){
//向下滚动,每次移动量 1
var cur_posi=document.getElementById('div01').scrollTop;
cur_posi=cur_posi+1;
document.getElementById('div01').scrollTop=cur_posi;
}

//-------------------------------------------------
function userScrollUp(){
//向上滚动，每次移动量 1
//var a=document.getElementById('div01');
//document.getElementById('div01').scrollTop=a.offsetTop;
var cur_posi=document.getElementById('div01').scrollTop;
cur_posi=cur_posi-1;
document.getElementById('div01').scrollTop=cur_posi;
}
//-------------------------------------------------
function userScrollDownN(moveOffset){
//向下滚动,每次移动量 由参数指定
var offset=moveOffset;
if(offset<1) offset=1;
var cur_posi=document.getElementById('div01').scrollTop;
cur_posi=cur_posi+offset;
document.getElementById('div01').scrollTop=cur_posi;
}
//-------------------------------------------------
function userScrollUpN(moveOffset){
//向上滚动，每次移动量 由参数指定
var offset=moveOffset;
if(offset<1) offset=1;
var cur_posi=document.getElementById('div01').scrollTop;
cur_posi=cur_posi-offset;
document.getElementById('div01').scrollTop=cur_posi;
}
//-------------------------------------------------
function userScrollLeftN(moveOffset){
//向左滚动,每次移动量 由参数指定
var offset=moveOffset;
if(offset<1) offset=1;
var cur_posi=document.getElementById('div01').scrollLeft;
cur_posi=cur_posi-offset;
if(cur_posi<1) cur_posi=0;
document.getElementById('div01').scrollLeft=cur_posi;
}
//-------------------------------------------------
function userScrollRightN(moveOffset){
//向右滚动,每次移动量 由参数指定
var offset=moveOffset;
if(offset<1) offset=1;
var cur_posi=document.getElementById('div01').scrollLeft;
cur_posi=cur_posi+offset;
if(cur_posi>document.getElementById('div01').scrollWidth)
cur_posi=document.getElementById('div01').scrollWidth;
document.getElementById('div01').scrollLeft=cur_posi;
}
</script>
<body>
<h3>人工 JavaScript 代码控制生成的滚动条的滚动事件</h3>
<div id="div01" style="width:300px; height:100px; overflow:scroll; font-family:Arial; margin:10px 0px; font-size:11px; color:#333333; border:1px solid red;">
111111111111111111111111111111111111111111111111111111111111<br>
222222222222222222222222222222222222222222222222222222222222<br>
7894<br>
abc4<br>
qwer4<br>
1234<br>
asdf4<br>
zxcv4<br>
asdf4<br>
dddd4<br>
1234<br>
asdf4<br>
zxcv4<br>
asdf4<br>
dddd4<br>
1234<br>
asdf4<br>
zxcv4<br>
asdf4<br>
dddd4<br>
</div>
<fieldset style="padding:5px; margin:5px 0px; font-family:Arial; font-size:11px; font-weight:bold;"><legend>上下滚动</legend>
<input type="button" name="Submit" value="向下移动" onClick="javascript:userScrollDown();">
<input type="button" name="Submit" value="向上移动" onClick="javascript:userScrollUp();">
<br><br>
<input type="button" name="Submit" value="向下移动 10" onClick="javascript:userScrollDownN(10);">
<input type="button" name="Submit" value="向上移动 10" onClick="javascript:userScrollUpN(10);">
(每次滚动量为 10 )
</fieldset>
<br><br>
<fieldset style="padding:5px; margin:5px 0px; font-family:Arial; font-size:11px; font-weight:bold;"><legend>左右滚动</legend>
<input type="button" name="Submit" value="向左移动 10" onClick="javascript:userScrollLeftN(10);">
<input type="button" name="Submit" value="向右移动 10" onClick="javascript:userScrollRightN(10);">
</fieldset>

</body>
</html>
yqyqyoyo 2009-07-21
  • 打赏
  • 举报
 回复
代码很详细，前面的JS 代码是滚动条的控制代码。后面的HTML代码是使用代码。主要是看 里面的一个《button》 中使用的$Add()方法。我这样写，我测试过，可以添加上去，但就是无法显示出来。 郁闷。
yqyqyoyo 2009-07-21
  • 打赏
  • 举报
 回复
JS 高手别躲着了，我都弄几天了没找到原因。 谁给指点一下啊？
shenzhenNBA 2009-07-21
  • 打赏
  • 举报
 回复
吗呀，这么短啊 ：（

yqyqyoyo 2009-07-21
  • 打赏
  • 举报
 回复 


<!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>JavaScript 滑动条</title>

<script src="ScriptScroll/jquery.js" type="text/javascript" language="javascript"></script>

<script src="ScriptScroll/common.js" type="text/javascript" language="javascript"></script>

<script src="ScriptScroll/jquery.json-1.3.min.js" type="text/javascript" language="javascript"></script>

<script src="ScriptScroll/Scroll.js" type="text/javascript" language="javascript"></script>

<script type="text/javascript" language="javascript">



    function LoadTime()

    {

        setInterval('LoadStore()',1000);

    }

    function LoadStore()

    {

        $.ajax({

       type: "post",

       datatype:'JSON',

       url: "Helper/testStore.ashx",

       success: function(msg,o){

       debugger;

       alert(msg);

       var obj=eval("("+msg+")");

        $.each(obj,function(i){

            alert(obj[i])

        },"json")

   }

}); 

    }

    function setXdRad(o)

    {

        $$("idBar2").style.height = $$("idSlider2").clientHeight * Math.min($$("idContent2").clientHeight / $$("idContent2").scrollHeight, 1) - 4 + "px";

        var sld2 = new Slider("idSlider2", "idBar2", { Horizontal: false,

	        MaxValue: $$("idContent2").scrollHeight - $$("idContent2").clientHeight,

	        onMove: function(){ $$("idContent2").scrollTop = this.GetValue(); }

        });

        sld2.WheelBind($$("idContent2"));

        sld2.KeyBind($$("idContent2"));

        if(o)

        sld2. SetPercent(100);

        else

        sld2. SetPercent(0);

    }

    function clier()

    {

        $$('idContent3').innerHTML="";

    }

    function send()

    {

       var html= $$('idContent3').innerHTML;

       clier();

       $$('idContent3').innerHTML=html+'<li>'+$$('sendmesg').innerText+'</li>'; onload="javascript:LoadTime();"

    }

    function $Adds()

    {

        var html= $$('idContent3').innerHTML;

        

        $$('idContent3').innerHTML=html+'<li>'+$$('sendmesg').innerText+'</li>'; 

    }

</script>

<style type="text/css">

.container2{width:425px;background:#fff; border:1px solid #ffffff;}

.content2{VISIBILITY:visible;overflow:hidden;height:154px;width:400px; _float:left; padding:2px; padding-right:0; margin:0; line-height:1.5em;}

.slider2{height:158px; width:10px; float:right;background-image:url(images/Scroll/6.jpg); border:2px solid #ffffff;}

.bar2{width:14px; border:2px outset buttonhighlight; _font-size:0;}

.borders{border:3px solid #a4d9eb;width:444px;height:260px;padding-right:0;line-height:1.5em;_float:left;padding:0px;}

.borders2{border:1px solid #a4d9eb;width:448px;height:260px;padding-right:0;line-height:1.5em;_float:left;padding:0px;padding-left:0;}

.hadrow{width:100%;height:5px;}

</style>

</head>

<body >

<p>预览效果</p>

<div style="width:450px;height:auto;">

<div class="borders">

<div><img src="images/Scroll/button.jpg" /><b>直播时间：</b>上午8点-下午8点<input id="Radio1" type="radio" name="radios" value="0" checked="checked" onclick="javascript:setXdRad(true);"/>

<label for="Radio1">顺序</label><input id="Radio2" type="radio" name="radios" value="1" onclick="javascript:setXdRad(false);" /><label for="Radio2">倒序</label>

</div>

<div class="hadrow"></div>

<div><img src="images/Scroll/guanggao1.jpg" /><img src="images/Scroll/guanggao2.jpg" style="margin:0px 5px 0 5px;" /></div>

<div class="hadrow"></div>

<div id="idContainer2" class="container2">

  <div id="idSlider2" class="slider2">

    <!--滚动条a4d9eb-->

    <img src="images/Scroll/4.jpg" id="idBar2" height="8px" width="10px"> 

  </div>

 <!-- 内容列表-->

  <ul id="idContent2" class="content2">

    <li>1. </li>

    <li>2.  </li>

    <li>3. </li>

    <li>4.  </li>

    <li>5. </li>

    <li>6.  </li>

    <li>7.  </li>

    <li>8. </li>

    <li>9. </li>

    <li>10. </li>

    <li>11. </li>

    <li>12. </li>

    <li>13.</li>

    <li>14.  </li>

    <li>15.</li>

    <li>16. </li>

    <li>17.  </li>

    <li>18.  </li>

    <li>19. </li>

  </ul>

</div>

</div>

<!--拖动滚动条$Add('idContent3','{dataTime:\' \'},{sendName:\'aaaa\'},{Description:\'cccccccccccccccc\'}');-->

<script>

$$("idBar2").style.height = $$("idSlider2").clientHeight * Math.min($$("idContent2").clientHeight / $$("idContent2").scrollHeight, 1) - 4 + "px";

var sld2 = new Slider("idSlider2", "idBar2", { Horizontal: false,

	MaxValue: $$("idContent2").scrollHeight - $$("idContent2").clientHeight,

	onMove: function(){ $$("idContent2").scrollTop = this.GetValue(); }

});

sld2.WheelBind($$("idContent2"));

sld2.KeyBind($$("idContent2"));

sld2. SetPercent(100);

</script>

<div class="hadrow"></div>

<div class="borders2">

<div style="height:10px; background-color:#effafc;"></div>

<div><label style="font-size:14px; padding-left:10px;  color:#0096cb;"><b> 直播间群聊：</b></label><label style="padding-left:180px;"></label><a href="javascript:clier(0);">清屏</a>

<label style="padding-left:20px;"></label><a href="javascript:void(0);">向主持提问</a>

</div>

<div class="hadrow"></div>

<div id="div3"></div>

<div class="container2" id="idContainer3" style="padding-left:10px;">

    <div id="idSlider3" class="slider2">

    <!--滚动条a4d9eb-->

    <img src="images/Scroll/4.jpg" id="idBar3" height="8px" width="10px"> 

  </div>

  <ul id="idContent3" class="content2" name="idContent3" style="VISIBILITY:visible;">

    <li>javascript</li>

    <li>s</li>

    <li>sdf</li>

    <li>fda</li>

    <li>dxzr</li>

    <li>sdfwex</li>

    <li>adwer</li>

  </ul>

</div>

<div class="hadrow"></div>

<div style=" padding-left:10px;">

<textarea id="sendmesg" name="sendmesg" cols="20" rows="2" style="overflow:hidden;background-color:#effafc; width:70%; border:1px solid #d5f3f5; color:#828081;"

 onfocus="javascript:$$('sendmesg').innerText='';" onmouseout="javascript:function(){if($$('sendmesg').innerText=='') $$('sendmesg').innerText='群聊、交流、分享 点击此处···'}">群聊、交流、分享 点击此处···</textarea>

<label style="padding-left:20px;"></label><button onclick="javascript:$Adds();" style="background-color:#d5f3f5; color:#095867; border:0px solid #d5f3f5; font-size:18px; text-align:center;"> 发 表 </button>

</div>

</div>

<script>

$$("idBar3").style.height = $$("idSlider3").clientHeight * Math.min($$("idContent3").clientHeight / $$("idContent3").scrollHeight, 1) - 4 + "px";

var sld2 = new Slider("idSlider3", "idBar3", { Horizontal: false,

	MaxValue: $$("idContent3").scrollHeight - $$("idContent3").clientHeight,

	onMove: function(){ $$("idContent3").scrollTop = this.GetValue(); }

});

sld2.WheelBind($$("idContent3"));

sld2.KeyBind($$("idContent3"));

sld2. SetPercent(100);

</script>



</div>

<li style="display:none;" id="hidli">javascript</li>

</body>

</html>
yqyqyoyo 2009-07-21
  • 打赏
  • 举报
 回复 


 //开始拖放滑动

  DragStart: function() {

  	this.onDragStart();

	this._ondrag = true;

  },

  //结束拖放滑动

  DragStop: function() {

  	this.onDragStop();

	setTimeout(Bind(this, function(){ this._ondrag = false; }), 10);

  },

  //滑动中

  Move: function() {

  	this.onMove();

	

	var percent = this.GetPercent();

	//最小值判断

	if(percent > 0){

		this._IsMin = false;

	}else{

		if(!this._IsMin){ this.onMin(); this._IsMin = true; }

	}

	//最大值判断

	if(percent < 1){

		this._IsMax = false;

	}else{

		if(!this._IsMax){ this.onMax(); this._IsMax = true; }

	}

	//中间值判断

	if(percent > 0 && percent < 1){

		if(!this._IsMid){ this.onMid(); this._IsMid = true; }

	}else{

		this._IsMid = false;

	}

  },

  //鼠标点击控制

  ClickCtrl: function(e) {

	var o = this.Container, iLeft = o.offsetLeft, iTop = o.offsetTop;

	while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; }

	//考虑有滚动条，要用pageX和pageY

	this.EasePos(e.pageX - iLeft - this.Bar.offsetWidth / 2, e.pageY - iTop - this.Bar.offsetHeight / 2);

  },

  //鼠标滚轮控制

  WheelCtrl: function(e) {

	var i = this.WheelSpeed * e.detail;

	this.SetPos(this.Bar.offsetLeft + i, this.Bar.offsetTop + i);

	//防止触发其他滚动条

	e.preventDefault();

  },

  //绑定鼠标滚轮

  WheelBind: function(o) {

  	//鼠标滚轮控制

	addEventHandler(o, isIE ? "mousewheel" : "DOMMouseScroll", BindAsEventListener(this, this.WheelCtrl));

  },

  //方向键控制

  KeyCtrl: function(e) {

	if(this.KeySpeed){

		var iLeft = this.Bar.offsetLeft, iWidth = (this.Container.clientWidth - this.Bar.offsetWidth) / 



this.KeySpeed

			, iTop = this.Bar.offsetTop, iHeight = (this.Container.clientHeight - this.Bar.offsetHeight) 



/ this.KeySpeed;

		//根据按键设置值

		switch (e.keyCode) {

			case 37 ://左

				iLeft -= iWidth; break;

			case 38 ://上

				iTop -= iHeight; break;

			case 39 ://右

				iLeft += iWidth; break;

			case 40 ://下

				iTop += iHeight; break;

			default :

				return;//不是方向按键返回

		}

		this.SetPos(iLeft, iTop);

		//防止触发其他滚动条

		e.preventDefault();

	}

  },

  //绑定方向键

  KeyBind: function(o) {

	addEventHandler(o, "keydown", BindAsEventListener(this, this.KeyCtrl));

	//设置tabIndex使设置对象能支持focus

	o.tabIndex = -1;

	//取消focus时出现的虚线框

	isIE || (o.style.outline = "none");

  },

  //获取当前值

  GetValue: function() {

	//根据最大最小值和滑动百分比取值

	return this.MinValue + this.GetPercent() * (this.MaxValue - this.MinValue);

  },

  //设置值位置

  SetValue: function(value) {

	//根据最大最小值和参数值设置滑块位置

	this.SetPercent((value- this.MinValue)/(this.MaxValue - this.MinValue));

  },

  //获取百分比

  GetPercent: function() {

	//根据滑动条滑块取百分比

	return this._horizontal ? this.Bar.offsetLeft / (this.Container.clientWidth - this.Bar.offsetWidth)

		: this.Bar.offsetTop / (this.Container.clientHeight - this.Bar.offsetHeight)

  },

  //设置百分比位置

  SetPercent: function(value) {

	//根据百分比设置滑块位置

	this.EasePos((this.Container.clientWidth - this.Bar.offsetWidth) * value, (this.Container.clientHeight - 



this.Bar.offsetHeight) * value);

  },

  //自动滑移(是否递增)

  Run: function(bIncrease) {

	this.Stop();

	//修正一下bIncrease

	bIncrease = !!bIncrease;

	//根据是否递增来设置值

	var percent = this.GetPercent() + (bIncrease ? 1 : -1) * this.RunStep / 100;

	this.SetPos((this.Container.clientWidth - this.Bar.offsetWidth) * percent, (this.Container.clientHeight - 



this.Bar.offsetHeight) * percent);

	//如果没有到极限值就继续滑移

	if(!(bIncrease ? this._IsMax : this._IsMin)){

		this._timer = setTimeout(Bind(this, this.Run, bIncrease), this.RunTime);

	}

  },

  //停止滑移

  Stop: function() {

	clearTimeout(this._timer);

  },

  //缓动滑移

  EasePos: function(iLeftT, iTopT) {

	this.Stop();

	//必须是整数，否则可能死循环

	iLeftT = Math.round(iLeftT); iTopT = Math.round(iTopT);

	//如果没有设置缓动

	if(!this.Ease){ this.SetPos(iLeftT, iTopT); return; }

	//获取缓动参数

	var iLeftN = this.Bar.offsetLeft, iLeftS = this.GetStep(iLeftT, iLeftN)

	, iTopN = this.Bar.offsetTop, iTopS = this.GetStep(iTopT, iTopN);

	//如果参数有值

	if(this._horizontal ? iLeftS : iTopS){

		//设置位置

		this.SetPos(iLeftN + iLeftS, iTopN + iTopS);

		//如果没有到极限值则继续缓动

		if(this._IsMid){ this._timer = setTimeout(Bind(this, this.EasePos, iLeftT, iTopT), this.RunTime); }

	}

  },

  //获取步长

  GetStep: function(iTarget, iNow) {

    var iStep = (iTarget - iNow) / this.EaseStep;

    if (iStep == 0) return 0;

    if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);

    return iStep;

  },

  //设置滑块位置

  SetPos: function(iLeft, iTop) {

	this.Stop();

	this._drag.SetPos(iLeft, iTop);

  }

};



//拖放程序

var Drag = Class.create();

Drag.prototype = {

  //拖放对象

  initialize: function(drag, options) {

	this.Drag = $$(drag);//拖放对象

	this._x = this._y = 0;//记录鼠标相对拖放对象的位置

	this._marginLeft = this._marginTop = 0;//记录margin

	//事件对象(用于绑定移除事件)

	this._fM = BindAsEventListener(this, this.Move);

	this._fS = Bind(this, this.Stop);

	

	this.SetOptions(options);

	

	this.Limit = !!this.options.Limit;

	this.mxLeft = parseInt(this.options.mxLeft);

	this.mxRight = parseInt(this.options.mxRight);

	this.mxTop = parseInt(this.options.mxTop);

	this.mxBottom = parseInt(this.options.mxBottom);

	

	this.LockX = !!this.options.LockX;

	this.LockY = !!this.options.LockY;

	this.Lock = !!this.options.Lock;

	

	this.onStart = this.options.onStart;

	this.onMove = this.options.onMove;

	this.onStop = this.options.onStop;

	

	this._Handle = $$(this.options.Handle) || this.Drag;

	this._mxContainer = $$(this.options.mxContainer) || null;

	

	this.Drag.style.position = "absolute";

	//透明

	if(isIE && !!this.options.Transparent){

		//ie6渲染bug

		this._Handle.style.overflow = "hidden";

		//填充拖放对象

		with(this._Handle.appendChild(document.createElement("div")).style){

			width = height = "100%"; backgroundColor = "#fff"; filter = "alpha(opacity:0)";

		}

	}

	//修正范围

	this.Repair();

	addEventHandler(this._Handle, "mousedown", BindAsEventListener(this, this.Start));

  },

 

//设置默认属性

  SetOptions: function(options) {

	this.options = {//默认值

		Handle:			"",//设置触发对象（不设置则使用拖放对象）

		Limit:			false,//是否设置范围限制(为true时下面参数有用,可以是负数)

		mxLeft:			0,//左边限制

		mxRight:		9999,//右边限制

		mxTop:			0,//上边限制

		mxBottom:		9999,//下边限制

		mxContainer:	"",//指定限制在容器内

		LockX:			false,//是否锁定水平方向拖放

		LockY:			false,//是否锁定垂直方向拖放

		Lock:			false,//是否锁定

		Transparent:	false,//是否透明

		onStart:		function(){},//开始移动时执行

		onMove:			function(){},//移动时执行

		onStop:			function(){}//结束移动时执行

	};

	Extend(this.options, options || {});

  },

  //准备拖动

  Start: function(oEvent) {

	if(this.Lock){ return; }

	this.Repair();

	//记录鼠标相对拖放对象的位置

	this._x = oEvent.clientX - this.Drag.offsetLeft;

	this._y = oEvent.clientY - this.Drag.offsetTop;

	//记录margin

	this._marginLeft = parseInt(CurrentStyle(this.Drag).marginLeft) || 0;

	this._marginTop = parseInt(CurrentStyle(this.Drag).marginTop) || 0;

	//mousemove时移动 mouseup时停止

	addEventHandler(document, "mousemove", this._fM);

	addEventHandler(document, "mouseup", this._fS);

	if(isIE){

		//焦点丢失

		addEventHandler(this._Handle, "losecapture", this._fS);

		//设置鼠标捕获

		this._Handle.setCapture();

	}else{

		//焦点丢失

		addEventHandler(window, "blur", this._fS);

		//阻止默认动作

		oEvent.preventDefault();

	};

	//附加程序

	this.onStart();

  },

  //修正范围

  Repair: function() {

	if(this.Limit){

		//修正错误范围参数

		this.mxRight = Math.max(this.mxRight, this.mxLeft + this.Drag.offsetWidth);

		this.mxBottom = Math.max(this.mxBottom, this.mxTop + this.Drag.offsetHeight);

		//如果有容器必须设置position为relative来相对定位，并在获取offset之前设置

		!this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || CurrentStyle



(this._mxContainer).position == "absolute" || (this._mxContainer.style.position = "relative");

	}

  },

  //拖动

  Move: function(oEvent) {

	//判断是否锁定

	if(this.Lock){ this.Stop(); return; };

	//清除选择

	window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

	//设置移动参数

	this.SetPos(oEvent.clientX - this._x, oEvent.clientY - this._y);

  },

  //设置位置

  SetPos: function(iLeft, iTop) {

	//设置范围限制

	if(this.Limit){

		//设置范围参数

		var mxLeft = this.mxLeft, mxRight = this.mxRight, mxTop = this.mxTop, mxBottom = this.mxBottom;

		//如果设置了容器，再修正范围参数

		if(!!this._mxContainer){

			mxLeft = Math.max(mxLeft, 0);

			mxTop = Math.max(mxTop, 0);

			mxRight = Math.min(mxRight, this._mxContainer.clientWidth);

			mxBottom = Math.min(mxBottom, this._mxContainer.clientHeight);

		};

		//修正移动参数

		iLeft = Math.max(Math.min(iLeft, mxRight - this.Drag.offsetWidth), mxLeft);

		iTop = Math.max(Math.min(iTop, mxBottom - this.Drag.offsetHeight), mxTop);

	}

	//设置位置，并修正margin

	if(!this.LockX){ this.Drag.style.left = iLeft - this._marginLeft + "px"; }

	if(!this.LockY){ this.Drag.style.top = iTop - this._marginTop + "px"; }

	//附加程序

	this.onMove();

  },

  //停止拖动

  Stop: function() {

	//移除事件

	removeEventHandler(document, "mousemove", this._fM);

	removeEventHandler(document, "mouseup", this._fS);

	if(isIE){

		removeEventHandler(this._Handle, "losecapture", this._fS);

		this._Handle.releaseCapture();

	}else{

		removeEventHandler(window, "blur", this._fS);

	};

	//附加程序

	this.onStop();

  }

};
HTML5 canvas星空屏保动画代码
canvas是一个矩形区域，在JavaScript的控制下可以进行动态绘图。通过调用canvas对象的`getContext('2d')`方法，我们可以获取到2D渲染上下文，从而进行各种绘图操作，如线条、形状、文本、渐变等。 在这个实例中，...
CSS自定义滚动条样式：跨浏览器解决方案
先别急着动手，让我们先思考一下，为什么我们需要自定义滚动条？难道只是为了追求个性化？你的网站有独特的视觉风格，滚动条作为用户体验的一部分，也应该融入其中，保持品牌一致性。想想那些设计精美的网站，连滚动...
html页面下拉条位置,iframe滚动条位置控制
javascript中如可控制iframe的滚动条位置我做了一个聊天室，嵌套了两个iframe，一个name叫mainframe,用来显示聊滚动条始终在最下端: window.onload=function (){ document.documentElement.scrollTop=parseInt...
Asp.net 中的div 滚动条以及Css 的使用....
---当控件的高度超出范围，自动出现上下，左右 拉动滚动条 控件 ----运行这段程序，滚动滚条时可以行到当行的位置 dsad  asd  
CSS overflow-anchor防止滚动抖动的原理与应用
这时，页面整体高度变了，滚动条的位置自然也会发生变化，你的视线就被迫跟着滚动条一起“跳跃”了一下。你有没有遇到过这样的情况：正津津有味地浏览网页，突然页面“嗖”的一下，滚动条像喝了假酒一样乱跳，把你带...
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章