JS - 随笔分类 - SailorM

网页轮播图

摘要：轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求： 1.鼠标经过轮播图模块，左右按钮显示；鼠标离开时隐藏； 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理； 3.图片播放的同时，下面小圆圈模块跟随一起变化； 4.点击小圆圈，可以播放相应图片； 5.鼠标不经过轮播图，轮播图也阅读全文

posted @ 2020-06-26 11:34 SailorM 阅读(1223) 评论(0) 推荐(0) 编辑

动画函数的使用

摘要：原理图：效果图： JS代码： 1 function animate(obj, target, callback){ 2 clearInterval(obj.timer); 3 obj.timer = setInterval(function(){ 4 //计算步长值 5 //把步长值改成整数,不要阅读全文

posted @ 2020-06-11 11:50 SailorM 阅读(719) 评论(0) 推荐(0) 编辑

缓动动画添加回调函数

摘要：回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。回调函数写的位置：定时器结束的位置。效果：代码： 1 <script> 2 function animate(obj, target, callbac 阅读全文

posted @ 2020-06-11 10:44 SailorM 阅读(321) 评论(0) 推荐(0) 编辑

缓动动画多个目标值之间移动

摘要：效果：代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>缓动动画</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 阅读全文

posted @ 2020-06-11 10:16 SailorM 阅读(256) 评论(0) 推荐(0) 编辑

缓动动画

摘要：缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。思路： 1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来； 2.核心算法：（目标值-现在的位置）/10 ，作为每次移动的距离步长； 3.停止的条件是: 让当前盒子位置等于目标位置时就停止定时器。效果：代码： 1 <!DOCT 阅读全文

posted @ 2020-06-10 22:05 SailorM 阅读(400) 评论(1) 推荐(0) 编辑

动画函数封装

摘要：核心原理：通过定时器 setInterval() 不断移动盒子。动画原理： 1.获得盒子当前位置； 2.让盒子在当前位置加上1个移动距离； 3.利用定时器不断重复这个操作； 4.加一个阶数定时器的条件； 5.注意此元素需要添加定位，才能使用element.style.left。效果：代码：阅读全文

posted @ 2020-06-05 21:17 SailorM 阅读(209) 评论(0) 推荐(0) 编辑

关于offsetWidth、clientWidth与scrollWidth

摘要：三大系列对比图示他们的主要用法： 1. offset系列经常用于获得元素位置 offsetLeft offsetTop； 2. client经常用于获取元素大小 clientWidth clientHeight； 3. scroll经常用于获取滚动距离 scrollTop scrollLeft；阅读全文

posted @ 2020-06-05 16:47 SailorM 阅读(206) 评论(0) 推荐(0) 编辑

仿淘宝固定侧边栏

摘要：关于scroll 使用scroll可以动态得到元素的大小、滚动距离等。 element.scrollTop——返回被卷去的上侧距离，返回数值不带单位； element.scrollLeft——返回卷去的左侧距离，返回数值不带单位； element.scrollWidth——返回自身实际宽度，不含边框阅读全文

posted @ 2020-06-04 21:55 SailorM 阅读(339) 评论(1) 推荐(0) 编辑

仿京东放大镜效果

摘要：案例分析： 1.整个案例可以分为三个功能模块； 2.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开时2个盒子隐藏功能； 3.黄色的遮挡层跟随鼠标移动功能； 4.移动黄色遮挡层，大图片跟随移动功能。效果：代码： html部分 1 <!DOCTYPE html> 2 <html lang=" 阅读全文

posted @ 2020-05-28 14:59 SailorM 阅读(477) 评论(0) 推荐(0) 编辑

拖动模态框

摘要：案例分析： 1.点击弹出层，模态框和遮挡层就会显示出来 display:block； 2.点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none； 3.在页面中拖拽的原理: 鼠标按下并且移动，之后松开鼠标； 4.触发事件是鼠标按下 mousedown，鼠标移动mouseove ，鼠标松开阅读全文

posted @ 2020-05-27 20:59 SailorM 阅读(309) 评论(0) 推荐(0) 编辑

获取鼠标在盒子内的坐标

摘要：案例分析： 1.我们在盒子内点击，想要获得鼠标距离盒子左右的距离； 2.首先得到鼠标在页面中的坐标（e.pageX,e.pageY)； 3.其次得到盒子在页面中的距离（box.offsetLeft，box.offsetTop)； 4.用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标阅读全文

posted @ 2020-05-27 15:47 SailorM 阅读(744) 评论(0) 推荐(0) 编辑

案例-获取URL参数

摘要：案例分析： 1.第一个登录页面，里面有提交表单，action提交到index.html页面； 2.第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果； 3.第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的locaition.search参数； index.h 阅读全文

posted @ 2020-05-27 09:29 SailorM 阅读(284) 评论(0) 推荐(0) 编辑

案例-5s之后跳转页面

摘要：案例分析： 1.利用定时器做倒计时效果； 2.利用 location.href 跳转页面。效果：代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>5s之后自动跳转页面</tit 阅读全文

posted @ 2020-05-25 20:11 SailorM 阅读(548) 评论(0) 推荐(0) 编辑

发送短信案例

摘要：案例分析： 1.按钮点击之后，会禁用按钮，disabled为true； 2.同时按钮里面的内容会变化，注意button按钮里面的内容通过innerHTML修改； 3.里面的秒数是有变化的，因此需要用到定时器； 4.定义一个变量，在定时器里面，不断递减； 5.如果变量为0，说明时间到了，我们需要停止定阅读全文

posted @ 2020-05-21 10:17 SailorM 阅读(174) 评论(0) 推荐(0) 编辑

倒计时效果

摘要：案例分析： 1.这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）； 2.三个黑色盒子分别存放时分秒； 3.三个黑色盒子利用innerHTML放入计算的小时分钟秒数； 4.第一次执行也是间隔毫秒数，因此刚刷新页面会有空白； 5.最好采取封装函数的方式，这样可以先调用一次这个函阅读全文

posted @ 2020-05-20 16:35 SailorM 阅读(229) 评论(0) 推荐(0) 编辑

回调函数之5s自动关闭广告

摘要：案例分析： 1. 5s之后就把广告因擦擦那个起来； 2. 用定时器setTimeout; 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 阅读全文

posted @ 2020-05-20 10:27 SailorM 阅读(193) 评论(0) 推荐(0) 编辑

模拟京东快递单号查询

摘要：案例分析： 1.快递单号输入时，上面的大号字体盒子（con）显示（这里面的字体更大）； 2.表单检测用户输入：给表单添加键盘事件； 3.同时把快递单号里面的值（value）获取过来赋值给con盒子（innerText）做为内容； 4.如果快递单号里面内容为空，则隐藏大号字体盒子（con）盒子。 5. 阅读全文

posted @ 2020-05-19 19:47 SailorM 阅读(1890) 评论(0) 推荐(0) 编辑

模拟京东按键输入内容

摘要：案例分析： 1.检测用户是否按下s键，如果按下s键，就把光标定位到搜索框里面； 2.使用键盘事件对象里面的keyCode判断用户按下的是否是s键； 3.搜索框获得焦点：使用js里面的focus()方法。效果（按下键盘上s键，搜索框会获得焦点）：代码： 1 <!DOCTYPE html> 2 <h 阅读全文

posted @ 2020-05-18 14:44 SailorM 阅读(215) 评论(0) 推荐(0) 编辑

鼠标事件-跟随鼠标移动

摘要：案例分析： 1.鼠标不断移动，使用鼠标移动事件 mousemove； 2.在页面中不断移动，给document注册事件； 3.图片要移动距离，而且不占位置，我们使用绝对定位； 4.核心原理：每次鼠标移动，都会获得最新的鼠标坐标，把这个xy坐标作为图片的left和top值就可以移动图片。效果： 1 阅读全文

posted @ 2020-05-15 17:27 SailorM 阅读(661) 评论(0) 推荐(0) 编辑

DOM的重点核心

摘要：一、DOM（文档对象模型），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 1.对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的阅读全文

posted @ 2020-05-13 11:01 SailorM 阅读(269) 评论(0) 推荐(0) 编辑

随笔分类 - JS

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论