第六章 案例研究 图片库改进版

来源:互联网 发布:mac传照片到安卓手机 编辑:程序博客网 时间:2024/05/21 22:38
<html><head>    <title>第六章 案例研究 图片库改进版</title></head><body>    <h1>Snapshots</h1>    <ul id="imagegallery">        <li><a href="img/1.jpg" title="a" >a</a></li>        <li><a href="img/2.jpg" title="b" >b</a></li>        <li><a href="img/3.jpg" title="c" >c</a></li>        <li><a href="img/4.jpg" title="d" >d</a></li>        <li><a href="img/5.jpg" title="e" >e</a></li>        <li><a href="img/6.jpg" title="f" >f</a></li>        <li><a href="img/7.jpg" title="g" >g</a></li>        <li><a href="img/8.jpg" title="h" >h</a></li>    </ul>    <p id="description">这是图片描述</p>    <img id="placeholder" src="img/1.jpg" alt="my" ></body><script type="text/javascript">    function prepareGallery(){        // 三个if都是测试 是否存在        if (!document.getElementById)return false;         if (!document.getElementsByTagName)return false;         if (!document.getElementById("imagegallery"))return false;         //获取ul列表        var gallery=document.getElementById("imagegallery");        //获取ul列表里面的a元素        var links=gallery.getElementsByTagName("a");        //遍历所有的a元素,并添加点击事件        for (var i = 0; i < links.length; i++) {            links[i].onclick=function(){                //测试,有showpic()则阻止a元素默认行为,无则不阻止                return showPic(this)?false:true;            }           }    }    prepareGallery();    function showPic(whichpic){        //测试是否存在        if (!document.getElementById("placeholder")) return false;        //获取 href 属性的链接        var source=whichpic.getAttribute("href");        //获取占位符        var placeholder=document.getElementById("placeholder");        //测试是否存在            if(placeholder.nodeName!="IMG")return false;        //把获取 href 属性的链接给到占位符的 src         placeholder.setAttribute("src",source);        //测试是否存在        if (document.getElementById("description")){            //三元操作符,判断,有选择前者,无选择后者,获取的值给到text            var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";            //获取 p 元素            var description=document.getElementById("description");            //判断节点是否等于3(文本节点)            if(description.firstChild.nodeType==3){                //把获取的 litile 属性的值给到 p 元素的文本节点                description.firstChild.nodeValue=text;            }               }return true;           }    /*        在本章里,做了许多优化。        1.尽量使javascript代码不再依赖那些没有保证的假设,为此引入了许多测试,这些测试和检查使得javascript代码能够平稳退化,但使得函数里的代码变得更多了。        在实际工作中,你要自己决定是否需要这些检查。         2.把事件处理函数从标记文档分离了,使得javascript代码不再依赖HTML文档的内容和结构。结果与行为分离的程度越大越好。    */</script></html></script></html>
1 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 木质桌子黏黏的怎么办 白色塑料桌子染色了怎么办 3dmax模型变透明了怎么办 刚养的兔子不吃怎么办 熊猫兔不吃下喝怎么办 熊猫兔感冒了一直打喷嚏怎么办 兔子后腿骨断了怎么办 兔子的腿肿了怎么办 仓鼠喝了牛奶该怎么办 宠物兔不吃不喝怎么办 兔子把木屑吃了怎么办? 小车司机碰瓷大车司机怎么办 在淘宝买到假的护肤品怎么办 淘宝购物发现是假的怎么办 电脑键盘灯不亮不能打字怎么办 海棠兔屁股有屎怎么办 大冒险告白被接受了怎么办剧透微博 大冒险被告白了怎么办 腐书网 大冒险告白被接受了怎么办 006 大冒险告白被接受了怎么办广播剧 coolpad手机解锁图案忘了怎么办 装死兔严重掉毛怎么办 兔子嘴巴磕破了怎么办 嘴巴里面摔烂了怎么办 兔子的鼻子损了怎么办 两个人嘴巴被粘牙糖粘住怎么办 小鸟被老鼠粘粘住了怎么办 小猫被老鼠粘粘住怎么办 羊子嘴巴烂了怎么办 小孩突然嘴肿了怎么办 电视机图像颜色变了 怎么办 冰沙床垫结块了怎么办 冰沙床垫融化了怎么办 脚真菌感染肿了怎么办 水雾魔珠被吃了怎么办 怀孕40天出血了怎么办 联璧金融里的钱怎么办 提现的钱不对怎么办 究极日月蛋太多怎么办 人脸识别不匹配怎么办 地下城没有属强怎么办