JavaScript实现一个简单的Slider
第一次发帖子，不是很懂园子里的规矩，有不妥之处请大家多抬爱。
由于工作中需要写了一个简单的Slider。由于代码比较简单，因此废话不多说了，直接贴上代码！
Code
<!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> <title>slider</title> <style type="text/css"> body,html
{margin:0px; padding:0px; height:100%; width:100%;} .slider{background:#CCE;width:300px; height:23px;left:300px; top:200px;position:absolute;} .slider_dis_style{background:#CEC; width:60px; height:23px; position:absolute;cursor:pointer;} .slider_dis_bar{background:blue;width:5px;height:23px;left:60px;position:absolute; cursor:pointer;} </style></head><body> <div id="slider" class="slider" > <div id="slider_dis_style" class="slider_dis_style"> <div id="slider_dis_bar" class="slider_dis_bar"></div> </div> </div></body></html><script type="text/javascript"> /**//*slider control*/ var setWidth = 0; /**//*get element coordinate & position*/ function elementPosition(element) {
element = (typeof (element) == "string") ? document.getElementById(element) : element; var x = element.offsetLeft; var y = element.offsetTop; var w = element.offsetWidth;
while (element = element.offsetParent) { x += element.offsetLeft; y += element.offsetTop;
} return { x: x, y: y, w: w };
} /**//*catch mouseposition in the document*/ function mousePosition(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop } } function mouseMove() { var ev = window.event || arguments[0]; var mousePos = mousePosition(ev); var elemePos = elementPosition("slider"); var slider_style = document.getElementById("slider_dis_style"); if (slider_style) { if ((mousePos.x >= elemePos.x) && (mousePos.x <= (elemePos.x + elemePos.w))) { slider_style.style.width = (mousePos.x - elemePos.x) + "px"; } } else {return;} } function mouseDown() { var ev = window.event || arguments[0]; var mousePos = mousePosition(ev); var elemePos = elementPosition("slider"); var slider_bar = document.getElementById("slider_dis_bar"); if (slider_bar) { var left=mousePos.x - elemePos.x - 5; if(left>=elemePos.w){left=elemePos.w-5;} if(left<=0){left=0;} slider_bar.style.left = left + "px"; setWidth = left + "px"; } else {return;} } function mouseOut() { var slider_style = document.getElementById("slider_dis_style"); slider_style.style.width = setWidth;//alert(setWidth); } var slider=document.getElementById("slider"); slider.onmousemove = mouseMove; slider.onmousedown = mouseDown; slider.onmouseout = mouseOut;</script>
浙公网安备 33010602011771号