2020年6月26日
摘要: 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: 1.鼠标经过轮播图模块,左右按钮显示;鼠标离开时隐藏; 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理; 3.图片播放的同时,下面小圆圈模块跟随一起变化; 4.点击小圆圈,可以播放相应图片; 5.鼠标不经过轮播图,轮播图也 阅读全文
posted @ 2020-06-26 11:34 SailorM 阅读(1187) 评论(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 阅读(708) 评论(0) 推荐(0) 编辑
摘要: 回调函数原理: 函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。 回调函数写的位置: 定时器结束的位置。 效果: 代码: 1 <script> 2 function animate(obj, target, callbac 阅读全文
posted @ 2020-06-11 10:44 SailorM 阅读(314) 评论(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 阅读(253) 评论(0) 推荐(0) 编辑
  2020年6月10日
摘要: 缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来。 思路: 1.让盒子每次移动的距离慢慢变小,速度就会慢慢落下来; 2.核心算法:(目标值-现在的位置)/10 , 作为每次移动的距离步长; 3.停止的条件是: 让当前盒子位置等于目标位置时就停止定时器。 效果: 代码: 1 <!DOCT 阅读全文
posted @ 2020-06-10 22:05 SailorM 阅读(388) 评论(1) 推荐(0) 编辑
  2020年6月5日
摘要: 核心原理: 通过定时器 setInterval() 不断移动盒子。 动画原理: 1.获得盒子当前位置; 2.让盒子在当前位置加上1个移动距离; 3.利用定时器不断重复这个操作; 4.加一个阶数定时器的条件; 5.注意此元素需要添加定位,才能使用element.style.left。 效果: 代码: 阅读全文
posted @ 2020-06-05 21:17 SailorM 阅读(207) 评论(0) 推荐(0) 编辑
摘要: 三大系列对比 图示 他们的主要用法: 1. offset系列经常用于获得元素位置 offsetLeft offsetTop; 2. client经常用于获取元素大小 clientWidth clientHeight; 3. scroll经常用于获取滚动距离 scrollTop scrollLeft; 阅读全文
posted @ 2020-06-05 16:47 SailorM 阅读(205) 评论(0) 推荐(0) 编辑
  2020年6月4日
摘要: 关于scroll 使用scroll可以动态得到元素的大小、滚动距离等。 element.scrollTop——返回被卷去的上侧距离,返回数值不带单位; element.scrollLeft——返回卷去的左侧距离,返回数值不带单位; element.scrollWidth——返回自身实际宽度,不含边框 阅读全文
posted @ 2020-06-04 21:55 SailorM 阅读(317) 评论(1) 推荐(0) 编辑
  2020年5月28日
摘要: 案例分析: 1.整个案例可以分为三个功能模块; 2.鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开时2个盒子隐藏功能; 3.黄色的遮挡层跟随鼠标移动功能; 4.移动黄色遮挡层,大图片跟随移动功能。 效果: 代码: html部分 1 <!DOCTYPE html> 2 <html lang=" 阅读全文
posted @ 2020-05-28 14:59 SailorM 阅读(457) 评论(0) 推荐(0) 编辑
  2020年5月27日
摘要: 案例分析: 1.点击弹出层,模态框和遮挡层就会显示出来 display:block; 2.点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 3.在页面中拖拽的原理: 鼠标按下并且移动,之后松开鼠标; 4.触发事件是鼠标按下 mousedown,鼠标移动mouseove ,鼠标松开 阅读全文
posted @ 2020-05-27 20:59 SailorM 阅读(284) 评论(0) 推荐(0) 编辑