前端鼠标点击出现动画大全
2024-03-30 13:17:35
一：前端鼠标点击出现自定义汉字
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Onclick</title>
</head>
<style>.body{height: 900px;width: 100%;background-color: black;}
</style>
<body class="body"></body>
<script src="https://blog.hlzyw.cn/style/js/jquery-1.8.3.min.js"></script><script>
$(".body").mousedown(function(e){ var arr = ['张憨包是我儿子','张憨包是我儿子','张憨包是我儿子','张憨包是我儿子','张憨包是我儿子','张憨包是我儿子','张憨包是我儿子','张憨包是我儿子',] switch(e.which){//左键点击case 1:{//计算鼠标点击坐标var x = e.originalEvent.x ||e.originalEvent.layerX || 0 var y = e.originalEvent.y ||e.originalEvent.layerY || 0 //随机取出文字 var index = Math.floor((Math.random()*arr.length))var text = arr[index]//调用文字显示函数createDiv(x,y,text)//文字出现后固定时间内消失$('.newdiv').delay(500).hide(0)break} }
})
function createDiv (x,y,text) {//文字颜色var colorArr = ['red','yellow','green','blue','orange','black']//随机取出颜色var colorIndex = Math.floor((Math.random()*colorArr.length))var color = colorArr[colorIndex]//在鼠标点击处创建一个div用来显示文字newDiv = $("<div></div>")newDiv.css({'position':'absolute','width':'40px','height':'30px','left': x-15 + 'px','top': + y-20 +'px','text-align':'center','color':color})newDiv.addClass('newdiv')$('.body').html(newDiv)$('.newdiv').html(text)//动画效果$('.newdiv').animate({top:+ y-35 +'px'})
}
</script>
</html>二：前端鼠标点击记录次数
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>鼠标点击网页出现文字特效</title>
</head><body>
<!-- 首先导入jq插件 -->
<script src="https://blog.hlzyw.cn/style/js/jquery-1.8.3.min.js"></script>
<script>//鼠标点击特效//页面加载事件jQuery(function () {//声明变量var 点击数 = 0;//给页面创建点击事件$("html").click(function (e) {//创建颜色库//随机颜色//创建颜色码const 前颜色码库 = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99','aa', 'bb', 'cc', 'dd', 'ee', 'ff');const 中颜色码库 = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99','aa', 'bb', 'cc', 'dd', 'ee', 'ff');const 后颜色码库 = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99','aa', 'bb', 'cc', 'dd', 'ee', 'ff');//从颜色库选取一种颜色;当然这是数组的方式;随机性var 前颜色码 = Math.floor(Math.random() * 前颜色码库.length);var 中颜色码 = Math.floor(Math.random() * 中颜色码库.length);var 后颜色码 = Math.floor(Math.random() * 后颜色码库.length);// console.log("前颜色码 = " + 前颜色码 + "; 中颜色码 = " + 中颜色码 + "; 后颜色码 = " + 后颜色码 + ";")// console.log("#" + 前颜色码库[前颜色码] + 中颜色码库[中颜色码] + 后颜色码库[后颜色码]);//每当鼠标点击页面增加点击数点击数++;//创建元素; 创建的元素是span元素,这个元素的内容是"鼠标点击了第" + 点击数(这个是一个变量) + "次"var 创建元素 = $("<span>").text("鼠标点击了第" + 点击数 + "次");//在页面上添加span元素jQuery("html").append(创建元素);//获取鼠标点击坐标var 横坐标 = e.pageX;var 纵坐标 = e.pageY;//给span元素添加css样式创建元素.css({"z-index": 999, //设置或获取定位对象的堆叠次序(z-index):999"top": 纵坐标 - 20, //上(top):y-20"left": 横坐标, //左:x"position": "absolute", //定位:绝对定位"font-weight": "bold", //字体粗细:粗体"color": "#" + 前颜色码库[前颜色码] + 中颜色码库[中颜色码] + 后颜色码库[后颜色码], //颜色:绿色"user-select": "none", //使文字不被选中});//创建元素.animate({"top": 纵坐标 - 180, //上:y-180"opacity": 0 //透明度(opacity):0}, 2000, //1500,调节动画速度function () { //功能函数创建元素.remove(); //$i的删除});})})
</script>
</body>三：前端鼠标点击出现汉字
<script src="https://blog.hlzyw.cn/style/js/jquery-1.8.3.min.js"></script><script type="text/javascript">/* 鼠标点击特效 */jQuery(function () {$("html").click(function(e) {var a_idx = Math.floor((Math.random() * 26));var a = new Array("乐观", "❤", "积极", "向上", "自由", "正能量", "(*^▽^*)", "元气满满", "开心", "快乐","善良", "可爱", "暴富", "暴瘦", "❤","富强", "民主", "文明", "和谐", "自由", "平等","公正" ,"法治", "爱国", "敬业", "诚信", "友善");var color1 = Math.floor((Math.random() * 255));var color2 = Math.floor((Math.random() * 255));var color3 = Math.floor((Math.random() * 255));var $i = $("<span />").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({ "z-index": 9999999999999 ,"top": y - 20,"left": x,"position": "absolute","font-family":"mmm","fontSize":Math.floor((Math.random() * 22)+15),"font-weight": "bold","color": "rgb("+color1+","+color2+","+color3+")","-webkit-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","user-select":"none",});$("body").append($i);$i.animate({"top": y - 200,"opacity": 0},1000,function() {$i.remove();});});});</script>四：前端鼠标点击出现爱心
<script>//鼠标点击出现爱心特效(function(window,document,undefined){var hearts = [];window.requestAnimationFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback){setTimeout(callback,1000/60);}})();init();function init(){css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");attachEvent();gameloop();}function gameloop(){for(var i=0;i<hearts.length;i++){if(hearts[i].alpha <=0){document.body.removeChild(hearts[i].el);hearts.splice(i,1);continue;}hearts[i].y--;hearts[i].scale += 0.004;hearts[i].alpha -= 0.013;hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;}requestAnimationFrame(gameloop);}function attachEvent(){var old = typeof window.onclick==="function" && window.onclick;window.onclick = function(event){old && old();createHeart(event);}}function createHeart(event){var d = document.createElement("div");d.className = "heart";hearts.push({el : d,x : event.clientX - 5,y : event.clientY - 5,scale : 1,alpha : 1,color : randomColor()});document.body.appendChild(d);}function css(css){var style = document.createElement("style");style.type="text/css";try{style.appendChild(document.createTextNode(css));}catch(ex){style.styleSheet.cssText = css;}document.getElementsByTagName('head')[0].appendChild(style);}function randomColor(){return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";}})(window,document);</script>前端鼠标点击出现动画大全相关推荐
- vue 鼠标点击特效动画（css3动画），水波纹动画效果
效果展示 思路要点 通过向数组 waves push操作插入水波纹相关数据,使用 vue v-for 动态更新 waves 生成水波纹数据 水波纹使用fixed定位通过点击事件的 clientX 和 ...
- 点赞动画,鼠标点击动画
点赞+1 动画.鼠标点击动画 原理很简单通过绝对定位 和 样式动画就可以实现了. 不多说了,看下面demo <html> <head> <meta charset=&qu ...
- prototype鼠标指针_html5鼠标点击页面光标圆点动画特效
特效描述:html5 鼠标点击页面 光标圆点动画特效.html5圆点动画,光标动画,鼠标点击页面事件. 代码结构 1. 引入JS 2. HTML代码 点击任何地方看效果 'use strict'; v ...
- 鼠标点击地面，主角移动并切换动画状态
1.给地形添加一个标签 2.烘焙地形 3.给主角绑定导航代理组件 public class PlayerMouseMove02 : MonoBehaviour {public GameObject a ...
- JS实现鼠标点击爱心绘制多边形每日一言功能
本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...
- 博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)...
前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...
- CSS3动画大全(附源码)flex布局,grid布局3d旋转,图像模糊,文字发光
CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! 文章目录 CSS3动画大全(附源码)3d旋转,图像模糊,文字发光! html代码 css grid布局 flex布局 文字发光 & 图 ...
- Unity3d鼠标点击屏幕来控制人物的走动
今天呢,我们来一起实现一个在RPG中游戏中十分常见的功能,通过鼠标点击屏幕来控制人物的走动.首先来说一下原理,当我们点击屏幕时,我们按照一定的方法,将屏幕上的二维坐标转化为三维坐标,然后我们从摄像机位 ...
- unity3d]鼠标点击地面人物自动走动(也包含按键wasdspace控制)
目录(?)[-] 一效果图 二大概步骤 创建一个plane设置层为Terrain因为后面要判断是否点击的是这个层 准备好人物模型并且将三个脚本拖放到人物上并且将动画文件也拖放好记得看前面提醒哦 Thi ...
最新文章
- 【fiveKeyPress】2秒内五次点击键盘任意键（或组合键）触发自定义事件（以Pause/Break键为例）
- 重磅！阿里达摩院发布《2020十大科技趋势》
- git 修改分支名字_开发中必须要掌握的 Git 技巧
- Elasticsearch 不同的搜索类型之间的区别
- 蚂蚁金服支付平台代码配置
- 嵌入式Linux驱动笔记(十八)------浅析V4L2框架之ioctl【转】
- float foo=42e1为什么错_为什么重写了equals()也要重写hashCode()
- ecshop适应在php7,ecshop适应PHP7的解决方法
- 计算机级用英语怎么说,计算机国家一级用英语怎么说
- “金三银四”春招指南！在线javascript
- 900款工作岗位竞聘PPT模板免费下载
- 使用PE安装纯净版win7
- 网络棋牌游戏用户群体
- ios10--拳皇动画
- 『梦想城镇』终极攻略
- （笔试题）风口的猪-中国牛市
- Aruco物体定位（追踪）在UE4中的实现
- Keil出现Error:Flash Download failed - Could not load file
- 免费各种查询API接口
- 布局：px to vw、vh