<!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>
<style>
#parent {width:400px; height:20px; background:#CCC; position:relative; margin:20px auto;}
#div1 {width:20px; height:20px; background:red; cursor:pointer; position:absolute;}
#div2 {width:200px; height:300px; border:1px solid black; position:relative; overflow:hidden;}
#div3 {position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function myAddEvent(obj, sEvent, fn)
{
	if(obj.attachEvent)
	{
		obj.attachEvent('on'+sEvent, fn);
	}
	else
	{
		obj.addEventListener(sEvent, fn, false);
	}
}

window.οnlοad=function ()
{
	var oDiv=document.getElementById('div1');
	var oParent=document.getElementById('parent');
	var oDiv2=document.getElementById('div2');
	var oDiv3=document.getElementById('div3');
	
	function onMouseWheel(ev)
	{
		var oEvent=ev||event;
		var bDown=true;
		
		bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;//当鼠标向下滚动时，bDown=true.IE/Chrome下鼠标滚轮事件为wheelDelta，向下时数值为负，向上数值为正，
                                                                            //在FF中，鼠标滚轮事件为detail，向下为正，向上为负
		
		if(bDown)
		{
			setLeft(oDiv.offsetLeft+10);
		}
		else
		{
			setLeft(oDiv.offsetLeft-10);
		}
		
		if(oEvent.preventDefault)
		{
			oEvent.preventDefault();
		}
		
		return false;
	}
	
	myAddEvent(oParent, 'mousewheel', onMouseWheel);
	myAddEvent(oParent, 'DOMMouseScroll', onMouseWheel);//DOMMouseScroll为DOM事件，只能通过addEventListener添加事件绑定
	myAddEvent(oDiv2, 'mousewheel', onMouseWheel);
	myAddEvent(oDiv2, 'DOMMouseScroll', onMouseWheel);
	
	oDiv.οnmοusedοwn=function (ev)
	{
		var oEvent=ev||event;
		var disX=oEvent.clientX-oDiv.offsetLeft;
		
		document.οnmοusemοve=function (ev)
		{
			var oEvent=ev||event;
			var l=oEvent.clientX-disX;
			
			setLeft(l);
		};
		
		document.οnmοuseup=function ()
		{
			document.οnmοusemοve=null;
			document.οnmοuseup=null;
		};
	};
	
	function setLeft(l)
	{
		if(l<0)
		{
			l=0;
		}
		else if(l>oParent.offsetWidth-oDiv.offsetWidth)
		{
			l=oParent.offsetWidth-oDiv.offsetWidth;
		}
		
		oDiv.style.left=l+'px';
		var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
		
		oDiv3.style.top=-(oDiv3.offsetHeight-oDiv2.offsetHeight)*scale+'px';
		
		document.title=scale;
	}
};
</script>
</head>

<body>
<div id="parent">
	<div id="div1">
    </div>
</div>
<div id="div2">
	<div id="div3">
    	
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。[1] 
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
avaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。[3] 

    是一种解释性脚本语言（代码不进行预编译）。[4] 
    主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。[4] 
    可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。[4] 
    跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。[5]  
    </div>
</div>
</body>
</html>