scrolltop家族

最新推荐文章于 2023-03-07 18:43:04 发布

转载最新推荐文章于 2023-03-07 18:43:04 发布 · 484 阅读

33 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖拽案例l另外写法</title>
    <style>
        *{margin:0;padding:0;}
        .nav{
            height:30px;
            background: #036663;
            border-bottom:1px solid #369;
            line-height: 30px;
            padding-left:30px;
        }
        .nav a {
            color:#fff;
            text-align: center;
            font-size:14px;
            text-decoration: none;

        }
        .d-box{
            width:400px;
            height:300px;
            border:5px solid #eee;
            box-shadow:2px 2px 2px 2px #666;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -155px;
            margin-left:-205px;

        }
        .hd{
            width:100%;
            height:25px;
            background-color: #7c9299;
            border-bottom:1px solid #369;
            line-height: 25px;
            color:white;
            cursor: move;
        }
        #box_close{
            float: right;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="javascript:;" id="register">注册信息</a>
</div>
<div class="d-box" id="d_box">
    <div class="hd" id="drop">注册信息   (可以拖拽)
            <span id="box_close">【关闭】</span>
    </div>
    <div class="bd"></div>
</div>
</body>
</html>
<script>
    var box = document.getElementById("d_box");
    var drop = document.getElementById("drop");
    startDrop(drop,box);  // 鼠标放到  drop    但是移动 是 box
    function startDrop(current,move) {
        current.onmousedown = function(event) {
            var event = event || window.event;
            var x = event.clientX - move.offsetLeft - 205;   // 记录当前盒子的x 位置
            var y = event.clientY - move.offsetTop - 155;  //  // 记录当前盒子的y位置
            document.onmousemove = function(event) {
                var event = event || window.event;
                move.style.left = event.clientX - x + "px";
                move.style.top = event.clientY - y + "px";
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }

        }
        document.onmouseup = function() {  // 鼠标弹起之后， 鼠标继续移动不应该操作
            document.onmousemove = null;
        }
    }














</script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>模拟垂直滚动条</title>
    <style>
        .box {
            width: 300px;
            height: 500px;
            border: 1px solid red;
            margin:100px;
            position: relative;
        }
        .content {
            height: auto;
            padding: 5px 18px 5px 5px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .scroll {
            width: 18px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            background-color: #eee;
        }
        .bar {
            width: 100%;
            height: 100px;
            background-color: red;
            cursor: pointer;
            border-radius: 10px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="content">
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
     文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分

    </div>
    <div class="scroll">
        <div class="bar"></div>
    </div>
</div>
</body>
</html>
<script>
    var box = document.getElementById("box");  // 最大的盒子
    var content = box.children[0];  // 内容盒子
    var scroll = box.children[1];  // 右边盒子
    var bar = scroll.children[0];
   // 1. 首先先要计算红色滚动条的高度    内容越多，滚动条越短    反之  反之
   // 滚动条的长度计算公式:  容器的高度 / 内容的高度 * 容器的高度
   // box 是 内容盒子一半  那么红色盒子也要是box盒子的一半
    var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight;
    bar.style.height = barHeight + "px";
   // 下面开始 拖动 红色盒子
    startScroll(bar,content);  // 第一次参数 拖动的   第二个参数 内容的盒子
   function startScroll(obj,target) {
       obj.onmousedown = function(event) {
           // alert(11);
           var event = event || window.event;
           var t = event.clientY - this.offsetTop ; // 红色盒子距离 父亲 盒子顶部距离
           var that = this;  // 把 bar 对象给 that 对象
           document.onmousemove = function(event) {
               var event = event || window.event;
               var barTop = event.clientY - t ;  // 红色移动的距离
               //内容盒子要移动距离
               // （内容盒子高度 -  大盒子高度） /  (大盒子高度 - 红色盒子的高度)   * 红色盒子移动的数值
               var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) *  barTop;
               // 内容盒子移动的距离
               if(barTop < 0)
               {
                   barTop = 0;
               }
               else if(barTop > target.parentNode.offsetHeight - that.offsetHeight)
               // 大于  大盒子的高度  -  红色盒子的高度
               {
                   barTop = target.parentNode.offsetHeight - that.offsetHeight ;
               }
               else
               {
                   target.style.top = -contentTop + "px";  // 往上走是负值
               }
               that.style.top = barTop + "px";
               window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();   // 防止拖动滑块的时候， 选中文字
           }
       }
           document.onmouseup = function() {
             document.onmousemove = null;
       }
   }
</script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>屏幕滑动效果</title>
    <style>
        ul,ol {
            list-style-type: none;
        }
        * {margin:0;padding:0;}
        html,body {
            width: 100%;
            height: 100%;
        }
        #ul {
            width: 100%;
            height: 100%;
        }
        ul li{
            width: 100%;
            height: 100%;
        }
        #ol {
            position: fixed;
            top:0;
            left:50px;
        }
        #ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
        }
    </style>
    <script src="my.js" type="text/javascript"></script>
    <script>
        window.onload = function() {
            var ulBox = $("ul");
            var ulBoxLi = ulBox.children;
            var olBox = $("ol");
            var olBoxLi = olBox.children;
            var bgColor = ["pink","purple","orange","blue","green"];
            var leader = 0,target = 0,timer = null;
            for(var i= 0; i<ulBoxLi.length; i++)
            {
                ulBoxLi[i].style.backgroundColor = bgColor[i];
                olBoxLi[i].style.backgroundColor = bgColor[i];
                olBoxLi[i].index = i;  // 记录当前的索引号
                olBoxLi[i].onclick = function() {
                        clearInterval(timer);
                        target = ulBoxLi[this.index].offsetTop; // 核心语句
                        timer = setInterval(function() {
                            leader = leader + (target - leader ) /10;
                            window.scrollTo(0,leader); // 屏幕滑动
                            //pic.style.left = leader  + 'px';
                        },30)
                }
            }
        }
    </script>
</head>
<body>
<ul id="ul">
    <li>首页</li>
    <li>关注</li>
    <li>动态</li>
    <li>风格</li>
    <li>作品</li>
</ul>
<ol id="ol">
    <li>首页</li>
    <li>关注</li>
    <li>动态</li>
    <li>风格</li>
    <li>作品</li>
</ol>
</body>
</html>