罗砂 - 博客园

2022年4月19日

摘要： <style> * { margin: 0; padding: 0; } div { width: 1200px; margin: 10px auto; } .header { margin-top: 10px; height: 100px; background-color: hsl(39, 87 阅读全文

posted @ 2022-04-19 13:42 罗砂阅读(30) 评论(0) 推荐(0)

简单的动画函数封装

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-e 阅读全文

posted @ 2022-04-19 10:09 罗砂阅读(29) 评论(0) 推荐(0)

2022年4月18日

动画原理

摘要：核心原理：通过定时器setlnterval()不断移动盒子位置实现步骤： 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动的距离 3.利用定时器不断重复这个操作 4.加上一个结束定时器的条件 5.注意此元素需要添加定位，才能使用element.style.left <body> <div>< 阅读全文

posted @ 2022-04-18 17:09 罗砂阅读(45) 评论(0) 推荐(0)

鼠标事件mouseover和mouseenter区别

摘要：当鼠标移动到元素上时就会触发mouseenter事件类似mouseover，他们两个之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡阅读全文

posted @ 2022-04-18 16:41 罗砂阅读(71) 评论(0) 推荐(0)

三大系列总结

摘要： 1.offset系列经常用于获得元素位置 offsetTop 2.clicent 经常用于获取元素大小 clicentWidth clientHeight 3.scroll经常用于获取滚动距离 scrollTop scrollLeft 4.注意：页面滚动的距离通过window.pageXOffset 阅读全文

posted @ 2022-04-18 16:22 罗砂阅读(27) 评论(0) 推荐(0)

scroll系列

摘要： scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素大小滚动距离等。 <style> div { width: 100px; height: 70px; background-color: pink; border: 3px solid red; } </styl 阅读全文

posted @ 2022-04-18 15:46 罗砂阅读(55) 评论(0) 推荐(0)

立即执行函数

摘要： <script> // 1.立刻执行函数：不需要调用立马能够自己执行的函数 function fn() { console.log(1); } fn(); // 2.写法也可以传递参数进来 // 1.(function(){})() 或者 2.(function(){}()) (function 阅读全文

posted @ 2022-04-18 15:09 罗砂阅读(33) 评论(0) 推荐(0)

client系列

摘要： client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 <style> div { width: 500px; height: 500px; background-color: aqu 阅读全文

posted @ 2022-04-18 14:51 罗砂阅读(82) 评论(0) 推荐(0)

放大镜效果

摘要：当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。今天我对这一技术，进行简单实现，实现图片放大镜效果。我在代码中进行了代码编写的思路的说明和详细的代码注释，方便读者，请看代码： 1 <!doc 阅读全文

posted @ 2022-04-18 14:12 罗砂阅读(63) 评论(0) 推荐(0)

拖动的模态框

摘要：案例分析： 1，点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。 2，点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 3，鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。mousedown mousemove 4，鼠标松开，可以停止模态框移动 mouseup 5, 阅读全文

posted @ 2022-04-18 14:09 罗砂阅读(101) 评论(0) 推荐(0)

0722tian

公告