网页轮播图
摘要：轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： 1.鼠标经过轮播图模块，左右按钮显示；鼠标离开时隐藏； 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理； 3.图片播放的同时，下面小圆圈模块跟随一起变化； 4.点击小圆圈，可以播放相应图片； 5.鼠标不经过轮播图，轮播图也
阅读全文
posted @
2020-06-26 11:34
SailorM
阅读(1223)
推荐(0) 编辑
缓动动画
摘要：缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。 思路： 1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来； 2.核心算法：（目标值-现在的位置）/10 ， 作为每次移动的距离步长； 3.停止的条件是: 让当前盒子位置等于目标位置时就停止定时器。 效果： 代码： 1 <!DOCT
阅读全文
posted @
2020-06-10 22:05
SailorM
阅读(400)
推荐(0) 编辑
仿京东放大镜效果
摘要：案例分析： 1.整个案例可以分为三个功能模块； 2.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开时2个盒子隐藏功能； 3.黄色的遮挡层跟随鼠标移动功能； 4.移动黄色遮挡层，大图片跟随移动功能。 效果： 代码： html部分 1 <!DOCTYPE html> 2 <html lang="
阅读全文
posted @
2020-05-28 14:59
SailorM
阅读(477)
推荐(0) 编辑
拖动模态框
摘要：案例分析： 1.点击弹出层，模态框和遮挡层就会显示出来 display:block； 2.点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none； 3.在页面中拖拽的原理: 鼠标按下并且移动，之后松开鼠标； 4.触发事件是鼠标按下 mousedown，鼠标移动mouseove ，鼠标松开
阅读全文
posted @
2020-05-27 20:59
SailorM
阅读(309)
推荐(0) 编辑
模拟京东快递单号查询
摘要：案例分析： 1.快递单号输入时，上面的大号字体盒子（con）显示（这里面的字体更大）； 2.表单检测用户输入：给表单添加键盘事件； 3.同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）做为内容； 4.如果快递单号里面内容为空，则隐藏大号字体盒子（con）盒子。 5.
阅读全文
posted @
2020-05-19 19:47
SailorM
阅读(1890)
推荐(0) 编辑
动态生成表格
摘要：代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="UTF-8"> 4 <title>动态生成表格</title> 5 6 <head> 7 <style> 8 /* 9 案例分析：1.里面的学生数据是动态的，需要js动态生成，数据采取
阅读全文
posted @
2020-05-10 11:11
SailorM
阅读(355)
推荐(0) 编辑
删除留言案例
摘要：案例分析： 1.当我们把文本域里面的值赋值给 li 时，多添加一个删除的链接； 2.需要把所有的链接获取过来，当我们点击当前链接的时候，删除当前链接所在的 li ； 3.阻止链接跳转需要添加 javascript:void(0); 或者 javascript:; 。 效果： 代码： 1 <scrip
阅读全文
posted @
2020-05-09 20:39
SailorM
阅读(239)
推荐(0) 编辑
简单版发布留言案例
摘要：案例分析： 1.点击按钮之后就动态创建一个 li； 2.创建 li 的同时，把文本域里面的值通过 innerHTML 赋值给 li； 3.如果想要新的留言后面显示就用 appendChild ，如果想要在前面显示就用 insertBefore 。 效果： 代码： 1 <!DOCTYPE html>
阅读全文
posted @
2020-03-15 21:09
SailorM
阅读(362)
推荐(0) 编辑
下拉菜单
摘要：案例分析： 1.导航栏里面的 li 都要有鼠标经过的效果，所以需要循环注册鼠标事件； 2.核心原理：当鼠标经过 li 里面的第二个孩子 ul 显示，当鼠标离开，则 ul 隐藏； 效果展示： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <me
阅读全文
posted @
2020-03-13 15:52
SailorM
阅读(212)
推荐(0) 编辑
tab栏切换布局
摘要：案例分析 1.Tab栏切换有两个大的模块； 2.上面是模块选项卡，点击某一个，当前的底色为红色，其余不变（排他思想），用修改雷鸣的方式； 3.下面的模块内容，会跟随上面的选项卡变化，所以下面的模块变化需要写到点击事件里面； 4.规律：下面的模块显示内容和上面的选项卡意义对应相匹配； 5.核心思路：给
阅读全文
posted @
2020-03-12 15:27
SailorM
阅读(649)
推荐(0) 编辑
表单全选取消全选
摘要：案例分析： 1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可； 2.下面复选框需要全部选中，上面的全选才可以选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选框就不选中。 效果图： 代码：
阅读全文
posted @
2020-02-12 15:40
SailorM
阅读(903)
推荐(1) 编辑
表格隔行变色效果
摘要：案例分析: 1.用到鼠标经过onmouseover，鼠标离开onmouseout； 2.核心思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色； 3.注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行。 HTML表格： 表格由<table>标签定义。
阅读全文
posted @
2020-02-11 20:08
SailorM
阅读(454)
推荐(1) 编辑
排他思想之百度换肤
摘要：——如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法： 1.所有的元素全部清除样式（干掉其他人）； 2.给当前元素设置样式（留下我自己）。 注意：顺序不能颠倒，首先干掉其他人，再设置自己。 百度换肤案例 分析： 1.这个案例练习的是给一组元素注册事件； 2.给5张图片利用
阅读全文
posted @
2020-02-11 13:07
SailorM
阅读(318)
推荐(0) 编辑
操作元素之开关灯
摘要：分析： 点击按钮，设置浏览器窗口背景的颜色变化。 效果： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>开关灯案例</title> 6 <style> 7 *{ 8 margin
阅读全文
posted @
2020-01-06 22:40
SailorM
阅读(228)
推荐(0) 编辑
操作元素之密码框验证信息+操作元素的总结
摘要：案例分析： ①首先判断的事件是表单失去焦点； ②如果输入正确则提示正确的信息颜色为绿色小图标变化； ③如果输入不是6到16位，则提示错误信息为红色小图标变化； ④因为里面变化样式较多，我们采取className修改样式。 效果： 代码： 1 <!DOCTYPE html> 2 <html lang=
阅读全文
posted @
2020-01-06 16:16
SailorM
阅读(288)
推荐(0) 编辑
操作元素之显示隐藏文本框内容
摘要：案例分析： ①首先表单需要2个新事件，获得焦点onfocus，失去焦点onblur； ②如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容； 效果： 代码： 1 <body> 2 <input type="text" value="我想你了"> 3 </body> 4 <s
阅读全文
posted @
2020-01-04 23:15
SailorM
阅读(375)
推荐(0) 编辑
操作元素之循环精灵图背景
摘要：案例分析： ①首先精灵图图片排列是有规律的； ②核心思路：利用for循环，修改精灵图片的位置background-position； ③分析图片的位置关系。 效果： 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="
阅读全文
posted @
2020-01-04 22:31
SailorM
阅读(454)
推荐(0) 编辑
操作元素之二维码关闭
摘要：可以通过JS修改元素的大小、颜色、位置等样式。 有两种方式：①element.style——行内样式操作 ②element.className——类名样式操作 案例分析： ①核心思路：利用样式的显示和隐藏完成，display:none隐藏元素，display:block显示元素； ②点击按钮，把二维
阅读全文
posted @
2020-01-03 22:30
SailorM
阅读(337)
推荐(0) 编辑
操作元素之显示密码
摘要：要求： 点击按钮将密码框切换为文本框，并可以查看密码明文。 案例分析： ①核心思路：点击眼睛按钮，把密码框的类型改为文本框就可以显示里面的密码； ②一个按钮有两种状态，点击一次切换为文本框，再点击一次切换为密码框； ③算法：利用一个flag变量，flag=1时就切换为文本框，并将flag设置为0；f
阅读全文
posted @
2020-01-03 16:52
SailorM
阅读(453)
推荐(0) 编辑
操作元素之分时问候案例
摘要：案例： 分时显示不同的图片，显示不同问候语。 案例分析： ①根据系统的不同时间来判断，所以需要用到日期内置对象； ②涉及到上午、下午、晚上，采用多分支语句； ③需要一张图片，并且根据时间修改图片，就需要用到操作元素src属性； ④需要一个div元素，显示不同问候语，修改元素内容即可。 效果图： 为了
阅读全文
posted @
2020-01-03 10:08
SailorM
阅读(595)
推荐(0) 编辑
