html部分位置屬性

時間 2019-11-15

標籤 html 部分位置屬性欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<style>-->
        <!--#tu{-->
            <!--position: fixed;-->
            <!--top: 100px;-->
            <!--left: 100px;-->
        <!--}-->
    <!--</style>-->
 <style>
        #test{
            width: 300px;
            height: 200px;
            border: 1px solid red;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="test">
    <div id="test1">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
        <br>
    </div>
    <div id="test2">

    </div>
</div>
<script>
    var test1=document.getElementById("test1");
    var test2=document.getElementById("test2");
    var test=document.getElementById("test");

    test2.innerHTML=test1.innerHTML;
    function move(){
        if(test2.offsetTop - test.scrollTop<=0){
            test.scrollTop-=test2.offsetTop;
        }
        test.scrollTop++;

//        window.document.title=test.scrollTop+",test1.offsetTop="+test2.offsetTop;

//        window.document.title=test.scrollTop;
 }
    setInterval("move()",10);
</script>
<!--<body onscroll="test()">-->
<!--<textarea cols="1000" rows="1000"></textarea>-->
<!--<img src="img/b1.jpg" id="tu">-->

<!--<script>-->
    <!--var tu=document.getElementById("tu");-->
    <!--function test(){-->
        <!--tu.style.top=100+document.body.scrollTop;-->
        <!--tu.style.left=100+document.body.scrollLeft;-->
    <!--}-->
<!--</script>-->
<!--<div style="position: absolute;top: 80px;left: 100px">-->
    <!--<div style="position: absolute;top: 100px;left: 100px">-->
        <!--aaaaaaaaaa<br>-->
        <!--aaaaaaaaaa<br>-->
        <!--aaaaaaaaaa<br>-->
        <!--aaaaaaaaaa<br>-->
        <!--aaaaaaaaaa<br>-->
        <!--aaaaaaaaaa<br>-->
        <!--aaaaaaaaaa<br>-->
        <!--aaaaaaaaaa<br>-->

        <!--<div id="one">bbbbbbbbbbbbbb</div>-->
    <!--</div>-->
<!--</div>-->

<!--<script>-->
    <!--var one=document.getElementById("one");-->

    <!--alert(getOffsetTop(one));-->

    <!--function getOffsetTop(obj){-->
        <!--var loc=0;-->
        <!--while(obj){-->
            <!--if(obj.nodeName=="HTML")-->
            <!--break;-->
            <!--loc+=obj.offsetTop;-->
            <!--obj=obj.parentNode;-->
<!--//            alert(obj.nodeName);-->
        <!--}-->
        <!--return loc;-->
    <!--}-->
<!--</script>-->


</body>
</html>

<style>
    #tu{
        position:absolute;
        top:100px;
        left:100px;
    }
</style>

<body onscroll="test()">
<textarea cols="1000" rows="1000"></textarea>
<img src="E:\JetBrains\JsDemo\img\b1.jpg" id="tu">

<script>
    var tu=document.getElementById("tu");
    function test(){
        tu.style.top=100+document.body.scrollTop;
        tu.style.left=100+document.body.scrollLeft;
    }
</script>


</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。