滑块验证1
<html>
<head>
<meta charset="utf-8">
<title>滑块验证1</title>
<style type="text/css">
#da{position:absolute;top:50px;left:50px;width:300px;height:200px;background:url(bg45.jpg) no-repeat;
background-size:300px 200px;}
#da2{position:absolute;top:50px;left:150px;width:50px; height:50px;background-color:red;float:left;z-index:1;}
#da1{position:absolute;top:50px;left:10px;width:50px; height:50px;background-color:green;float:left;z-index:2;}
#da3{position:absolute;top:170px;left:0px;width:300px;height:30px;background-color:green;float:left; }
#da4{position:absolute;width:50px;height:30px;top:0px;left:10px;background-color:red;}
</style>
</head>
<body>
<div id="da">
<div id="da1"></div>
<div id="da2"></div>
<div id="da3">
<div id="da4"></div>
</div>
</div>
<script type="text/javascript">
var sa1=document.getElementById('da1');
var sa2=document.getElementById('da2');
var sa3=document.getElementById('da3');
var sa4=document.getElementById('da4');
sa4.οnmοusedοwn=function(e) {
var e=e||event;
e.stopPropagation();
sa4.οnmοusemοve=function(e) {
if(sa1.offsetLeft!=sa2.offsetLeft) {
this.style.left=this.offsetLeft+5+'px';
sa1.style.left=this.style.left;
}
if(sa1.offsetLeft==sa2.offsetLeft) {
alert('恭喜你,验证码成功了');
}
};
};
sa4.οnmοuseup=function(e) {
var e=e||event;
e.stopPropagation();
sa4.οnmοusemοve=null;
sa4.style.left=sa4.offsetLeft+'px';
};
</script>
</body>
</html>