页面效果实现
文章平均质量分 50
Triumph-light
在校大学生 学习前端
展开
-
【页面效果】视觉滚动差
实现思路html结构 <div class="bg"> <span>hello</span> </div>css样式* { margin: 0; padding: 0;}body{ /* 200%窗口高度*/ height: 200vh;}.bg { height: 200vh; background-image: url('https://cube.elemecdn.com/6/94/4d3原创 2022-04-10 15:18:15 · 301 阅读 · 0 评论 -
js实现懒加载
原理页面显示图片是由于浏览器是否发起请求,请求图片的src属性,因此将一个小的加载图片放到页面当中,当图片进入到可视区域,再给src赋值,未进入前不给src赋值,这样浏览器将不会发起请求思路加载loading图片判断哪些图片需要加载隐形加载图片替换真图片实现window.onload=function(){ //获取图片列表 var imgs=document.querySelectorAll("img") //获取图片距顶部的距离 function getTop(e){ r原创 2021-11-02 23:59:43 · 2124 阅读 · 0 评论 -
大图片加载到模糊
大图片加载从模糊到清晰:原理:先给一个压缩的缩略图,此时显示的照片是模糊的,当清晰的图片加载完成之后,将原来的图片的src路径改成清晰图片的路径。实现:<!DOCTYPE html><html><head> <title>大图片加载从模糊到清晰</title> <style type="text/css"> .content{ position: relative; }原创 2021-10-28 17:00:23 · 756 阅读 · 0 评论