javascript 滚动条

页面导航:首页 > 网络编程 > JavaScript > javascript 滚动条

javascript 滚动条

来源: 作者: 时间:2016-02-05 11:06 【

滚动条的实现原理和上一篇文章中的拖拽有很大关系,滑动条就是通过拖拽实现的,通过计算滑动条的拖拽区间来得出一个比例scale,这个就是咱们要用到的文字滚动距离了,div3里别忘

滚动条的实现原理和上一篇文章中的拖拽有很大关系,滑动条就是通过拖拽实现的,通过计算滑动条的拖拽区间来得出一个比例scale,这个就是咱们要用到的文字滚动距离了,

div3里别忘记添加文字

具体代码如下



	
		
		New Web Project
		
		<script>
			window.onload=function(){
				var oParent=document.getElementById('parent');
				var oDiv1=document.getElementById('div1');
				var oDiv2=document.getElementById('div2');
				var oDiv3=document.getElementById('div3');
				oDiv1.onmousedown=function(evt){
					var e=evt||event;
					var disX=e.clientX-oDiv1.offsetLeft;
					document.onmousemove=function(evt1){
						var e1=evt1||event;
						var posX=e1.clientX-disX;
						if(posX<0)
						{
							posX=0;
						}
						else if(posX>oParent.offsetWidth-oDiv1.offsetWidth)
						{
							posX=oParent.offsetWidth-oDiv1.offsetWidth;
						}
						oDiv1.style.left=posX+'px';
						var scale=posX/(oParent.offsetWidth-oDiv1.offsetWidth);
						oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+'px';
						
						
					};
					document.onmouseup=function(){
						document.onmousemove=null;
						document.onmouseup=null;
					};
					return false;
				};
				
			};
		</script>
	
	
		
运行结果图:



Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<