随笔分类 - JS 基本效果
摘要：返回顶部： ①滚动窗口至文档中的特定位置 ②window.scroll(x,y) ③注意，里面的x 和 y 不跟单位，直接写数字 案例分析： 带有动画的返回顶部 ①此时可以继续使用我们封装的动画函数 ②只需要把所有的 left 相关的值改为 跟页面垂直滚动距离相关就可以了 ③页面滚动了多少，可以通过
阅读全文
摘要：布局： slider > ul > li slider > arrow > a> img arrow : z-index:2 ; 注意，ul 里面放着所有轮播图的图片，所以 ul 的宽度必须足够大能够容纳所有图片，这里有4张图片，ul宽度设置为 600% 功能需求： 1，鼠标经过轮播图模块，左右按钮
阅读全文
摘要：要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容 案例分析：1，快递单号输入内容时，上面的大号字体盒子显示输入框里面的文字 2，同时把快递单号里面的值(value)获取过来赋值给con盒子(innerHTML)作为内容 3，如果快递单号里面内容为空，则隐藏大号字体盒子 4，注意：ke
阅读全文
摘要：效果：当用户键盘上按下"s"键时，搜索框会自动获得焦点 核心思路：检测用户是否按下了"s"键，如果按下了，就把光标定位到搜索框里 使用键盘事件对象里面的keyCode 判断用户按下的是否是 "s" 键 注意：键盘事件使用"keyup"，如果使用"keydown"，用户一按下s键，不仅获得光标，还会把
阅读全文
摘要：关键代码： 1,mousemove 鼠标移动事件，只要鼠标移动1px , 就会触发这个事件 2,核心原理，鼠标每次移动，就会获得新的鼠标的坐标值，把这个x和y坐标值给图片的 left 和 top值，就能实现图片跟随鼠标移动 3，改进 图片跟随鼠标的移动，鼠标始终在图片的左上角，想要把鼠标放在图片的正
阅读全文
摘要：1,事件委托原理：给父节点添加侦听器，利用事件冒泡影响每一个字节点 点击任意一个li，都能弹出警示框,：给ul 绑定事件，点击任意一个li 时，li不注册事件，而是向上冒泡委托给ul 响应事件，那么ul 下面的每一个li 都会执行事件处理程序 2, 这是事件冒泡的好处
阅读全文
摘要：<1>注册事件（绑定事件） 方法①：传统方式注册事件 方法②：事件侦听注册事件 addEventListener 注意，里面的事件类型是字符串，必定加引号，而且不带 on 同一个元素，同一个事件，可以添加多个侦听器（事件处理程序，事件函数） 方法③： attachEvent 注册事件 （ie9以下才
阅读全文
摘要：<1>布局：一个table表格，表格分为两个部分，上面是thead表头，表头里面仅一行，有4列（th), 下面是tbody表格内容，要求tbody中的每一行都是用js动态创建的 <2>样式 <3>js动态创建表格： 第一步：先准备数据，一共有三个人的成绩，作为三个对象放进数组中 第二步：在tbody
阅读全文
摘要：效果： 鼠标经过图片上方，图片变为“张艺兴.jpg" , 鼠标离开图片上方，图片变成 ”吴亦凡. jpg " （通过改变图片的 src 属性)
阅读全文
摘要：每张图片一点击，整个文档的背景图片就会更换为所点击的图片 注意，获取body元素 ： document.body
阅读全文
摘要：点击上方的任意一个按钮，下面的盒子相应的做出动画效果， 关键代码: var json={width:400,height:400,top:400,left:400,opacity:60 ,zIndex:2}; run(demo,json);
阅读全文
摘要：关键代码： 1, demo（最外面整个大盒子）的定位 固定定位，放在页面的右下方 span（关闭按钮）绝对定位在demo的右上方： 2，防止冒泡，因为span（关闭按钮）的父元素是demo, 所以不能直接写 span.onclick , 这样会发生冒泡，相当于点击了父元素demo, 事件会响应在父元
阅读全文
摘要：关键代码： 1, 封装单个属性的运动框架函数，run ( obj , attr , target ) , 三个参数，”谁的“ “哪个属性” “改成多少” 2, run(obj,attr,target) 先获取当前样式（调用getStyle(obj,attr)函数)，然后获取步长（步长公式：（targ
阅读全文
摘要：关键代码： 1,tip的定位 2,, 鼠标移动到文字内容的上方，或获取到鼠标停止处的clientX, clientY 坐标，然后如果有选中的文字，就将该文字显示在隐藏的tip提示框里; 选中文字之后，延迟几秒显示提示框，用setTimeout而不是setInterval , 因为提示框只显示一次。
阅读全文
摘要：动画实现原理： 核心原理：通过定时器 setInterval()不断移动盒子位置 实现步骤： 1，获得盒子当前位置 demo.offsetLeft 2，让盒子在当前位置加上1个移动距离 3，利用定时器不断重复这个操作 4，加一个结束定时器的条件 5，注意此元素需要添加定位，才能使用 element.
阅读全文
摘要：动画函数给不同元素记录不同定时器： obj.timer 如果多个元素都使用这个动画函数，每次都要 var 声明定时器 ，我们可以给不同的元素使用不同的定时器 核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性
阅读全文
浙公网安备 33010602011771号