JavaScript练习（四）——图片库

最新推荐文章于 2024-08-11 18:40:36 发布

Starry577

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量245

点赞数 1

文章标签： javascript js css html

本文链接：https://blog.csdn.net/ttxwwdn/article/details/110494735

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript图片库</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        width: 600px;
        margin: 20px auto;
      }
      ul {
        list-style: none;
        float: left;
      }
      ul a {
        text-decoration: none;
        color: royalblue;
      }
      ul a img {
        width: 70px;
        height: 55px;
      }

      .placeholder {
        position: relative;
        width: 400px;
        height: 350px;
      }
      #placeholder {
        float: left;
        width: 400px;
        height: 300px;
      }
      .placeholder p {
        position: absolute;
        bottom: 0;
        left: 120px;
        height: 50px;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <ul id="imagegallery">
        <li>
          <a href="../../JavaScript基础/images/png1.jpg" title="漂亮的山脉"
            ><img src="../../JavaScript基础/images/png1.jpg" alt=""
          /></a>
        </li>
        <li>
          <a href="../../JavaScript基础/images/png2.jpg" title="孤独的背影"
            ><img src="../../JavaScript基础/images/png2.jpg" alt=""
          /></a>
        </li>
        <li>
          <a href="../../JavaScript基础/images/png3.jpg" title="人迹罕至的公路"
            ><img src="../../JavaScript基础/images/png3.jpg" alt=""
          /></a>
        </li>
        <li>
          <a href="../../JavaScript基础/images/png4.jpg" title="漂亮的水波"
            ><img src="../../JavaScript基础/images/png4.jpg" alt=""
          /></a>
        </li>
        <li>
          <a href="../../JavaScript基础/images/图片1.png" title="这是一只加菲猫"
            ><img src="../../JavaScript基础/images/图片1.png" alt=""
          /></a>
        </li>
      </ul>
      <div class="placeholder">
        <img
          src="../../JavaScript基础/images/图片1.png"
          alt="placeholder"
          id="placeholder"
        />
        <p id="description">请在右侧选择一张图片</p>
      </div>
    </div>
    <script src="../js/tools.js"></script>
    <script>
      /*
            本章内容：
                -编写一个优秀的标记文件
                -编写一个JavaScript函数以显示用户想要查看到图片
                -由标记触发函数调用
                -使用几个新的方法来扩展这个JavaScript函数
        */
      addLoadEvent(prepareGallert);
    </script>
  </body>
</html>

tools.js

//页面加载完毕时执行函数
function addLoadEvent(func) {
  //把现有的window.onload事件处理函数的值存入变量oldonload
  var oldonload = window.onload;
  //如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它
  if (typeof window.onload != 'function') {
    window.onload = func;
  }
  //如果这个处理函数上已经绑定了一些函数，就把新函数最佳到现有指令的末尾
  else {
    window.onload = function () {
      oldonload();
      func();
    }
  }
}

//改变图片路径
function showPics(whichPic) {
  //检查id为"placeholder"的元素是否存在，不存在则不执行
  if (!document.getElementById("placeholder")) {
    return false;
  }
  var source = whichPic.getAttribute("href");
  var palceholder = document.getElementById("placeholder");
  //nodeName属性总是返回一个大写字母的值，即使元素在HTML文档里是小写字母
  if (palceholder.nodeName != "IMG") {
    return false;
  }
  palceholder.setAttribute("src", source);
  //检查id为"description"的元素是否存在，存在则执行以下代码，不存在则忽略
  if (document.getElementById("description")) {
    //三元操作符：问号前的是条件，问号后的是变量text的两种可取值
    //condition ? if true:if false
    var text = whichPic.getAttribute("title") ? whichPic.getAttribute("title") : "";
    var description = document.getElementById("description");
    /*
      nodeType的返回值：
        若节点为元素节点则返回1
        若节点为属性节点则返回2
        若节点为文本节点则返回3
    */
    //检查description第一个子元素是不是一个文本节点
    if(description.firstChild.nodeType==3){
      description.firstChild.nodeValue = text;
    }
    var width = description.offsetWidth;
    description.style.left = 200 - width / 2 + "px";
  }
  return true;
}

//为图片绑定单击响应事件
function prepareGallert() {
      if (!document.getElementsByTagName || !document.getElementById) {
        return false;
      }
      if (!document.getElementById("imagegallery")) {
        return false;
      }
      var ul = document.getElementById("imagegallery");
      var link = ul.getElementsByTagName("a");
      for (i = 0; i < link.length; i++) {
        link[i].onclick = function () {
        //对showPics()进行取反，如果图片切换成功，则取消onclick的默认行为
        //若失败，则不取消
        return !showPics(this);
        };
        /*
          并非所有用户都使用鼠标，所以我们也要为键盘绑定事件
            使用tab键可以切换链接，按下回车键可以启用当前链接
          事实上，onclick也可以实现以上的效果
          并且onkeypress会带来很多问题，所以不建议使用
        */
        //把onclick事件的所有功能赋给onkeypress事件
        // link[i].onkeypress = link[i].onclick;
      }
}

//弹窗
function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

Starry577

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习（四）——图片库

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JavaScript图片库</title> <style> * {
复制链接

扫一扫