SailorM - 博客园

2020年6月26日

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

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

2020年6月11日

动画函数的使用

摘要：原理图：效果图： 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 阅读(716) 评论(0) 推荐(0) 编辑

缓动动画添加回调函数

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

posted @ 2020-06-11 10:44 SailorM 阅读(320) 评论(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) 编辑

2020年6月10日

缓动动画

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

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

2020年6月5日

动画函数封装

摘要：核心原理：通过定时器 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) 编辑

2020年6月4日

仿淘宝固定侧边栏

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

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

2020年5月28日

仿京东放大镜效果

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

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

2020年5月27日

拖动模态框

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

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