donggua123011的博客

原创 动画原理。

原创 缓动动画基本代码实现

原创 简单动画函数封装

原创 仿淘宝固定侧边栏

原创 京东效果图放大

①布局：布局采用一个大盒子里面首先分为上下两个部分，然后下部分又分为左右两个部分。左边的盒子里面放了一个img和一个遮罩层cover，右边盒子里面放的是800*800的大图片

原创 模态框拖拽

案例分析:1.点击弹出层，模态框和遮挡层就会显示出来（display:block）2.点击关闭按钮，模态框和遮挡层就会隐藏起来（display:none）3.在页面中拖拽原理:鼠标按下并且移动然后松开鼠标4.触发事件是鼠标按下mousedown,鼠标移动mousemove,鼠标松开mouseup5.拖拽过程，鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了6.鼠标按下触发的事件源是最上面一行的就是登录会员class:zhong1那一行7.

原创 获取鼠标在盒子内移动的坐标

鼠标事件用鼠标移动触发mousemove首先得到盒子内鼠标到页面的距离用（e.pagex,e.pagey）其次得到盒子在页面中的距离用（this.offsetLeft,this.offsetTop）然后在用盒子内鼠标到页面的距离减去盒子到页面中的距离然后在用innerHTML获取数据到页面中...

原创 截取url参数

案例分析1.第一个登录页面，里面有提交表单，action提交到index.html页面2.第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果3.第二个页面之所以可以使用第一个页面的数据，是利用了url里面的location.search参数4.在第二个页面中，需要把这个参数提取5.第一步去掉问号，利用substr6.第二步利用split（“"）去掉等号7.利用innerHTML把数据写入div中...

原创 五秒钟之后跳转页面

案例分析:设置一个倒计时如果倒计时为0就跳转页面，如果不为0就继续执行倒计时，没执行一次就减1直到0就跳转页面

原创 倒计时效果案例

案例分析:倒计时是不断变化的，因此需要用到定时器来自动变化setInteval然后是有一个div里面有三个黑色盒子分别放入时分秒三个黑色盒子利用innerHTML放入计算的小时分钟秒数效果图...

原创 模拟京东快递单号查询

效果:当我们在文本框中输入内容时，文本框上面自动显示大字号的内容html:先设置一个大的div然后在里面放一个div盒子和一个文本框设置css样式js样式分析:（1）快递单号输入内容时，上面的大号字体盒子con显示(2)表单检测用户输入:给表单添加键盘事件(3)同时把快递单号里面的值(value)获取过来赋值给con盒子(innerText)作为内容(4)如果快递单号里面内容为空，则隐藏大号字体盒子(con)注意:keydown和keypress在文本框里...

原创 模拟京东按键输入内容案例

案例分析:1:检测用户是否按下了s键，如果按下了s键就把光标定位到搜索框里面2:使用键盘事件对象里面的keyCode判断用户按下的是否是s键3:搜索框获得焦点:使用js里面的focus()方法

原创 跟随鼠标移动的图片案例

鼠标不断的移动，使用鼠标移动事件:mousemove在页面中移动给document注册事件图片要移动距离且不占位置，我们使用绝对定位核心原理:每次鼠标移动，我们都会获得新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片千万不要忘记给left和top加单位想要实现鼠标在图片居中对齐，分别用x和y减去宽高的一半...

原创 动态生成表格和添加删除单元格

html样式

原创 复制节点(克隆节点)

原创 发布留言和删除留言案例

添加一个文本框按钮和ul设置样式点击按钮之后就动态创建一个li添加到ul里面，创建li的同时，把文本域里面的值通过li.innerHTML赋值给li如果想要新的留言后面显示就用appendChild如果想要前面显示就用insertBefore删除留言:当我们把文本域里面的值赋值给li时，多添加一个删除链接需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接里面所在的liJavaScript:;和JavaScript:void(0);阻止跳转链接的意思...

原创 新浪下拉菜单

先写好html先有一个ul里面放三个小li，小li放一个a和一个ul，ul里面在放三个小li然后在一步一步写css样式，css中采用定位的方法将每个小li里面的ul定位到该小li下面在添加js效果首先获取元素，用父子节点过去更简单导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件当鼠标经过li里面的第二个孩子ul显示，当鼠标离开则ul隐藏...

原创 表单全选和取消全选案例

先创建表单html设置表单样式设置js取消全选和全选应该让下面所有复选框的checked（选中状态）属性跟随全选按钮即可复选框需要全部选中，上面全选才能选中做法:给下面所有复选框绑定点击事件，每次点击都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中可以设置一个变量控制全选是否选中...

原创 表格隔行变色效果

因为表格第一行不改变鼠标经过样式，所以整体表格分为thead和tbody两部分thead头部部分tbody部分设置css样式设置js部分鼠标经过tr行，当前的背景颜色就要改变，鼠标离开又要去掉背景颜色，所以会用到鼠标经过:onmouseover和鼠标离开:onmouseout事件因为第一行不改变，所以我们只获取tobdy里面的行，然后利用循环事件绑定鼠标经过和鼠标离开效果在js里面添加一个类用于js更改后的背景颜色...

原创 密码框验证信息提示

先把html写出来一个div包裹input表单和p标签设置样式js首先判断的事件是表单失去焦点onblur如果输入正确则提示正确的信息为绿色小图标如果输入不是6～16位，则提示错误信息颜色为红色小图标变化因为里面样式变化较多，所以采用className属性在添加一个wrong和right类用于正确和错误提示的更换添加在css里面...

原创 排他思想。

如果有同一组元素，我们想要某一个元素实现某种样式需要用到循环的排他思想首先先排除其他人（所有元素全部清除样式）然后才设置自己的样式（给当前元素设置样式），先排除其他人才设置自己称为排他思想先设置html在设置js...

原创 百度换肤。

先设置html有一个ul(class="baidu"里面有四个小li，li里面放一张图片然后设置css样式1.清除内外边距2.给body设置背景图片3.去掉li里面小点4.设置ul5.设置li6.设置图片img设置js先给一组元素注册事件，然后在给四个图片循环注册事件添加for循环再把当前图片页面背景取过来给body...

原创 操作元素1.0

小菜鸡要习惯记录和备注🤗🤗🤗