Javascript DOM图片库

来源：互联网发布：html5 css3 js 教程编辑：程序博客网时间：2024/06/05 18:46

读了JavaScript的红宝书，感觉后边的有点难，不行，有点难以理解，于是换书JavaScript DOM，感觉还不错，讲解的很不错，而且还有一些实例，算是把之前看红宝书的知识点练习了一下，嗯，等我看完JavaScript DOM，继续看红宝书。
写了JavaScript DOM里的一个图片库，感觉也学到了一些标准方法，继续！大家有什么好的学习web的方法可以告知我，谢谢啦

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Photo Gallery</title>    <style>        body{            background: pink;            /*text-align: center;*/        }        #main{            /*width: 500px;*/            /*height: 400px;*/            /*text-align: center;*/            /*margin: 0 auto;*/            display: flex;            flex-direction: column;            justify-content: center;            align-items: center;        }        #ul1{            padding: 0;        }        #ul1 li{            list-style:none;            display: inline;            margin: 30px;        }        #div1{            width: 400px;            height: 300px;            padding: 0;            /*margin: 0 auto;*/            border:1px solid black;            background: gray;            text-align: center;            line-height:300px;            /*display: flex;*/        }    </style></head><body><div id="main">    <h1>Photo Gallery</h1>    <ul id="ul1">        <li><a href="img/img1.jpg" title="img1"><img src="img/img11.jpg"></a></li>        <li><a href="img/img2.jpg" title="img2"><img src="img/img22.jpg"></a></li>        <li><a href="img/img3.jpg" title="img3"><img src="img/img33.jpg"></a></li>        <li><a href="img/img4.jpg" title="img4"><img src="img/img44.jpg"></a></li>    </ul>    <div id="div1"><img id="imgsrc" src=""></div>    <strong id="strong1">Choose an image~</strong></div></body><script>    function showPic(whichPic) {        var source=whichPic.getAttribute("href");        var imgSrc=document.getElementById("imgsrc");        var oStrong=document.getElementById("strong1");        imgSrc.setAttribute("src",source);        oStrong.firstChild.nodeValue=whichPic.getAttribute("title");        return true;    }    function prepareGallery() {        var oUl=document.getElementById("ul1");        var links=oUl.getElementsByTagName("a");        for(var i=0;i<links.length;i++){            links[i].onclick=function () {                return showPic(this)?false:true;            }        }    }    window.onload=function () {        prepareGallery();    }</script></html>

看书写代码有感：学习到了写一个网页要考虑到的问题。
平稳退化：确保网页在没有JavaScript的情况下也能正常工作（亲自实验了一下，关掉了chrome的JavaScript功能）；
分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开。（就是HTML，CSS，JavaScript分开写）；
向后兼容性：确保老版本不会因为你的JavaScript脚本死掉。（需要加一些判断条件，最简单的例子：if(!document.getElementById) return false;这种写法比if(document.getElementById){…}好一些，当判断很多的时候，不用嵌套多层。但是，也要根据具体情况来讲。
性能考虑：确定脚本执行的性能最优（例如，尽量少访问DOM和尽量减少标记，合并放置脚本，压缩脚本）

阅读全文

0 0