放大镜 发表于 2018-09-05 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点1.鼠标事件2.offset系列,client系列3.数据 效果 素材 案例代码Css12345678910111213141516171819202122232425262728293031323334353637383940414243444546*{ padding: 0; ... 阅读全文 »
拖拽对话框案例 发表于 2018-09-05 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点1.点击事件2.样式的改变3.鼠标事件4.client系列运用5.offset系列 效果图 案例代码Css12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 ... 阅读全文 »
旋转木马案例 发表于 2018-09-04 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点难点1.数组的运用2.事件的添加3.逻辑关系 效果图 代码Css123456789101112131415161718192021222324252627282930313233343536373839404142@charset "UTF-8";/*初始化 reset*/blockquote ... 阅读全文 »
手风琴案例 发表于 2018-09-03 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点1.获取计算后样式函数2.封装的变速移动函数3.获取加载图片4.添加鼠标进入事件5.添加鼠标移出事件 效果图 素材 案例代码Css1234567891011121314151617181920212223242526ul { list-style: none;}* ... 阅读全文 »
获取计算后的样式/封装变速移动函数 发表于 2018-09-01 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点:获取计算后函数1.获取计算后的 css 样式(返回值为 css 的一个对象包含所有的 css 元素)2.封装兼容代码兼容:谷歌,火狐支持console.log(window.getComputedStyle(dv,null).left);IE8 支持console.log(dv.current ... 阅读全文 »
固定导航栏/筋斗云案例 发表于 2018-09-01 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点难点/功能:一、固定导航栏1.获取页面向上向下卷曲的距离值2.兼容性3.window 的滚动事件4.更改样式5.判断向上卷曲出去的距离和最上面的 div 的高度对比6.设置后面的元素值防止有跳的效果7.回值时的元素设置8.固定浏览器在向下滑动时标题栏还在顶部,随着浏览器的上下滑动而改变 二、筋斗 ... 阅读全文 »
自动轮播图 发表于 2018-08-30 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点:1.获取相应的元素2.给元素添加上相应的事件3.给事件添加相应的功能4.封装函数5.定时器的运用 案例效果图 素材 案例代码Css1234567891011121314151617181920212223242526272829303132333435363738394041424344454 ... 阅读全文 »
协议按钮/定时器小案例 发表于 2018-08-29 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点:1.协议按钮2.div 渐变3.div 变宽4.div 移动 //div要移动,要脱离文档流—position:absolute//如果样式的代码是在style的标签中设置,外面是获取不到//如果样式的代码是在style的属性设置,外面是可以获取//获取div的当前位置//console.lo ... 阅读全文 »
BOM 浏览器 发表于 2018-08-28 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点:1.location 主机2.history3.navigator 判断浏览器所在系统4.window.onload 页面加载完成5.定时器 history1234567891011121314151617window.onload = function () { let b ... 阅读全文 »
模拟百度搜索 发表于 2018-08-27 | 更新于: 2018-09-25 | 分类于 JavaScript | 重点:1.创建元素,添加元素,移除元素 document.createElement(“p”) 上级名.removeChild(删除的元素名); 添加到的元素名例(arr数组等).push(追加元素)2.判读获取文本框内容与数组对比 indexOf()3.判断元素是否为空不为空删除4.遍历数 ... 阅读全文 »