js+css实现鼠标点击时出现小心心

1.先看效果图：

2.代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>鼠标点击时出现小心心</title>
<style>.mydiv{width:1000px;height:500px;background-color:'#fff';border:12px solid green;}body{position:relative;}.img {width: 20px;height: 20px;opacity: 1;position: absolute;z-index: 100000;transition: 2s;}.left,.right {width: 10px;height: 10px;border-radius: 100%;position: absolute;}.right {right: 0;}.under {width: 10px;height: 10px;position: absolute;top: 5px;left: 5px;transform: rotate(45deg)}.text {width: 50px;font-size: 10px;line-height: 1;position: absolute;top: -1em;left: -15px;text-align: center;}</style></head>
<body>
<div class="mydiv"></div>
</body>
<script>// 点击出的文字数组，可自行添加，不要太多哦text = ["你好呀~", "点我呀~", "啦啦啦~", "哎呀呀~", "求关注~", "帅哥美女~", "哦~", "咦~"];// 计数var count = 0;// 鼠标按下事件document.body.onmousedown = function (e) {// 获取鼠标点击位置var x = event.pageX - 18;var y = event.pageY - 30;// 分别创建所需要的元素节点var img = document.createElement("div");var left = document.createElement("div");var right = document.createElement("div");var under = document.createElement("div");var txt = document.createElement("div");// 通过随机数从文字数组中获取随机下标的文字var textNode = document.createTextNode(text[parseInt(Math.random() * text.length)]);// 文字添加到txt节点中txt.appendChild(textNode);img.className = "img" + " " + "img" + count;left.className = "left";right.className = "right";under.className = "under";txt.className = "text";img.style.top = y + "px";img.style.left = x + "px";// 将创建的元素添加到容器中img.appendChild(left);img.appendChild(right);img.appendChild(under);img.appendChild(txt);document.body.appendChild(img);// 获取随机颜色var color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," +parseInt(Math.random() * 255) + ")";txt.style.color=color;for (var i = 0; i < 3; i++) {img.children[i].style.background = color;}}// 鼠标抬起事件document.body.onmouseup = function () {document.getElementsByClassName("img" + count)[0].style.transform = "scale(0.5)";document.getElementsByClassName("img" + count)[0].style.transform = "translateY(-40px)";document.getElementsByClassName("img" + count)[0].style.opacity = "0";count++;}</script>
</html>

3.将代码复制进.html文件，用浏览器打开即可；

js+css实现鼠标点击时出现小心心相关推荐

button点击后出现的边框_代码分享：原生js实现，鼠标点击按钮时，多彩粒子散射特效。...
原地址,可以在线查看演示效果,要是下面的代码复制后运行有问题,可以从原地址去复制,我试过了,OK的. 原生js实现,鼠标点击按钮时,多彩粒子散射特效.fairysoftware.com 完整代码,复 ...
HTML点击图片下方出现阴影,纯css实现图片点击时移动效果和阴影效果
有人喜欢用js加css实现这样的效果,而我比较喜欢用最简单的方法实现这样的效果,因为我是个简单的人,所以我要做最简单实用的事儿(hei hei)...好处就是:简单,方便操作,给服务器减少压力,对se ...
html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
css禁用鼠标点击事件
1.css禁用鼠标点击事件 .disabled { pointer-events: none; } 转载于:https://www.cnblogs.com/jiangtuzi/p/5728230.ht ...
使用 CSS 模拟鼠标点击交互
使用 CSS 模拟鼠标点击交互通过 CSS 方式模拟鼠标点击交互动效的两个核心要素: HTML 元素需要使用 <input> 和 <label> 元素 CSS 使用 :che ...
CSS实现鼠标悬停图片时的边框变色效果
CSS实现鼠标悬停图片时的边框变色效果,CSSS双边框,鼠标悬停变色效果,用CSS实现的图片双边框效果,鼠标悬停经过时显示背景色,很简单的效果,网上常见,代码不复杂,用的是一些基本的CSS知识. &l ...
php 鼠标小手,CSS如何让鼠标放上时的小手样式
CSS实现让鼠标放上时出现小手样式的方法:首先创建一个HTML示例文件:然后在body中添加一个span标签:接着给该标签添加"cursor:pointer;"样式来实现让鼠标放上 ...
超详细！使用HTML、CSS、JavaScript实现倒计时。附加功能——点击页面出现小心心
写在开头的感谢: 感谢 @Destiny_1853 的灵感和获取时间的代码提供. 感谢 @扰扰的页面点击出现小心心的代码提供. 本次,我们准备写一个有关倒计时的小例子,正好最近在进行前端实训,学习了 ...
html桌面倒计时代码,超详细！使用HTML、CSS、JavaScript实现倒计时。附加功能——点击页面出现小心心...
写在开头的感谢: 感谢 @Destiny_1853 的灵感和获取时间的代码提供. 感谢 @扰扰的页面点击出现小心心的代码提供. 本次,我们准备写一个有关倒计时的小例子,正好最近在进行前端实训,学习了 ...

js+css实现鼠标点击时出现小心心

js+css实现鼠标点击时出现小心心相关推荐

最新文章

热门文章