| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 3018 人关注过本帖
标题:JS 小白, 求解JS 部分问题出在哪里,为什么不能显示出效果?
只看楼主 加入收藏
debby027
Rank: 2
等 级:论坛游民
帖 子:2
专家分:10
注 册:2016-4-12
收藏
 问题点数:0 回复次数:1 
JS 小白, 求解JS 部分问题出在哪里,为什么不能显示出效果?
HTML
<!doctype html>
<html>
<head>
  <meta charset="utf-8"  >
    <title>drinks</title>
    <style>
        h1{
            margin:40px;
        }
        li{
            list-style:none;
            float:left;
            padding:10px;
        }
        img{
            display:block;
            margin:40px;
            clear:both;
        }
        p{
            margin-left:40px;
        }

    </style>

</head>

<body>

<h1>Whould do like some drink? </h1>
<ul class="gallery">
<li><a href="black.gif"   title="black tea" class="popup">black tea</a></li>
    <li><a href="blue.gif" title="blue tea" class="popup" >blue tea</a></li>
<li><a href="chai.gif" title="chai tea" class="popup" >chai tea</a></li>
</ul>

<script type="text/javascript" src="insert.js">

</script>

</body>
</html>


JS 部分:
function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload != "function"){
        window.onload=func;
    }
    else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}

   function showpic(){
//显示一张占位符图片cocktal.gif和一个"p"
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id", "placeholder");
    placeholder.setAttribute("src", "cocktail.gif");
    placeholder.setAttribute("alt", "place holder");
    var para = document.createElement("p");
    para.setAttribute("id", "description");
    var text = document.createTextNode("choose an image.");
    para.appendChild(text);
       var gallery=document.getElementsByClassName("gallery");
       insertafter(para,gallery[0]);
       insertafter(placeholder,gallery[0]);
}
function insertafter(newElement, targetElement){
//将上面的图片和P插入"ul"下面
    var parent=targetElement.parentNode;
    if(parent.lastChild==targetElement){
        parent.appendChild(newElement);
    }
    else{
        parent.insertBefore(newElement,targetElement.nextElementSibling);
    }

    }

function prepareLinks(){
//寻找所有"a", 调用pouPup函数,关闭onclick自己action。
    var links=document.getElementsByTagName("a");
    for( var i=0;i<links.length;i++){
        if(links[i].getAttribute("class")=="popup"){
            links[i].onclick=function(){
                pouPup(this);
                return !pouPup(this);
            }
        }
    }
}
function pouPup(pic) {
//调换占位符图片和"P"中的文字
    var source=pic.getAttribute("href");
    var place=document.getElementById("placeholder");
    place.setAttribute("src",source);

    var text=pic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
    return true;}

addLoadEvent(prepareLinks)
addLoadEvent(pouPup)
搜索更多相关主题的帖子: title drinks style display 
2016-04-12 20:25
在水一方1
Rank: 2
等 级:论坛游民
威 望:1
帖 子:4
专家分:40
注 册:2016-4-17
收藏
得分:0 
很简单,你添加的第二个函数应该是showpic!

[此贴子已经被作者于2016-4-18 10:51编辑过]

2016-04-17 23:06
快速回复:JS 小白, 求解JS 部分问题出在哪里,为什么不能显示出效果?
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.012002 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved