我参照你的书敲出的代码如下，本来想以txt格式上传，但系统又报错。阁下之前第九章的HTML代码也无效，我自行修改才有正常效果。这个太复杂，不会改。
<title>实现滑动验证码</title>
<style>
.tracks{
/*滑轨样式*/
width:390px;
height:40px;
background: #d0c4fe;
overflow: hidden;
border: 1px solid #c5c5c5;
border-radius: 4px;
text-align: center;
}
.hover{
/*滑块样式*/
left: 0px;
position: absolute;
margin-left: 16px;
width: 50px;
height: 38px;
background: #ad99ff;
text-align: center;
line-height: 38px;
}
.hover:hover{
background: #fff;
}
.slidertips{
/*提示信息样式*/
height: 38px;
line-height: 38px;
color:#fff;
visibility: hidden;
}
</style>
<script>
$(function(){
var tracks=document.getElementById('tracks'),
sliderblock=document.getElementById('sliderblock'),
slidertips=document.getElementById('slidertips');
})
//滑块宽度
var sliderblockWidth=$('#sliderblock').width();
//滑轨长度
var tracksWidth=$('#tracks').width();
var mousemove=false;//mousedown状态
sliderblock.addEventListener('mousedown',function(e){
//监听mousedown事件，记录滑块起始位置
mousemove=true;
startCoordinateX=e.clientX //滑块起始位置
})
var distanceCoordianteX=0;//滑块起始位置
tracks.addEventListener('mousemove',function(e){
//监听鼠标移动
if(mousemove){//鼠标点击滑块后才跟踪移动
distanceCoordianteX=e.clientX-startCoordinateX;//滑块当前位置
if(distanceCoordianteX>tracksWidth-sliderblockWidth){
//通过限制滑块位移距离，避免滑块向右移出滑轨
distanceCoordianteX=tracksWidth-sliderblockWidth;
}else if(distanceCoordianteX<0){
//通过限制滑块位移距离，避免滑块向左移出滑轨
distanceCoordianteX=0;
}
//根据移动距离显示滑块位置
sliderblock.style.left=distanceCoordianteX+'px';
}
})
sliderblock.addEventListener('mouseup',function(e){
//鼠标松开视为完成滑动，记录滑块当前位置并调用验证方法
var endCoordinateX=e.clientX;
verifySliderRetuls(endCoordinateX);
})
function verifySliderRetuls(endCoordinateX){//验证滑动结果
mousemove=false;//此时鼠标已松开，防止滑块跟随鼠标移动
//允许误差3像素
if(Math.abs(endCoordinateX-startCoordinateX-tracksWidth)
我参照你的书敲出的代码如下，本来想以txt格式上传，但系统又报错。阁下之前第九章的HTML代码也无效，我自行修改才有正常效果。这个太复杂，不会改。
<title>实现滑动验证码</title> <style> .tracks{ /*滑轨样式*/ width:390px; height:40px; background: #d0c4fe; overflow: hidden; border: 1px solid #c5c5c5; border-radius: 4px; text-align: center; } .hover{ /*滑块样式*/ left: 0px; position: absolute; margin-left: 16px; width: 50px; height: 38px; background: #ad99ff; text-align: center; line-height: 38px; } .hover:hover{ background: #fff; } .slidertips{ /*提示信息样式*/ height: 38px; line-height: 38px; color:#fff; visibility: hidden; } </style> <script> $(function(){ var tracks=document.getElementById('tracks'), sliderblock=document.getElementById('sliderblock'), slidertips=document.getElementById('slidertips'); }) //滑块宽度 var sliderblockWidth=$('#sliderblock').width(); //滑轨长度 var tracksWidth=$('#tracks').width(); var mousemove=false;//mousedown状态 sliderblock.addEventListener('mousedown',function(e){ //监听mousedown事件，记录滑块起始位置 mousemove=true; startCoordinateX=e.clientX //滑块起始位置 }) var distanceCoordianteX=0;//滑块起始位置 tracks.addEventListener('mousemove',function(e){ //监听鼠标移动 if(mousemove){//鼠标点击滑块后才跟踪移动 distanceCoordianteX=e.clientX-startCoordinateX;//滑块当前位置 if(distanceCoordianteX>tracksWidth-sliderblockWidth){ //通过限制滑块位移距离，避免滑块向右移出滑轨 distanceCoordianteX=tracksWidth-sliderblockWidth; }else if(distanceCoordianteX<0){ //通过限制滑块位移距离，避免滑块向左移出滑轨 distanceCoordianteX=0; } //根据移动距离显示滑块位置 sliderblock.style.left=distanceCoordianteX+'px'; } }) sliderblock.addEventListener('mouseup',function(e){ //鼠标松开视为完成滑动，记录滑块当前位置并调用验证方法 var endCoordinateX=e.clientX; verifySliderRetuls(endCoordinateX); }) function verifySliderRetuls(endCoordinateX){//验证滑动结果 mousemove=false;//此时鼠标已松开，防止滑块跟随鼠标移动 //允许误差3像素 if(Math.abs(endCoordinateX-startCoordinateX-tracksWidth)