随笔分类 -  HTML

自动轮播加手势滑动偏移
摘要：自动轮播，并添加手势滑动偏移 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo 阅读全文
posted @ 2022-06-29 15:22 豆浆不要油条 阅读(18) 评论(0) 推荐(0)
不依赖任何库：实现推广转盘三连中
摘要：一个乱写的推广转盘，很乱但是效果还行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi 阅读全文
posted @ 2022-06-23 09:44 豆浆不要油条 阅读(30) 评论(0) 推荐(0)
竖向滚屏和横向飘屏
摘要：竖向滚屏，这边是需要提前写css样式，如果不想这么麻烦就是下面的横向写法自动写styledom再append function Walk({ selector, speed = 1, data = [], danweiLucheng, }) { this.dom = document.querySe 阅读全文
posted @ 2022-06-13 09:03 豆浆不要油条 阅读(78) 评论(0) 推荐(0)
试探拖拽事件
摘要：TRY... <template> <div class="app-container"> <div class="table-container"> <el-row :gutter="20"> <el-col :span="4"> <div class="drag-from-zone"> <div 阅读全文
posted @ 2022-05-13 17:47 豆浆不要油条 阅读(18) 评论(0) 推荐(0)
IntersectionObserver实现图片懒加载
摘要：IntersectionObserver可以监测元素在当前可视窗口的比例，完成实现图片懒加载getBoundingClientRect也是一个很好用查看元素偏移等的API 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title></title> 阅读全文
posted @ 2022-05-13 15:10 豆浆不要油条 阅读(41) 评论(0) 推荐(0)
H5幸运大转盘
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>幸运大转盘</title> <style> * { margin: 0; padding: 0; } .container { background-image 阅读全文
posted @ 2022-05-12 16:40 豆浆不要油条 阅读(210) 评论(0) 推荐(0)
css3实现3D多面体
摘要：1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 /*n边形的外角和为360 360/n 9 n变形的内角 180 - 360/n* 阅读全文
posted @ 2022-05-12 16:34 豆浆不要油条 阅读(77) 评论(0) 推荐(0)