> 웹 프론트엔드 > HTML 튜토리얼 > 《DOM编程艺术》中初步实现的图片库的总结(一)_html/css_WEB-ITnose

《DOM编程艺术》中初步实现的图片库的总结(一)_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:15:25
원래의
916명이 탐색했습니다.

前言:在《DOM编程艺术》一书中,作者给出了一个实例:创建一个图片库,其实功能很简单,就是点击某个列表项时,下方出现相应的图片以及图片说明(图片说明事先以title的形式写在HTML中),虽然是一个简单的例子,当时作者在书中循序渐进,不断的改善图片库中间引入各种知识点,真的是一本好书,在此对这个实例进行一些总结。

-----------------开始-----------------

1. HTML部分

    <h1>电影天堂</h1>    <ul>        <li>            <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>        </li>        <li>            <a href="images/02千与千寻.jpg" title="千与千寻" onclick="showPic(this);return false;">千与千寻</a>        </li>        <li>            <a href="images/03哆啦A梦.jpg" title="哆啦A梦" onclick="showPic(this);return false;">哆啦A梦</a>        </li>        <li>            <a href="images/04当幸福来敲门.jpg" title="当幸福来敲门" onclick="showPic(this);return false;">当幸福来敲门</a>        </li>    </ul>    <!--占位符图片-->    <img id="placeholder" src="images/placeholder.jpg" alt="hehehe">    <!--一段描述-->    <p id="description">选择一张图片</p>
로그인 후 복사

2. CSS样式

        h1{            color: #333;        }        a{            color: gray;            font-weight: bold;            text-decoration: none;        }        ul{            padding: 0;        }        li{            float: left;            padding: 1em;            list-style-type: none;        }        img{            display: block;            clear: both;        }
로그인 후 복사

3. js代码

        //首先封装一个函数, 参数whicpic代表一个元素的节点,即指向某个图片的a元素        function showPic(whichpic){            //获取某个图片的href属性            var source = whichpic.getAttribute("href");            //获取占位符图片的节点            var placeholder = document.getElementById("placeholder");            //使用setAttribute对placeholder元素的src属性进行刷新            placeholder.setAttribute("src" , source);            //one more thing:在前换图片的时候,将占位符图片下面的文字内容切换为对应图片的title            //首先获取图片对应的title属性            var text = whichpic.getAttribute("title");            //获取图片描述的节点            var description = document.getElementById("description");            //实现文本的切换            //首先要获取到description中的文本,需要先获取这个文本节点再获取这个文本节点的值,并把text的值赋值给它            description.firstChild.nodeValue = text;              //也可以用firstchild:description.firstChild.nodeValue        }
로그인 후 복사

4.总结

1.首先获取图片的href属性:

whichpic.getAttribute("href")

2.接着获取占位符图片的节点: document.getElementById("placeholder")

3.然后设置占位符图片的 src属性:

placeholder.setAttribute("src" , source)

4.接着对占位符图片下方的文字进行操作,把图片的 title值赋值给

标签的 nodeValue

  • var text = whichpic.getAttribute("title")

  • var description = document.getElementById("description")

  • description.firstChild.nodeValue = text

其中可以通过childNode获取节点的所有子节点,并且用nodeType属性进行判断:1代表元素节点、2代表属性节点、3代表文本节点,因为本例

标签只有一个子节点,所以可以用fistChild,或者childNode[0]来获取,获取节点后再用nodeValue获取节点的属性值。

5.添加 onclick处理事件

这只是初级的一个例子,所以函数处理事件嵌套在 HTML代码中,并且为了阻止点击链接的默认行为(跳转到一个新的页面),后面还要返回给它一个 false。

        <li>            <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a>        </li>
로그인 후 복사

6.不足

点击事件绑定在HTML代码中,很笨重,下一篇中将做升级。

7.老规矩,贴出完整源码

        example    
<h1>电影天堂</h1> <ul> <li> <a href="images/01灰姑娘.jpg" title="灰姑娘" onclick="showPic(this);return false;">灰姑娘</a> </li> <li> <a href="images/02千与千寻.jpg" title="千与千寻" onclick="showPic(this);return false;">千与千寻</a> </li> <li> <a href="images/03哆啦A梦.jpg" title="哆啦A梦" onclick="showPic(this);return false;">哆啦A梦</a> </li> <li> <a href="images/04当幸福来敲门.jpg" title="当幸福来敲门" onclick="showPic(this);return false;">当幸福来敲门</a> </li> </ul> <!--占位符图片--> <img id="placeholder" src="images/placeholder.jpg" alt="hehehe"> <!--一段描述--> <p id="description">选择一张图片</p> <script> //首先封装一个函数, 参数whicpic代表一个元素的节点,即指向某个图片的a元素 function showPic(whichpic){ //获取某个图片的href属性 var source = whichpic.getAttribute(&quot;href&quot;); //获取占位符图片的节点 var placeholder = document.getElementById(&quot;placeholder&quot;); //使用setAttribute对placeholder元素的src属性进行刷新 placeholder.setAttribute(&quot;src&quot; , source); //one more thing:在前换图片的时候,将占位符图片下面的文字内容切换为对应图片的title //首先获取图片对应的title属性 var text = whichpic.getAttribute(&quot;title&quot;); //获取图片描述的节点 var description = document.getElementById(&quot;description&quot;); //实现文本的切换 //首先要获取到description中的文本,需要先获取这个文本节点再获取这个文本节点的值,并把text的值赋值给它 description.firstChild.nodeValue = text; //也可以用firstchild:description.firstChild.nodeValue } </script>
로그인 후 복사
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿