前端练习 - 随笔分类 - charonmomo

ajax - 模板引擎模仿百度搜索

摘要：<!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-26 19:46 charonmomo 阅读(46) 评论(0) 推荐(0)

ajax - 模拟百度搜索

摘要：<!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-26 17:46 charonmomo 阅读(53) 评论(0) 推荐(0)

jQuery - 页面楼梯导航实例

摘要：var $jds = $(".louceng .jd"); var $lis = $(".subnav ul li"); var arr = []; $jds.each(function(i){ arr[i] = $(this).offset().top; }) $(document).scroll 阅读全文

posted @ 2021-08-25 18:13 charonmomo 阅读(165) 评论(0) 推荐(0)

jQuery - 返回顶部的两种方式 (直接跳转, 运动方式)

摘要：$backTop.click(function () { // 让页面滚动到顶部 // 直接跳转到顶部 $(document).scrollTop(0); }) // 以运动方式返回顶部 $backTop.click(function () { // 让页面滚动到顶部 // 滚动的元素要选择 htm 阅读全文

posted @ 2021-08-25 16:34 charonmomo 阅读(220) 评论(0) 推荐(0)

js - 动态轮播图

摘要：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>京东商城</title> <style> * { margin: 0; padding: 0; list-style: none; } .slider { 阅读全文

posted @ 2021-08-25 15:00 charonmomo 阅读(68) 评论(0) 推荐(0)

js案例 - 手风琴轮播图

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; width: 阅读全文

posted @ 2021-08-25 11:29 charonmomo 阅读(177) 评论(0) 推荐(0)

js 多个动态下拉菜单

摘要：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: n 阅读全文

posted @ 2021-08-25 11:18 charonmomo 阅读(291) 评论(0) 推荐(0)

jQuery 列表表格分奇偶列变色

摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o 阅读全文

posted @ 2021-08-24 18:43 charonmomo 阅读(57) 评论(0) 推荐(0)

网页tab栏

摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o 阅读全文

posted @ 2021-08-24 18:06 charonmomo 阅读(110) 评论(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-23 21:15 charonmomo 阅读(314) 评论(0) 推荐(0)

JavaScript - 编写一个函数返回字符串中最长的连续重复字母

摘要：theme: channing-cyan 思路可以将每个重复字母开头的字符串中的第一个保存到一个变量中 (代码中的a), 然后将后面的数组元素与它对比: 如果相同, 则计数器累加. 计数器代表的是这串重复字符串的长度如果不同, 说明后面是一个新的字母了, 这时需要更新变量 a的值, 并且记录下此阅读全文

posted @ 2021-08-18 10:42 charonmomo 阅读(294) 评论(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-17 16:34 charonmomo 阅读(112) 评论(0) 推荐(0)

高级无缝滚动轮播图

摘要：改进: 折返点计算需要通过 js 自动计算. 取消 <ul>的width属性, 通过offsetWidth返回宽度(包括边框). var back = -munit.offsetWidth; 自动生成另一组对应的图片结构 <li>. munit.innerHTML = munit.innerHTML 阅读全文

posted @ 2021-08-16 18:13 charonmomo 阅读(74) 评论(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 阅读(107) 评论(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 阅读(46) 评论(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 阅读(43) 评论(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 阅读(34) 评论(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 阅读(73) 评论(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 阅读(46) 评论(0) 推荐(0)

事件委托 - (冒泡) 点击列表元素

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文

posted @ 2021-08-14 21:15 charonmomo 阅读(117) 评论(0) 推荐(0)

charonmomo

随笔分类 - 前端练习

公告