欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html、css和javascript协作实现前端相片走廊的效果

程序员文章站 2022-03-07 18:37:25
目录1、前端实现项目效果2、html、css和javascript协作实现2.1、html2.2 、css2.3 、javascript3、javascript知识点涉及3.1 e.target4、参考1、前端实现项目效果javascript实现的效果:循环浏览所有图像,并为每个图像插入一个元素thumb-bar ,将图像嵌入页面中。将onclick处理程序附加到每个内部,thumb-bar
以便在单击它们时在displayed-img 元素中显示相应...

1、前端实现项目效果

html、css和javascript协作实现前端相片走廊的效果
javascript实现的效果:

  • 循环浏览所有图像,并为每个图像插入一个html、css和javascript协作实现前端相片走廊的效果元素thumb-bar
    ,将图像嵌入页面中。
  • 将onclick处理程序附加到每个html、css和javascript协作实现前端相片走廊的效果内部,thumb-bar <div>以便在单击它们时在displayed-img <img>元素中显示相应的图像。
  • 将onclick处理程序附加到,以便在单击该处理程序时将变暗效果应用于完整尺寸的图像。再次单击它时,再次消除了暗化效果。

2、html、css和javascript协作实现

手动实现了html、css和javascript协作,对关键的部分写了代码注释

2.1、html

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>照片库</title>

    <link rel="stylesheet" href="style.css">
    
  </head>

  <body>
    <h1>照片库示例</h1>

    <div class="full-img">   <!-- 这是第1块的显示区域,这里看似结构很简单,没什么内容,但具体的类属性的设置则是由javascript动态生成的 -->
      <img class="displayed-img" src="images/pic1.jpg">
      <div class="overlay"></div>
      <button class="dark">变暗</button>
    </div>

    <div class="thumb-bar">  <!-- 这是第2块的显示区域 -->
    </div>
    <script src="main.js"></script>
  </body>
</html>

2.2 、css

 h1 {
  font-family: sans-serif;
  text-align: center;
}

body {
  width: 640px;
  margin: 0 auto;
}

.full-img {
  position: relative;
  display: block;
  width: 640px;
  height: 480px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 480px;
  background-color: rgba(0,0,0,0);
}

button {
  border: 0;
  background: rgba(150,150,150,0.6);
  text-shadow: 1px 1px 1px white;
  border: 1px solid #999;
  position: absolute;
  cursor: pointer;
  top: 2px;
  left: 2px;
}

.thumb-bar img {
  display: block;
  width: 20%;
  float: left;
  cursor: pointer;
}

2.3 、javascript

 /*document.querySelector选择器里面的带“.”的内容都是html中的类属性内容,不带点的则为自带的鼠标点击外部触发属性*/

/*只要是document的选择器声明的变量,可以有很多方法:setAttribute,appendChild,onclick......*/
const displayedImage = document.querySelector('.displayed-img');/*displayed-img是对应html文件中的类属性*/
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* 添加图片循环 */

for (var i = 1; i <= 5; i++) {
    const newImage = document.createElement('img'); /*对应上面部分大图的图片*/
    newImage.setAttribute('src', 'images/pic' + i + '.jpg');
    thumbBar.appendChild(newImage);/*对应下面部分的5张图片区域的效果,Node链表的效果——太精妙了,我刚开始还以为要很死板用画格子的方式实现*/
    newImage.onclick = function(e) {   /*先初始化,没有鼠标点击的时候,displayedImage不会改变;一旦有鼠标点击,则会由*/
        displayedImage.src = e.target.src;
      }

}


/* 编写 变暗/变量 按钮功能 */
btn.onclick = function() {
    const btnClass = btn.getAttribute('class');  /*const btn = document.querySelector('button'),选择器对应设置的属性*/
    if(btnClass === 'dark') {
        btn.setAttribute('class','light');
        btn.textContent = '变亮';
        overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
      } else {
        btn.setAttribute('class','dark');
        btn.textContent = '变暗';
        overlay.style.backgroundColor = 'rgba(0,0,0,0)';
      }
  }

  /*
  ps:疑问?感觉根据visual编辑器点击跳转得到的方法注释跟实际不太一样;

    appendChild<T extends Node>(newChild: T): T;
   
     * Returns a copy of node. If deep is true, the copy also includes the node's descendants.
    


     readonly target: EventTarget | null;
    
     * Returns the event's timestamp as the number of milliseconds measured relative to the time origin.
     
  

      e.target.src的含义:
      target定义:
        target 属性规定哪个 DOM 元素触发了该事件。
        target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
      e.target.src表示获取事件触发的src图片;参考:https://blog.csdn.net/qq_36412715/article/details/84345237
  
  */

3、javascript知识点涉及

3.1 e.target

target定义:
target 属性规定哪个 DOM 元素触发了该事件。
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

语法:

event.target

event.target.nodeName   //获取事件触发元素标签名(li,p,div,img,button…)

event.target.id      //获取事件触发元素id

event.target.className  //获取事件触发元素classname

event.target.innerHTML  //获取事件触发元素的内容(li)

4、参考

MDN官方文档javascript练习之图片库:MDN官方文档javascript练习之图片库
e.target的用法:e.target的用法

本文地址:https://blog.csdn.net/sinat_26566137/article/details/107526205

相关标签: 前后端