zoukankan      html  css  js  c++  java
  • JavaScript图片库

    将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数据量就会变得相当可观。我们必须面对这样一个现实:没有人会等待很长长时间去下载一个网页;所以利用JavaScript来创建一个图片库将是最佳的选择;

    说下步骤:

    第一步:把整个图片库的链接都加载到图片库的主页里;

    第二步:当用户点击对应的超链接时,拦截网页的默认行为,即(超链接点击跳转行为);

    第三步:当用户点击对应的超链接后,把"占位符"图片替换成那个超链接所对应的图片;

    1、代码如下:

    第一版:

    <body>
    <a href="img/index.jpg">图片一</a><br />
        <a href="img/index.jpg" onclick="showPic(this);return false;">图片一</a><br />
        <a href="img/index1.jpg" onclick="showPic(this);return false;">图片二</a><br />
        <a href="img/index2.jpg" onclick="showPic(this);return false;">图片三</a><br />
        <a href="img/index4.jpg" onclick="showPic(this);return false;">图片四</a>
        <p>----------------------------</p>
        <img src="img/blank.png" alt="blank"/>
        <script type="text/javascript">function showPic(whichpic) {
                var source = whichpic.getAttribute('href'); //获取目标元素的src属性;
                var placeholder = document.getElementsByTagName('img'); //获取占位符图片对象;
                placeholder.setAttribute('src', source); //图片替换
            }
        </script>
    </body>
    代码解析:onclick="showPic(this);return false;" 这段代码表示给<a></a>标签添加了一个onclick事件处理函数,添加处理函数的语法如下所示:
    event="JavaScript statement" JavaScript statement->方法体,this代表当前<a></a>标签对象。
    注意return false;表示阻止超链接跳转的默认行为;
    让我们了解一下DOM1中的事件处理函数的工作机制。在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会被执行。被调用的JavaScript就会返回一个值,这个值将被传递给那个事件处理函数。
    若返回的值是true,onclick事件处理函数就认为这个函数被点击了,若为false,就相反;所以加上return false,就可以防止用户被带到目标链接窗口;
    注意:return
    false;只在DOM1中适用;所以这段代码只会在支持DOM1标准的浏览器中才会有效,其他的浏览器任然会被带到目标窗口!关于这个bug暂时先放一放!

    2、由于return false;在一些浏览器上可能看不出效果,所以我这边换了一种方式实现JS图片库;代码如下:
    第二版
    <body>
        <a href="javascript:void(0);" title="img/index.jpg">图片一</a><br />
        <a href="javascript:void(0);" title="img/index1.jpg">图片二</a><br />
        <a href="javascript:void(0);" title="img/index2.jpg">图片三</a><br />
        <a href="javascript:void(0);" title="img/index4.jpg">图片四</a>
        <p>----------------------------</p>
        <img src="img/blank.png" alt="blank"/>
        <script type="text/javascript">
            var a = document.getElementsByTagName('a');
            for (var i = 0; i < a.length; i++) {
                a[i].onclick = function () {
                    showPic(this);
                }
            }
                function showPic(whichpic) {
                var source = whichpic.getAttribute('title'); //获取目标元素的title属性;
                var placeholder = document.getElementsByTagName('img')[0]; //获取占位符图片对象;
                placeholder.setAttribute('src', source); //图片替换
            }
        </script>
    </body>

    3、在学完nodeValue属性http://www.cnblogs.com/GreenLeaves/p/5695165.html#nodeValue后给JS图片库增加一个新的功能:点击超链接把图片的描述显示到图片的下面代码如下:
    第三版
    <body>
        <a href="javascript:void(0);" title="img/index.jpg">图片一</a><br />
        <a href="javascript:void(0);" title="img/index1.jpg">图片二</a><br />
        <a href="javascript:void(0);" title="img/index2.jpg">图片三</a><br />
        <a href="javascript:void(0);" title="img/index4.jpg">图片四</a>
        <p>----------------------------</p>
        <img src="img/blank.png" alt="blank"/><br />
        <p id="description">
        </p>
        <script type="text/javascript">
            var a = document.getElementsByTagName('a');
            for (var i = 0; i < a.length; i++) {
                a[i].onclick = function () {
                    showPic(this);
                }
            }
            function showPic(whichpic) {
                var source = whichpic.getAttribute('title'); //获取目标元素的title属性;
                var placeholder = document.getElementsByTagName('img')[0]; //获取占位符图片对象;
                placeholder.setAttribute('src', source); //图片替换
                var description = document.getElementById('description');
                description.childNodes[0].nodeValue = source;
            }
        </script>
    </body>
    
    

    注意:当html代码中<p id="description"></p>中没有空格的时候 这句代码会报错,description.childNodes[0].nodeValue = source;原因是此时的<p>标签之间并没有子节点,若在<p></p>标签之间加一个空格,这个空格就会被解析成<p>标签的子节点,即文本节点,这样description.childNodes[0].nodeValue = source;不会报错,功能完美实现;

    4、在学习完JavaScript之最佳实践后http://www.cnblogs.com/GreenLeaves/p/5701873.htm
    再次对JS图片库进行升级,这次升级的主要目的是:

    1、使图片库能够平稳退化(即使Broswer禁用JavaScript网页仍能正常访问)

    2、使图片库能向后兼容

    3、分离JS代码到单独的JS文件

    4、重构之前的JS代码提高JS代码的运行性能

    5、合理的放置JS脚本

    6、对象检测:即使老版本浏览器不支持DOM方法,网页仍能正常运行

    7、关键元素的判断,即使关键元素缺失,网页仍能正常运行

    第四版:

    window.onload = prepareGallery;
    function prepareGallery() {
        if (!document.getElementById) return false;
        if (!document.getElementsByTagName) return false;
        //判断浏览器是否支持DOM方法防止浏览器不支持网页出现运行错误
    
        //判断id为imagegallery的元素是否存在,如果不存在的话网页任能正常运行
        if (document.getElementById("imagegallery")) {
            var gallery = document.getElementById("imagegallery");
            var links = gallery.getElementsByTagName("a"); //这里不加判断是因为如果你连图片都没有,何谈功能。
            for (var i = 0; i < links.length; i++) {
                links[i].onclick = function () {
                    //showPic(this);
                    //return false;  假设showPic方法没有出现问题,return false是正确的做法,但是万一shwPic出现了问题,这个时候返回false,点击超链接将没有任何反应,
                    //所以这个地方这样该更好
                    return !showPic(this); //如果showPic方法出现问题,超链接任然有效符合JavaSciprt平稳退化的要求;
                }
            }
        }
    }
    function showPic(whichpic) {
        if (!document.getElementsByTagName("img")[0]) return false;
        var source=whichpic.getAttribute("href");//获取图片的链接地址
        var placeholder = document.getElementsByTagName("img")[0];
        if (placeholder.nodeName != "IMG") return false;
        placeholder.setAttribute("src", source);
        if (!document.getElementById("description")) return false;
        var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //获取图片名称(判断图片超链接的文本节点(图片名称)是否存在)
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
        return true;
    }

    html代码:

    <body>
        <div id="imagegallery">
            <a href="img/index.jpg" title="dog_one">图片一</a><br />
            <a href="img/index1.jpg" title="dog_two">图片二</a><br />
            <a href="img/index2.jpg" title="dog_three">图片三</a><br />
            <a href="img/index4.jpg" title="dog_four">图片四</a>
            <p>
                ----------------------------</p>
            <img src="img/blank.png" alt="blank" /><br />
            <p id="description">
            </p>
        </div>
        <script src="picLibrary.js" type="text/javascript"></script>  <!--合理放置了JS脚本在加载完DOM后在加载JS脚本,提高了页面的加载速度,提现了内容优先的原则-->
    </body>

     在学习完JavaScript动态向文档中添加元素和内容后http://www.cnblogs.com/GreenLeaves/p/5730898.html

    再重新回到我们的图片库,我们发现在我们的htm文档中有一个图片和一段文字是专门为showPic脚本服务的,若能把结构和行为分离自然是最好的,既然这些元素的存在,是为了让DOM方法来处理它们,那么用DOM方法来创建他们才是最合适的选择。

    第五版:

    window.onload = prepareGallery;
    function prepareGallery() {
        if (!document.getElementById) return false;
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementsByTagName) return false; //判断浏览器是否支持DOM方法防止浏览器不支持网页出现运行错误 //判断id为imagegallery的元素是否存在,如果不存在的话网页任能正常运行 if (document.getElementById("imagegallery")) { var gallery = document.getElementById("imagegallery"); var placeholder = document.createElement("img"); //创建一个图片展示容器 placeholder.setAttribute("id", "placeholder"); placeholder.setAttribute("src", "../img/blank.jpg"); var description = document.createElement("p"); //创建描述 description.setAttribute("id", "description"); var desctxt = document.createTextNode("chose an image"); description.appendChild(desctxt); var body = document.getElementsByTagName("body")[0]; body.appendChild(placeholder); body.appendChild(description); var links = gallery.getElementsByTagName("a"); //这里不加判断是因为如果你连图片都没有,何谈功能。 for (var i = 0; i < links.length; i++) { links[i].onclick = function () { //showPic(this); //return false; 假设showPic方法没有出现问题,return false是正确的做法,但是万一shwPic出现了问题,这个时候返回false,点击超链接将没有任何反应, //所以这个地方这样该更好 return !showPic(this); //如果showPic方法出现问题,超链接任然有效符合JavaSciprt平稳退化的要求; } } } } function showPic(whichpic) { var source = whichpic.getAttribute("href");//获取图片的链接地址 placeholder.setAttribute("src", source); var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //获取图片名称(判断图片超链接的文本节点(图片名称)是否存在) document.getElementById("description").firstChild.nodeValue = text; return true; }

    html代码:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body>
        <div id="imagegallery">
            <a href="../img/index.jpg" title="dog_one">图片一</a><br />
            <a href="../img/index1.jpg" title="dog_two">图片二</a><br />
            <a href="../img/index2.jpg" title="dog_three">图片三</a><br />
            <a href="../img/index4.jpg" title="dog_four">图片四</a>
        </div>
        <script src="jsPic.js"></script>  <!--合理放置了JS脚本在加载完DOM后在加载JS脚本,提高了页面的加载速度,提现了内容优先的原则-->
    </body>
    </html>


    这个版本的图片库的结构和行为分离的已经很彻底了,但是还是有个问题,因为这里的图片链接列表刚好是<body>部分的最后一个元素,如果在这个图片列表之后还有其他的一些元素?我们该怎么做?我们最初的想法是想让新创建的元素紧紧的跟在图片清单的后面,而且不管清单出现在哪个位置。所以这个图片库的版本还有待改进!

    在学了通过insertAfter()和insertBefore()向指定元素位置的地方加入元素之后http://www.cnblogs.com/GreenLeaves/p/5731614.html

    我们结合之前所有的学习内容对JS图片库再做一次改进,代码如下:

    第六版:

    utility.js  公共库

    /*
    window.onload事件(当页面加载完毕时需要调用的事件,也就是说当我们在开发中需要调用一些JS函数在页面加载完毕后执行的可以和这个事件绑定)
    但是这个事件只能绑定一个函数,如果再次绑定原先的事件会被覆盖掉.所以这个方法就是将页面加载完毕之后需要的函数创建一个队列,然后将需要执行的函数一个个添加
    到队列里面;
    @param func  -需要添加到队列里面的函数
    */
    function addOnloadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != "function") {
            window.onload = func; //如果window.onload事件没有绑定任何function则正常绑定
        }
        else {
            //如果window.onload事件已经绑定了函数,则在原来的基础上,继续添加新的函数
            window.onload = function () {
                oldonload();
                func();
            };
        }
    }
    
    
    /*
    addOnloadEvent的扩展版因为每次添加一个函数都需要调用addOnloadEvent()函数,所以为了节省代码,将需要绑定的函数名写入到一个数组里面,
    然后将数组引用,传递给addOnloadEventlist();每次添加,只需将函数名,写到数组里面即可
    @param eventlist  -需要与window.onload事件绑定的函数名数组
    */
    function addOnloadEventlist(eventlist) {
        if (!eventlist) return false;
        var oldonload = window.onload;
        window.onload = function () {
            for (var i = 0; i < eventlist.length; i++) {
                eventlist[i]();
            }
        }
    
    }
    
    
    /*
    向目标元素之后添加新的元素
    @param newElement=新元素
    @param targetElement=目标元素
    */
    function insertAfter(newElement, targetElement) {
        /*
        编写逻辑
        1、首先找到给出我们需要插入的元素和用来定位的目标元素
        2、根据目标元素找到两个元素的父元素
        3、判断目标元素是不是父元素内的唯一的元素.
        4、如果是,向父元素执行追加操作,就是appendChild(newElement)
        5、如果不是,向目标元素的之后的紧接着的节点之前执行inserBefore()操作
        */
        var parentElement = targetElement.parentNode; //find parent element
        if (parentElement.lastChild == targetElement)//To determime确定,下决心 whether the last element of the parent element is the same as the target element 
        {
            parentElement.appendChild(newElement);
        } else {
            parentElement.insertBefore(newElement, targetElement.nextSibling);
        }
    }

    index.js

    function showPic(whichpic) {
        if (!document.getElementById("placeholder")) return false;
        if (!document.getElementById("description")) return false;
        var placeholder = document.getElementById("placeholder");
        var description = document.getElementById("description");
        var source = whichpic.getAttribute("href"); //获取图片的链接地址
        placeholder.setAttribute("src", source);
        var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //获取图片名称(判断图片超链接的文本节点(图片名称)是否存在)
        if (description.firstChild.nodeType == 3) {
            description.firstChild.nodeValue = text;
        }
        else {
            return false;
        }
        return true;
    }
    
    function preparePlaceholder() {
        if (!document.getElementById) return false;
        if (!document.createElement) return false;
        if (!document.createTextNode) return false;
        if (!document.getElementsByTagName) return false;
        //判断浏览器是否支持DOM方法防止浏览器不支持网页出现运行错误
        //判断id为imagegallery的元素是否存在,如果不存在的话网页任能正常运行
        if (document.getElementById("imagegallery")) {
            var gallery = document.getElementById("imagegallery");
            var placeholder = document.createElement("img"); //创建一个图片展示容器
            var description = document.createElement("p"); //创建描述
            var desctxt = document.createTextNode("chose an image");
            placeholder.setAttribute("id", "placeholder");
            placeholder.setAttribute("src", "../img/blank.png");
            description.setAttribute("id", "description");
            description.appendChild(desctxt);
            insertAfter(placeholder, gallery);
            insertAfter(description,placeholder);
        }
    }
    function prepareGallery() {
        if (!document.getElementById) return false;
        if (!document.getElementsByTagName) return false;
        if (!document.getElementById("imagegallery")) return false;
        var gallery = document.getElementById("imagegallery");
        var links = gallery.getElementsByTagName("a"); //这里不加判断是因为如果你连图片都没有,何谈功能。
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function () {
                //showPic(this);
                //return false;  假设showPic方法没有出现问题,return false是正确的做法,但是万一shwPic出现了问题,这个时候返回false,点击超链接将没有任何反应,
                //所以这个地方这样该更好
                return !showPic(this); //如果showPic方法出现问题,超链接任然有效符合JavaSciprt平稳退化的要求;
            }
        }
    }
    var eventlist = [preparePlaceholder, prepareGallery];
    addOnloadEventlist(eventlist);

    html文件:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="../js/utility.js" type="text/javascript"></script> 
        <script src="../js/index.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="imagegallery">
            <a href="../img/index.jpg" title="dog_one">图片一</a><br />
            <a href="../img/index1.jpg" title="dog_two">图片二</a><br />
            <a href="../img/index2.jpg" title="dog_three">图片三</a><br />
            <a href="../img/index4.jpg" title="dog_four">图片四</a>
        </div>
    </body>
    </html>

    现在图片库真正的做到了,结构、样式和行为彻底分离;

    不过、这里还可以做下改进,将超链接的内容改成图片的缩略图、就是一个使用的图片库了。

     
  • 相关阅读:
    bat文件转换为exe文件
    桌面快捷方式增(删)
    客户推广微信小程序的几种方法如下
    小程序开发客户对接流程
    Java MySQL 连接
    前端开发构建工具
    [转]chrome 的devtools 中setting 开启workspace , 也有点用处。不是很大
    回归基础的东西,不能只是“感觉会了”
    angular 的ui.router 定义不同的state 对应相同的url
    学习javascript 非常好的博客
  • 原文地址:https://www.cnblogs.com/GreenLeaves/p/5691797.html
Copyright © 2011-2022 走看看