一个滑动条的DIV+CSS+JS实例

<!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=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
<style type="text/css">
/*<![CDATA[*/
* { width:100%; margin:0; padding:0;}
body { font-family: "宋体", Arial, Helvetica, sans-serif; font-size: 12px; color: #444; text-align:center;}
ul { list-style-type: none; margin:0; padding:0;}
a { color:#4e4e4e; text-decoration: none; vertical-align: middle;}
a:hover {color: #990000;}
a:visited {color: #4e4e4e;}

#login {width:186px;height:100px; border: 1px solid #d2d2d2; margin:100px auto;}
#login .top {margin-top:6px; margin-left:6px; width:60px; float:left;background:url(/uploadfile/200902/25/3D144152523.gif) no-repeat -100px 6px; height:24px;}
#login h2 { font-size:12px; line-height:26px;text-align:left;text-indent: 21px;}
#moveico { margin-top:8px; background:url(/uploadfile/200902/25/3D144152523.gif) no-repeat 12px -30px; width:110px; height:24px; float:left;}
#moveico div {position: relative;float:left;left:13px; top:4px;background:url(/uploadfile/200902/25/3D144152523.gif) no-repeat -80px 0; width:12px; height:12px;}

#login input { height:16px; color:#666;}
#login .userchk { width:16px;}
#login .userinput { width:92px; border:1px #cbdca8 solid;}
#login .usersub { width:52px;height:18px; background:url(/uploadfile/200902/25/3D144152523.gif) no-repeat; border:0;  line-height:22px; color:#454545; font-size:12px;}
#login span { margin-left:8px;}
#login ul {width:160px;margin:0 auto;}
#login li { clear:left; height:21px; line-height:21px; text-align:left;overflow:hidden;}
#login li.other {border-top:2px #e0ecc8 solid;  margin-top:3px;text-indent: 6px;}
#login a#loginhelp {position: relative; top:-18px;left:145px;display:block; width:12px; height:12px; background:#f7fcfc url(/uploadfile/200902/25/3D144152523.gif) no-repeat -60px 0; }

/*]]>*/
</style>
<script type="text/javascript">
<!--

//Moveobj

function Move_autosetdef(moveobj){
var logintit = new Array("学生","家长","老师","管理员");
var bNum =13 ,mNum =22 , iNum = 4 , icolength = 6;
//分别 bNum 起始距离距moveobj内侧左部的长度 ，mNum 单位长度，iNum 单位数 0-1-2-3，icolength 图标距离的1/2。

var eNum = bNum + mNum * (iNum-1);
var $D = new Function('str','return document.getElementById(str);');
var $event = new Function('e','return (!e)?window.event:e;');
var checknowleft = function(z){return ((z<bNum)?bNum:((z>eNum)?eNum:(((z-bNum)%mNum>11)?z+mNum-(z-bNum)%mNum:z-(z-bNum)%mNum)));}
var nowseat = 0,drag_=false;
var Move_autoset = function(iNum){
$D(moveobj).getElementsByTagName("div")[0].style.left = iNum*mNum+bNum+"px";
$D("login-tit").innerHTML = logintit[iNum];
$D("login-type").value = iNum;//向hidden的login-type里添加参数值
}

nowseat = (getCookie("nowseat")==null)?0:getCookie("nowseat");
Move_autoset(nowseat);
$D(moveobj).getElementsByTagName("div")[0].onmouseover = function(){
var x,y,z;
this.onmousedown=function(e){
drag_=true;
with(this){
var temp0=style.left.replace("px","")*1,temp1=offsetLeft,temp2=offsetTop;
x=$event(e).clientX;
y=$event(e).clientY;
z=temp0;
document.onmousemove=function(e){
//this.selection.empty();
if(!drag_)return false;
with(this){
z = temp0 + $event(e).clientX-x;
z = (z<bNum)?bNum:((z>eNum)?eNum:z);
style.left=z+"px";
}
}
document.onmouseup=function(e){
drag_ = false;
var nowleft = checknowleft(z);
nowseat = (nowleft-bNum)/mNum;
Move_autoset(nowseat);
setCookie('nowseat',(nowleft-bNum)/mNum);
}
}
}
}
$D(moveobj).onmouseover = function(){
this.onmousedown=function(e){
if(drag_)return false;
with(this){
var icoobj = getElementsByTagName("div")[0];
var temp0 = icoobj.offsetLeft;
var x=$event(e).clientX;
var nowleft = checknowleft(bNum+mNum*nowseat+(x-temp0)-icolength);
document.onmouseup=function(e){
nowseat = (nowleft-bNum)/mNum;
Move_autoset(nowseat);
setCookie('nowseat',(nowleft-bNum)/mNum);
}
}
}
}
}

bind(window,"load",new Function('Move_autosetdef("moveico")'));

//-->
</script>
 </head>

<body>
<div id="login" class="Box">
   <form action="" method="post">
<div id="moveico"><div></div></div>
<div class="top"><h2 class="active" id="login-tit"></h2></div>
<input type="hidden" id="login-type" name="stype" value="0" />
<ul>
<li> <input name="" type="text" class="userinput" /><span><label for="isRemember"> <input name="isRemember" id="isRemember" type="checkbox" value="" class="userchk" /> 记住</label></span></li>
<li> <input name="" type="password" class="userinput" /><span><input name="" type="submit" value="登 陆"  class="usersub"/></span></li>
<li class="other"><a href="#3">忘记密码</a> | <a href="#3">注册/通行证</a><a href="#3" id="loginhelp"></a></li>
 </ul>
</form>
</div>
<br/><br/>更多代码请访问 <a href="http://myeducs.cn/" target="_blank">网学</a>

</body>
</html>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇资讯：效果超酷的textarea的输入字数限提示

下一篇资讯：输入框下拉列表提示