自定义的水平滚动条

最新推荐文章于 2021-09-30 15:53:56 发布

hzf100

最新推荐文章于 2021-09-30 15:53:56 发布

阅读量734

点赞数

分类专栏： javascript HTML 文章标签： function border timer up ie html

本文链接：https://blog.csdn.net/hzf100/article/details/1634527

版权

javascript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

HTML

11 篇文章 0 订阅

订阅专栏

<html>
<head>
 <title>网页特效|http://www.jscode.cn|---用图片替代滚动条的方法</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <style type="text/css">
 #scrollerContent {POSITION: absolute}
 body {font-size:9pt;color:#660000;text-decoration: none}
 </style>
<script>
var leftH = 13;//向上的箭头的高度
var leftW = 9; //向上的箭头的宽度
var rightH = 13;//向下的箭头的高度
var rightW = 9;//向下的箭头的宽度
var dragH = 9; //滚动条的高度
var dragW = 26; //滚动条的宽度
var scrollW =78; //滚动体的高度
var speed =9; //滚动的速度
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;
var mouseY;
var mouseX;
var clickLeft = false;
var clickRight = false;
var clickDrag = false;
var clickAbove = false;
var clickBelow = false;
var timer = setTimeout("",500);
var leftL;
var leftT;
var rightL;
var rightT;
var dragL;
var dragT;
var rulerL;
var rulerT;
var contentL;
var contentW;
var contentClipW;
var scrollLength;
var startX;
function down(e)
{
 //单击左健时处理
 if((document.layers && e.which!=1) || (document.all && event.button!=1))
 return true;
 getMouse(e);
 startX = (mouseX - dragL);
 if(mouseX >= leftL && (mouseX <= (leftL + leftW)) && mouseY >= leftT && (mouseY <= (leftT + leftH))) //单击向左的箭头
 {
 clickLeft = true;
 return scrollForLeft();
 }
 else
 if(mouseX >= rightL && (mouseX <= (rightL + rightW)) && mouseY >= rightT && (mouseY <= (rightT + rightH))) //单击向右的箭头
 {
 clickRight = true;
 return scrollForRight();
 }
 else
 if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))) //滚动条内不做操作
 {
 clickDrag = true;
 return false;
 }
 else
 if(mouseY >= dragT && (mouseY <= (dragT + dragH)) && mouseX >= rulerL && (mouseX <= (rulerL + scrollW))) //滚动体内
 {
 if(mouseX < dragL) //向左滚
 {
 clickAbove = true;
 clickLeft = true;
 return scrollForLeft();
 }
 else //向右滚
 {
 clickBelow = true;
 clickRight = true;
 return scrollForRight();
 }
 }
 else
 {
 return true;
 }
}

function move(e)
{
 if(clickDrag && contentW > contentClipW) //有滚动条时执行
 {
 getMouse(e);
 dragL = (mouseX - startX);
 if(dragL < (rulerL))
 dragL = rulerL;
 if(dragL > (rulerL + scrollW - dragW))
 dragL = (rulerL + scrollW - dragW);
 contentL = ((dragL - rulerL)*(1/scrollLength));
 contentL = eval('-' + contentL);
 moveTo();
 if(ie4)
 return false;
 }
}

//停止滚动
function up()
{
    clearTimeout(timer);
    clickLeft = false;
    clickRight = false;
    clickDrag = false;
    clickAbove = false;
    clickBelow = false;
    return true;
}

function getL()
{
    if(ie4)
        contentL = document.all.scrollerContent.style.pixelLeft;
    else
        if(nn4)
            contentL = document.scrollerContentClip.document.scrollerContent.left;
        else
            if(dom)
                contentL = parseInt(document.getElementById("scrollerContent").style.left);
}

//移动内容
function moveTo()
{
    if(ie4)
    {
        document.all.scrollerContent.style.left = contentL;
        document.all.ruler.style.left = dragL;
        document.all.drag.style.left = dragL;
    }
    else
    if(nn4)
    {
        document.scrollerContentClip.document.scrollerContent.top = contentL;
        document.ruler.left = dragL;
        document.drag.left = dragL;
    }
    else
        if(dom)
        {
            document.getElementById("scrollerContent").style.left = contentL + "px";
            document.getElementById("drag").style.left = dragL + "px";
            document.getElementById("ruler").style.left = dragL + "px";
        }
}

function reloadPage()
{
location.reload();
}

</script>

</head>
<body οnlοad="eventLoader()">
 
 <img height="9" src="slider.gif" width="26" border="1">
 
 
 <img height="9" src="slider.gif" width="26" border="1">
 
 
 <img height="13" alt="" src="scrollup.gif" width="9" border="1">
 
 
 <img height="13" alt="" src="scrolldown.gif" width="9" border="1">
 
 
 <img height="13" alt="" src="scrolldown.gif" width="100" border="1">
 
 
 
 
 
 呵呵呵呵
 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发
 呵呵
 呵呵
 呵呵呵呵
 呵呵呵呵
 呵呵呵
 呵呵呵呵
 呵呵
 
 
</body>
</html>