javascript图片库_我爱web的javascript图片-CSDN博客

本文链接：https://blog.csdn.net/pythonniu/article/details/56489800

##得自<JavaScript Dom 编程艺术第二版>

##目的:使用户在一个页面中查看图片不用跳转到新窗口./

##需求:1.当点击某个连接时,要留在本窗口而不是跳转新窗口

2.当点击某个连接时,能在这个网页上同时看到那张图片以及原有的图片清单

##思路:通过增加一个"占位符"图片的办法在这个主页上预留一个浏览区域

在点击某个链接时,拦截这个网页的默认行为

在点击某个链接时, "占位符"图片替换为与那个链接相对应的图片//

00x1 简单框架

<!doctype html>
<html>
<head>
    <title>图片库</title>
</head>
<script type="text/javascript">
    var
</script>
<body>
<h1>Photos</h1>
<ul>
    <li>
        <a href="image/sky.jpg" title="This is sky">Sky</a>
    </li>
    <li>
        <a href="image/cloud.jpg" title="This is Cloud">Cloud</a>
    </li>
    <li>
        <a href="image/big.jpg" title="This is Big jpg">Big</a>
    </li>
    <li>
        <a href="image/finish.jpg" title="This is finish">Finish</a>
    </li>
</ul>
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" id="baidu" />
</body>
</html>

00x2 阻止默认行为

事件处理函数的工作机制:在给某个元素添加了事件处理函数后,一旦事件发生,相应的JavaScript代码就会得到执行.被调用的JavaScript代码可以返回一个布尔值,这个值将被传递给那个事件处理函数.

所以我们可以在标签调用JavaScript函数时,在函数后面加个return false; 这样<a>的默认行为就会被阻止.

00x3 JavaScript函数的编写

#点击任意<a>标签,下方的<img>标签的src要被替换成所点击<a>标签的href地址

<script type="text/javascript">
    function ShowPic(Pic){
        var source=Pic.getAttribute("href");//取被点击标签的href属性
        var Ppic=document.getElementById("baidu");//获取img标签的ID
        Ppic.setAttribute("src",source);//将img的src替换成<a>的href
    }
</script>

00x4 完整代码

<!doctype html>
<html>
<head>
    <title>图片库</title>
</head>
<script type="text/javascript">
    function ShowPic(Pic){
        var source=Pic.getAttribute("href");
        var Ppic=document.getElementById("baidu");
        Ppic.setAttribute("src",source);
    }
</script>
<body>
<h1>Photos</h1>
<ul>
    <li>
        <a href="image/sky.jpg" title="This is sky" οnclick="ShowPic(this);return false;">Sky</a>
    </li>
    <li>
        <a href="image/cloud.jpg" title="This is Cloud" οnclick="ShowPic(this);return false;">Cloud</a>
    </li>
    <li>
        <a href="image/big.jpg" title="This is Big jpg" οnclick="ShowPic(this);return false;">Big</a>
    </li>
    <li>
        <a href="image/finish.jpg" title="This is finish" οnclick="ShowPic(this);return false;">Finish</a>
    </li>
</ul>
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" id="baidu" />
</body>
</html>

在函数调用出感觉太过重复了,个人觉得应该有方法精简的,等后面.