130 js javascrtipt DOM编程艺术1~6章

最新推荐文章于 2023-04-23 17:02:11 发布

fancivez

最新推荐文章于 2023-04-23 17:02:11 发布

阅读量553

点赞数

分类专栏： js 文章标签： javascript dom

本文链接：https://blog.csdn.net/fancivez/article/details/50519029

版权

js 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

javascrtipt DOM编程艺术1~6章

<!DOCTYPE html>
<html>
<head>
    <title>learnJS</title>
<style>
    body {
        color: #333;
        background: #ccc;
        margin: 1em 10%;
        font-family: "helvetica","Arial","Serif";
    }
    h1 {
        color: #333;
        background-color: transparent;
    }
    img {
        height: 340px;
        width: 500px;
        clear: both;
        display: block;
    }
</style>
<script>
    // window.onload = prepareGallary;
    function addLoadEvent(func){
        var oldonload = window.onload;
        if(typeof window.onload != 'function'){
            window.onload = func;
        } else {
            window.onload = function(){
                oldonload();
                func();
            }
        }
    }

    addLoadEvent(prepareGallary);

    function prepareGallary(){
        //现代浏览器不需要再判断
        // if(!document.getElementById ) return false;
        // if(!document.getElementByTagName ) return false;
        // if(!document.getElementById("imagegallary") ) return false;

        var gallary = getElementById("imagegallary");
        var links = gallary.getElementByTagName("a");
        for(var i = 0; i < links.length; i++){
            links[i].onClick = function(){
                return showPic(this)? false:true;
            }
            links[i].onkeypress = links[i].onClick;
        }
    }

    function showPic(whichpic){
        if(!document.getElementById("placeholder")) return false;
         var placeholder = document.getElementById("placeholder");
         var link = whichpic.getAttribute("title");

         if(placeholder.nodeName != "IMG") return false;
         placeholder.setAttribute("src",link);

         if(document.getElementById("description")){
            var description = document.getElementById("description");
            var text = whichpic.getAttribute("title");
            if(description.firstChild.nodeType == 3){
                description.firstChild.nodeValue = text;
            }
         }
         return true;
    }
</script>
</head>
<body>
<h1>SnapShots</h1>
    <ul id="imagegallary">
        <li>
            <a href="#" title="pic1.jpg" onClick="showPic(this);return false;">pic1</a>
        </li>
        <li>
            <a href="#" title="pic2.jpg" onClick="showPic(this);return false;">pic2</a>
        </li>
        <li>
            <a href="#" title="pic3.jpg" onClick="showPic(this);return false;">pic3</a>
        </li>
        <li>
            <a href="#" title="pic4.jpg" onClick="showPic(this);return false;">pic4</a>
        </li>
    </ul>
    <img src="" alt="pic1" id="placeholder" />
    <p id="description">choose one image</p>
</body>
</html>

fancivez

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
130 js javascrtipt DOM编程艺术1~6章

javascrtipt DOM编程艺术1~6章<!DOCTYPE html><html><head> <title>learnJS</title><style> body { color: #333; background: #ccc; margin: 1em 10%; font-family: "helvetic
复制链接

扫一扫

专栏目录