js写一写常见点击按钮的效果 |
您所在的位置：网站首页 › js按钮点击事件 › js写一写常见点击按钮的效果 |
js写一写常见点击按钮的效果
|
这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战 前言大家好，我是不吃鱼d猫，今天是除夕，哈哈哈，咱们还是要更新更新文章，前面给大家写了很多项目，有些单纯的用css是写不来的，一些效果。我们大家在浏览网页时，是不是经常见到按钮点击的效果。今天给大家用js中的事件给大家做出按钮点击的效果。 鼠标的按下和抬起事件 前提我们熟知，js是事件驱动语言。有很多事件类型，比如鼠标事件，键盘事件，表单事件，其他事件等。我们在点击按钮的时候，肯定是触发点击事件的，但在点击事件中又有单击事件，双击事件，左右中键事件，还有按下和抬起事件，我们在浏览网页时肯定遇到过，比如点击确定啊，右键显示菜单啊等等都是常见的。 今天我们说说 按下：mousedown 抬起：mouseup 语义化严重，很好理解 点击效果 效果图实现之前我们复习复习相对定位与绝对定位\ 相对定位： position: relative; 相对于自身定位，元素还是占位，不脱离文档流，相对于自身位置移动。 绝对定位：position: absolute; 绝对定位后，元素不占位，完全脱离文档流，注意的是：先找有定位属性的最近的祖先元素，如果没有就找浏览器了，这就是（子绝父相），经常用。 实现我们在点击时，按钮上下移动，所以我们设置鼠标按下时，按钮上升几个像素，即可以改变按钮的top属性，鼠标抬起时，鼠标回到原来的位置。即又改变按钮的位置。\ 结构 点击我有效果 复制代码 script标签在js中先拿对象 //拿到对象 let op = document.querySelector('p') 复制代码鼠标按下事件，改变按钮的属性。 op.onmousedown = () => { op.style.cssText = 'top:8px' } 复制代码鼠标抬起事件，改变按钮的属性 op.onmouseup = () => { op.style.cssText = 'top:12px' } 复制代码 补充一下鼠标变小手的属性 cursor: pointer;，我是喜欢用的，毕竟是增加用户体验。 今天是给大家说说原理，其实很多地方都会用到相同的思想。比如电商网站中，商品浏览的效果还不是样的思想，怎么说呢，都是增加用户的体验。 |
【本文地址】
今日新闻 |
推荐新闻 |