javascript BOM DOM 练习题案例 -本地文件读取-图片加载-页面移动-手风琴

本文链接：https://blog.csdn.net/weixin_52088589/article/details/112250975

文章目录

1 , 元素到可视窗口加载,不能一打开页面全部加载

在这里插入图片描述

<script>
        // 1,监听事件: scroll事件
        // 2, 动态的知道盒子的位置
        //  获取视口的高度
        let docHeight = document.documentElement.clientHeight

        // 3, 控制 img 的 src  (把自定义属性的真实的 URL 赋值给 src)
        window.onscroll = loadImg

        /* 为了能够一上来让那些在显示区域的图片显示,让代码一上来就执行一遍,
            为了简化代码,封装个函数,滚动事件调用,一上来也调用一次 */
        loadImg()
        
        function loadImg() {
            //获取img   不是获取所有的 img 而是获取带有 data 的图片
            let lazyImgs = document.querySelector('img[data-src]')

            //要获取没有元素的位置
            //遍历
            for (let i = 0; i < lazyImgs.length; i++) {
                //查看每个元素的位置是否在可视区域中
                let rect = lazyImgs[i].getBoundingClientRect();

                //获取元素的标记
                let loaded = lazyImgs[i].dataset.loaded
                //判断已经加载过的就没必要加载了,避免图片地址从新替换
                if (loaded) continue

                if (rect.top > 0 && rect.top < docHeight) {
                    //获取自定义属性
                    let truePath = lazyImgs[i].getAttribute('data-src')
                    //设置给 src
                    lazyImgs[i].src = truePath

                    //图片已经被正常加载,下次不用再加载一次, 可以给这种加载过的元素添加个标记,
                    //自定义属性做标记
                    lazyImgs[i].setAttribute('data-loaded', 'true')

                } 
            }
        }
    </script>

2 , 键盘控制移动

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background: skyblue;
    }
    img {
      width: 100px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .toLeft {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <img src="xn.png" alt="">

  <script>
    // 1 , 获取图片元素
    let img = document.querySelector('img')

    //2 , 定义两个变量,分别表示小鸟的 left 和 top
    let x = 0
    let y = 0
    //给document 添加keydown事件
    window.addEventListener('keydown', function (e) {

        // 3,1 通过事件对象中的keyCode属性侦测键盘
        // e.keycode 返回一个键码值, 数字
        if (e.keyCode == 37) {
            console.log('←')
            //调头
            img.className = 'toLeft'
            x -= 10

        } else if (e.keyCode == 38) {
            console.log('↑')
            y -= 10

        } else if (e.keyCode == 39) {
            console.log('→')
            img.className = ''
            x += 10

        } else if (e.keyCode == 40) {
            console.log('↓')
            y += 10
        }
        //把最新的值赋给left和top样式
        img.style.left = x = 'px'
        img.style.top = y + 'px'
     })
  </script>
  </script>
</body>

</html>

3 , 手风琴效果

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴</title>
  <style>
    ul {
      list-style: none;
    }
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 1200px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }
    div li {
      width: 240px;
      height: 400px;
      float: left;
      transition: width 500ms;
    }
    div ul {
      width: 1200px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/5.jpg" alt="">
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
  //获取元素
  let lis = document.querySelectorAll('li')

  /* 分析 : 
    1, 鼠标进入图片显示图片
    鼠标进入 li ,让当前 li 变成800, 其他的 li 变成 100
  */
    for (let i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseover', function () {
            //先把所有元素的样式设置清楚,再设置当前的
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.width = '100px'
            }
            this.style.width = '800px';
        })
    }

    // 2, 鼠标离开恢复到初始样式
    //鼠标离开li ,让所有的li变成240
    for (let j = 0; j < lis.length; j++) {  //立刻执行的,为了给Li 添加事件
        lis[j].addEventListener('mouseleave', function () {
            
            //让所有的li变成240
            for (let j = 0; J < lis.length; j++) {   //事件触发执行,为了让所有li宽变成240的
                lis[j].style.width = '240px'
            }
        })
    }
</script>

</html>

4 , 本地文件读取

注: 为了安全考虑不准 javascript 读取本地文件
1, 选取文件
2,拖拽文件

4 . ( 1 ) 选取文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<input type="file" multiple>
	<div id="box"></div>
	
	<!-- <img src="images/card_1.gif"> -->
	<!-- <img src=""> -->

	<script type="text/javascript">
			
		// 当input改变的时候显示上传的图片
		let file = document.querySelector('input');		

		// 添加事件
		file.onchange = function () {
			// 创建文件读取器
			let reader = new FileReader();
			// console.log( this.files[0] )
			reader.readAsDataURL( this.files[0] );// base64
			// 当读取完毕之后显示出这张图
			reader.onload = function () {
				// console.log( this.result );
				// 获取div
				let box = document.getElementById('box');
				// 创建img
				let img = document.createElement('img');
				box.appendChild(img);
				img.src = this.result;  //result 获取编码的的结果就是 result 的属性值
			}
			// 网页：src、base64
			// base64：小图(10k)片转成base64
		}

	</script>

</body>
</html>

4 . ( 2 ) 拖拽文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>


    <script>
        //如果元素被拖拽通过相关的事件可以监听

        //dragover : 监听元素被拖拽到当前盒子
        //获取元素
        let div = document.querySelector('div')

        // dragover 事件 : 监听元素是否被拖拽进来  监听某个元素是否被拖拽到当前盒子
        div.addEventListener('dragover', function (event) {
            // console.log(123);
            //每次添加之前把盒子里的内容清空
            div.innerHTML = ''

            //阻止默认行为发生
            event.preventDefault()
        })

        //drop 事件, 监听某个元素被拖拽到这个盒子上时 , 鼠标松开
        div.addEventListener('drop', function (event) {
            console.log('元素被放开了');
            //找到这个元素的 base64编码
            // 重点 : event.dataTransfer 包含了被拖拽的文件信心
            // console.log(event.dataTransfer.files[0])
            //实例化
            let reader = new FileReader()
            //把图片 ( 文件 ) 读取成 base64 编码格式
            reader.readAsDataURL(event.dataTransfer.files[0])
            //读取完毕之后显示图片
            reader.addEventListener('load', function() {
                // console.log(this.result);
                //创建元素
                let img = document.createElement('img')
                //添加src
                img.src = this.result   //result 获取编码的的结果就是 result 的属性值
                //放到盒子里
                div.appendChild(img)
            })

            event.preventDefault()
        })
    </script>
</body>
</html>