【Javascript学习笔记】【DOM案例实战— —简单图库】

目录

  • 目录
  • 图库(点击链接加载对应的图片)
        • 效果图
        • 实现思路
        • 代码
  • 快捷链接

图库(点击链接加载对应的图片)

该图库不会在另外一个页面打开图片,此处只实现案例思想,具体图库样式从简。

效果图

【Javascript学习笔记】【DOM案例实战— —简单图库】_第1张图片

实现思路

建立有一个对象作为参数的函数,获取点击对象–(链接元素)里的href属性以及title属性,并将对应的两个属性放置在对应id的容器内src和文本节点。通过点击触发函数,无论调用函数是否成功,都会因为return false 而点击链接跳到新页面查看图片的效果失效。

代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style> img{ width: 300px; height: 220px; } li{ width: 100px; text-align: center; list-style: none; float: left; } style>
    <script> function showPic(whichPic){ var source = whichPic.getAttribute("href");//获取链接 var title = whichPic.getAttribute("title"); var obj = document.getElementById("showBox"); var showTitle = document.getElementById("showTitle"); obj.setAttribute("src",source);//将对应链接放到展示处 showTitle.textContent = title; } script>
head>
<body>
    <li><a href="img/1.jpg" title="img 1" onclick="showPic(this);return false;">img 1a>li>
    <li><a href="img/2.jpg" title="img 2" onclick="showPic(this);return false;">img 2a>li>
    <li><a href="img/3.jpg" title="img 3" onclick="showPic(this);return false;">img 3a>li>
    <br>
    <div>
        <img id="showBox" src="img/1.jpg" alt="img show">
        <p>显示图片标题:<span id="showTitle">span>p>
    div>
body>
html>

此处的title,通过textContent写进span标签。也可以用innerHTML,可是个人不建议。

快捷链接

全部Javascript学习笔记的目录 Click Here>>
github源码下载 Click Here>>

你可能感兴趣的:(前端(js,html,css,less))