摘要:
核心原理:通过定时器setlnterval()不断移动盒子位置 实现步骤: 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动的距离 3.利用定时器不断重复这个操作 4.加上一个结束定时器的条件 5.注意此元素需要添加定位,才能使用element.style.left <body> <div>< 阅读全文
posted @ 2022-04-18 17:09
罗砂
阅读(45)
评论(0)
推荐(0)
摘要:
当鼠标移动到元素上时就会触发mouseenter事件 类似mouseover,他们两个之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发 之所以这样,就是因为mouseenter不会冒泡 阅读全文
posted @ 2022-04-18 16:41
罗砂
阅读(70)
评论(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系列的相关属性可以动态的得到该元素大小 滚动距离等。 <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系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 <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
罗砂
阅读(62)
评论(0)
推荐(0)
摘要:
案例分析: 1,点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。 2,点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 3,鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。mousedown mousemove 4,鼠标松开,可以停止模态框移动 mouseup 5, 阅读全文
posted @ 2022-04-18 14:09
罗砂
阅读(101)
评论(0)
推荐(0)
摘要:
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 ●获得元素距离带有定位父元素的位置 ●获得元素自身的大小(宽度高度) ●注意:返回的数值都不带单位 <style> .father { width: 500px; height: 500px 阅读全文
posted @ 2022-04-18 13:41
罗砂
阅读(63)
评论(0)
推荐(0)
摘要:
<body> <button>点击我</button> </body> <script> // location对象方法; // location.assign() 跟href一样,可以跳转页面(也称为重定向页面) // location.replace() 替换当前页面,因为不记录历史,所以不能后 阅读全文
posted @ 2022-04-18 13:25
罗砂
阅读(167)
评论(0)
推荐(0)
摘要:
第一个页面 <body> <form action="11.5获取URL参数跨页面输入.html"> 用户名: <input type="text " name="uname" /> <input type="submit" value="登录" /> </form> </body> 第二个页面 < 阅读全文
posted @ 2022-04-18 13:24
罗砂
阅读(46)
评论(0)
推荐(0)
摘要:
<body> <button>跳转</button> <div></div> </body> <script> var btn = document.querySelector("button"); var div = document.querySelector("div"); btn.addEv 阅读全文
posted @ 2022-04-18 13:22
罗砂
阅读(29)
评论(0)
推荐(0)
摘要:
同步 是一个一个执行的 异步 是很多个同时执行的 他们的区别就是执行顺序不同 阅读全文
posted @ 2022-04-18 13:21
罗砂
阅读(32)
评论(0)
推荐(0)
摘要:
<body> <button>发送</button> </body> <script> var btn = document.querySelector("button"); var time = 3; //定义剩下的秒数 btn.addEventListener("click", function 阅读全文
posted @ 2022-04-18 13:21
罗砂
阅读(35)
评论(0)
推荐(0)
摘要:
清除定时器clearInterval: <body> <button class="kai">开启定时器</button> <button class="guan">关闭定时器</button> </body> <script> var begin = document.querySelector( 阅读全文
posted @ 2022-04-18 13:20
罗砂
阅读(188)
评论(0)
推荐(0)
摘要:
<style> div { width: 400px; height: 200px; background-color: cornsilk; } span { float: left; margin-right: 10px; background-color: black; width: 50px; 阅读全文
posted @ 2022-04-18 13:19
罗砂
阅读(143)
评论(0)
推荐(0)
摘要:
以毫秒的计算 定时器setTimeout( ) <script> // 以毫秒的计算 定时器setTimeout( ) // 第一种方法 setTimeout(function () { console.log("三秒钟到了"); }, 3000); </script> <script> // 第二 阅读全文
posted @ 2022-04-18 13:11
罗砂
阅读(66)
评论(0)
推荐(0)
摘要:
window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数 注意 1.只要窗口大小发生像素变化,就会触发这个事件 2.我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度 <script> // window.onresize是调整窗口大小加载事 阅读全文
posted @ 2022-04-18 13:10
罗砂
阅读(171)
评论(0)
推荐(0)
摘要:
核心思路:监测用户是否按下s键,如果按下s键就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 搜索框获得焦点:使用js里面的focus()方法 <body> <input type="text" /> </body> <script> var search = 阅读全文
posted @ 2022-04-18 11:35
罗砂
阅读(116)
评论(0)
推荐(0)
摘要:
<script> document.addEventListener("keyup", function () { console.log("我弹起了"); }); // keypress按键按下的时候触发 不能识别功能键 比如ctr1 shift 左右箭头等 document.addEventLi 阅读全文
posted @ 2022-04-18 11:34
罗砂
阅读(44)
评论(0)
推荐(0)