首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用原生JS实现鼠标点击爱心效果 !!!

使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的。其实实现起来也很简单,下面一起来学习一下吧。...这样的效果很常用,在很多网页博客中都有使用 实现思路 首先我们需要获取到当前鼠标点击的位置 需要在当前位置生成一个标签 需要给标签添加随机的自定义内容 随机的文本颜色 添加文本的淡出效果 清除淡出的标签...所念皆星河》❤" ] //自定义内容的数组 let randContent = Math.ceil(Math.random() * content.length); 首先需要自己定义一个数组,存放的内容就是鼠标点击时出现的内容...文本上升效果 let i = 0 setInterval(() => { _this.style.top = this.y - 20 - i + 'px' i++ }, 10); 由于原生js...鼠标点击实例化标签,并在点击位置生成 body.addEventListener('click', function (e) { let x = e.pageX; let y = e.pageY

4.8K30
您找到你想要的搜索结果了吗?
是的
没有找到

与Ajax同样重要的jQuery(2)

②:事件一次性绑定和自动触发 一次性事件 one(type, [data], fn) 为对象绑定一次性事件,只有一次有效 触发事件 trigger(type, [data]) 触发目标对象指定的事件执行...练习1: ² 为页面内所有p 元素绑定 一次性事件,点击打印p元素中内容 ² 页面内有两个按钮,点击按钮1, 触发按钮2的 click事件执行 <script type="text/javascript...p元素中内容 $("p").one("click",function(){ alert($(this).text()); }); //页面内有两个按钮,点击按钮1, 触发按钮2的 click事件执行 $...("#mybutton1").click(function(){ alert("点击了按钮一"); // 触发2 click事件 $("#mybutton2").trigger("click"); })...③:事件切换 hover(mouseover,mouseout) 模拟鼠标悬停事件 toggle(fn1,fn2,fn3...) ; 鼠标点击一次 触发一个函数 练习1: ² 编写一个div元素,光标移动上去

6.2K50

DOM事件

常见的DOM事件包括:点击事件(click): 用户点击页面上的元素时触发。提交事件(submit): 当表单提交时触发。...改变事件(change): 当表单元素的值改变时触发(通常用于输入框、下拉框等)。鼠标移入/移出事件(mouseover/mouseout): 当鼠标移入或移出元素时触发。...document.body.onclick=function (){}; 大部分人:给body绑定一个点击事件 标准:给body的点击事件行为绑定方法鼠标事件元素.onclick=function(){...(){} 双击,大约300ms内连续点击两次元素.onmouseenter=function(){}鼠标移入,进入子节点不会触发这个事件元素.onmouseleave=function(){}鼠标离开,...进入子节点不会触发这个事件元素.onmouseout=function(){}鼠标滑出,进入子节点会触发这个事件元素onmouseover=function(){}鼠标滑过,进入子节点会触发这个事件元素

13920

WPF 下拉框选项做鼠标 Hover 预览效果

本文来告诉大家如何在 WPF 中,在 下拉框 ComboBox 里面,鼠标移动到 ComboBoxItem 上时,自动触发对应的事件,用来预览此选项值。...例如我在实现一个颜色下拉框,此时我可以通过点击下拉框显示多个不同的颜色,鼠标移动到某个颜色选项上,可以修改界面,预览此颜色的内容 大概的界面如下图,点击右边的颜色下拉框,可以显示多个不同的颜色,而鼠标移动到下拉框的选项上...ComboBox.ItemTemplate> 接着在后台代码添加 ComboBox_OnMouseMove 方法,在 ComboBox_OnMouseMove 方法里面判断当前的鼠标移动...,根据当前鼠标移动所在的项对应的 DataContext 即可拿到绑定的数据,从而拿到当前预览颜色 private void ComboBox_OnMouseMove(object sender

1.7K20

javascript入门笔记5-事件

3.鼠标单击事件( onclick ) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。..." onclick="add2()" /> 4.鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover...鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。 12.任务 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。...document.getElementById("txt2").value; //获取选择框的值 var c=document.getElementById("select").value; //获取通过下拉框来选择的值来改变加减乘除的运算法则

1.2K30

Ant Motion动效插件分析

Ant Motion动效插件分析 一、原理分析 特效是通过组件内部的js和css两者共同控制。...例: (3):第三种方案可以制作一个纯js组件,动效样式通过用户自定义。...例:go函数参数:绑定元素,触发方式option(hover/click),动画效果(分为transition和animation两种),动画时间,执行过渡的线性效果(支持cubic-bezier),动效完成回调函数...:(hover类特效更适用于PC端,因为移动设备中并没有鼠标指针,移动端适合用点击类效果) (1):元素的2D变换(放大缩小;扭动弹跳;晃动变形) (2):元素背景的填充与文字颜色变化 (3):icon...图标变换 (4):shadow阴影特效(元素升高地面出现阴影) (5):按钮特效(button的点击交互;radio之类的单选复选框选中效果) (6):弹出特效(select下拉框的拉开收起特效;dialog

2.7K30
领券