自定义滚动条 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style>
  7 #parent{margin:20px auto;width:300px;height:20px;background:#CCC;position:relative;}
  8 #div1{width:20px;height:20px;background:#f00;position:absolute;cursor:pointer;}
  9 #main{width:150px;height:200px;overflow:hidden;position:relative;border:1px solid #000;}
 10 #box{position:absolute;}
 11 </style>
 12 <script>
 13 window.onload=function()
 14 {
 15     var oDiv1 = document.getElementById('div1');    
 16     drag(oDiv1);
 17 };
 18 function drag(obj)
 19 {
 20     var oParent = document.getElementById('parent');
 21     var oBox = document.getElementById('box');
 22     var oMain = document.getElementById('main');
 23     obj.onmousedown=function(ev)
 24     {
 25         var ev = ev||event;
 26         var disX = ev.clientX - obj.offsetLeft;
 27         document.onmousemove=function(ev)
 28         {
 29             var ev = ev||event;
 30             var l = ev.clientX - disX;
 31             if(l<0)
 32             {
 33                 var  l =0;
 34             }
 35             else if(l>=oParent.offsetWidth-obj.offsetWidth)
 36             {
 37                 var l = oParent.offsetWidth-obj.offsetWidth;
 38             };
 39             obj.style.left = l+'px';
 40             var salce = l/(oParent.offsetWidth-obj.offsetWidth);
 41             document.title=salce;
 42             oBox.style.top = (oMain.offsetHeight-oBox.offsetHeight)*salce+'px';
 43         };
 44         document.onmouseup = function()
 45         {
 46             document.onmousemove=null;
 47             document.onmouseup=null;    
 48         };
 49         return false;
 50     };
 51 }
 52 </script>
 53 </head>
 54 
 55 <body>
 56 </body>
 57 <div id="parent">
 58  <div id="div1"></div>
 59 </div>
 60 <div id="main">
 61  <div id="box">简介：
 62 硬盘CHKDSK修复工具是CHKDSK修复、磁盘修复的工具，本软件是半自动基于DOS命令行操作，本软件针对chkdsk磁盘错误进行了深度优化，优化了CMD命令行。简单安全，欢迎使用！ 
 63 
 64 使用方法：
 65 ①：双击安装程序进入软件安装界面，点击下一步直到安装完成。
 66 ②：在桌面上找到“硬盘chkdsk修复工具”的图标双击打开，选择要修复的磁盘（默认显示的是系统盘）点击修复按钮，即可开始修复。
 67 
 68 多系统兼容：
 69 软件支持在Win2000、WinXP、Win2003、Win7系统下运行。简介：
 70 硬盘CHKDSK修复工具是CHKDSK修复、磁盘修复的工具，本软件是半自动基于DOS命令行操作，本软件针对chkdsk磁盘错误进行了深度优化，优化了CMD命令行。简单安全，欢迎使用！ 
 71 
 72 使用方法：
 73 ①：双击安装程序进入软件安装界面，点击下一步直到安装完成。
 74 ②：在桌面上找到“硬盘chkdsk修复工具”的图标双击打开，选择要修复的磁盘（默认显示的是系统盘）点击修复按钮，即可开始修复。
 75 
 76 多系统兼容：
 77 软件支持在Win2000、WinXP、Win2003、Win7系统下运行。简介：
 78 硬盘CHKDSK修复工具是CHKDSK修复、磁盘修复的工具，本软件是半自动基于DOS命令行操作，本软件针对chkdsk磁盘错误进行了深度优化，优化了CMD命令行。简单安全，欢迎使用！ 
 79 
 80 使用方法：
 81 ①：双击安装程序进入软件安装界面，点击下一步直到安装完成。
 82 ②：在桌面上找到“硬盘chkdsk修复工具”的图标双击打开，选择要修复的磁盘（默认显示的是系统盘）点击修复按钮，即可开始修复。
 83 
 84 多系统兼容：
 85 软件支持在Win2000、WinXP、Win2003、Win7系统下运行。简介：
 86 硬盘CHKDSK修复工具是CHKDSK修复、磁盘修复的工具，本软件是半自动基于DOS命令行操作，本软件针对chkdsk磁盘错误进行了深度优化，优化了CMD命令行。简单安全，欢迎使用！ 
 87 
 88 使用方法：
 89 ①：双击安装程序进入软件安装界面，点击下一步直到安装完成。
 90 ②：在桌面上找到“硬盘chkdsk修复工具”的图标双击打开，选择要修复的磁盘（默认显示的是系统盘）点击修复按钮，即可开始修复。
 91 
 92 多系统兼容：
 93 软件支持在Win2000、WinXP、Win2003、Win7系统下运行。简介：
 94 硬盘CHKDSK修复工具是CHKDSK修复、磁盘修复的工具，本软件是半自动基于DOS命令行操作，本软件针对chkdsk磁盘错误进行了深度优化，优化了CMD命令行。简单安全，欢迎使用！ 
 95 
 96 使用方法：
 97 ①：双击安装程序进入软件安装界面，点击下一步直到安装完成。
 98 ②：在桌面上找到“硬盘chkdsk修复工具”的图标双击打开，选择要修复的磁盘（默认显示的是系统盘）点击修复按钮，即可开始修复。
 99 
100 多系统兼容：
101 软件支持在Win2000、WinXP、Win2003、Win7系统下运行。</div>
102 </div>
103 </html>

 

posted @ 2013-08-11 13:58  The0ne  阅读(99)  评论(0)    收藏  举报