2021年8月16日
高级无缝滚动轮播图
摘要： 改进: 折返点计算需要通过 js 自动计算. 取消 <ul>的width属性, 通过offsetWidth返回宽度(包括边框). var back = -munit.offsetWidth; 自动生成另一组对应的图片结构 <li>. munit.innerHTML = munit.innerHTML 阅读全文
posted @ 2021-08-16 18:13 charonmomo 阅读(66) 评论(0) 推荐(0) 编辑
简单无缝滚动轮播图
摘要： 缺点: 耦合性比较强 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http 阅读全文
posted @ 2021-08-16 17:06 charonmomo 阅读(85) 评论(0) 推荐(0) 编辑
封装动画函数
摘要： 知识点: window.getComputedStyle(box)可以获取之前的样式 例如: .box { position: absolute; top: 100px; left: 0; width: 100px; height: 100px; opacity: 0.5; background-c 阅读全文
posted @ 2021-08-16 16:43 charonmomo 阅读(26) 评论(0) 推荐(0) 编辑
定时器 - 简单运动
摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-08-16 13:52 charonmomo 阅读(26) 评论(0) 推荐(0) 编辑
延时器 - 函数节流
摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-08-16 13:27 charonmomo 阅读(23) 评论(0) 推荐(0) 编辑
登陆页面 + 遮盖层
摘要： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; 阅读全文
posted @ 2021-08-16 10:25 charonmomo 阅读(58) 评论(0) 推荐(0) 编辑
拖拽窗口案例
摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-08-16 10:19 charonmomo 阅读(29) 评论(0) 推荐(0) 编辑