JS-BOM

最新推荐文章于 2024-09-14 18:52:56 发布

arc52637

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量94

点赞数

文章标签： javascript java xhtml ViewUI

原文链接：http://www.cnblogs.com/zeishao/p/6536084.html

版权

這一周還學習了BOM我已經被BOM和DOM搞得神志不清了，先説説BOM的簡捷吧：

这是浏览器运行时中的两个不同的概念。

BOM 浏览器对象模型

提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）

DOM 文档对象模型

        DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
        DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。
特定语言的DOM
     针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础。


我們用Bom做了移動DIV，輪播，著是輪播的代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 800px;
            height: 600px;
            /*border: 1px solid gray;*/
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        #div1 img{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1">
    <img src="img/1.jpg" alt="" width="800"/>
    <img src="img/2.jpg" alt="" width="800"/>
    <img src="img/3.jpg" alt="" width="800"/>
    <img src="img/4.jpg" alt="" width="800"/>
    <img src="img/5.jpg" alt="" width="800"/>
    <img src="img/6.jpg" alt="" width="800"/>
    <img src="img/7.jpg" alt="" width="800"/>
</div>
<div id="div2"></div>
<script>
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var imgs = div1.getElementsByTagName('img');
    window.οnlοad=function(){
        for(var i=0; i<imgs.length; i++){
            imgs[i].style.left = i*800+'px';
        }
    };

    function imgMove(){
//        div2.innerHTML="";
        var bl = true;
        for(var i=0; i<imgs.length; i++){
            imgs[i].style.left = imgs[i].offsetLeft-1+'px';
//            div2.innerHTML+=imgs[i].offsetLeft+",,";

            if(imgs[i].offsetLeft==0){
                bl = false;
                if(i==0)
                    imgs[imgs.length-1].style.left=(imgs.length-1)*800+1+'px';
                else
                    imgs[i-1].style.left=(imgs.length-1)*800+1+'px';
            }

        }
        if(bl)
            setTimeout(imgMove, 10);
        else
            setTimeout(imgMove, 1000);
    }

    setTimeout(imgMove, 1000);
</script>
</body>
</html>