Jquery鼠标点击出现文字
点击鼠标左键出现文字效果。
原理解说
1.首先确定你是不是点的鼠标左键;
2.文字效果要出现在你鼠标点击的地方;
3.点击后文字出现一个由下往上的显示效果;
4.点击完成后固定时间内还得消失
效果演示
代码演示
<!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="js/jquery.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(600).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>
Jquery鼠标点击出现文字相关推荐
- 鼠标特效代码 php_鼠标特效——鼠标点击出现文字效果
之前有人问我鼠标点击出现文字效果是怎么实现的,这个我只能说是从别人网站上看到的代码,为了大家使用方便,在这里我给大家分享一下.使用方法也很简单,只需要两步: 1.登录后台--外观--编辑,找到foot ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=&quo ...
- 屏蔽节点的鼠标点击选择文字的方法
屏蔽节点的鼠标点击选择文字的方法 -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-s ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- jQuery鼠标点击事件
概念 个人理解: jQuery鼠标点击事件是最常用的事件之一,当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件,都属于鼠标点击事件的范围.常见的鼠标操作有:单击.双击.右键等等. click ...
- jQuery 鼠标点击时变色,点击其他时还原
1.方式一可以用getElementById()方法来实现 首先要为几个div分别命名不同的id <div class="d1" id="d1">& ...
- jQuery 鼠标指针 悬浮在文字上提示信息
鼠标提示代码: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" ...
- Jquery鼠标滚轮放大缩小图片
使用Jquery鼠标点击图片,划动鼠标滚轮放大缩小图片. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 点击网页鼠标处飞出文字特效jQuery
这个特效笔者还真找不出什么特别贴切的标题来描述,直接看看效果图吧.哦对了,这个特效的灵感是笔者自己浏览一些网页的时候,鼠标点击,就会弹出或是文字或是图片,觉得新鲜就做了一个小的demo,还需完善,仅供 ...
最新文章
- hc05与单片机连接图_单片机科普:单片机的IO口不够用了怎么办?如何扩展单片机的IO口...
- 强化学习—— 经验回放(Experience Replay)
- 第二章 Mablab语言基础
- 【转】ASP.NET 表单验证实现浅析
- android图片拖动放大_Android拖放
- Beta版本测试第二天
- NMS(非极大值抑制)算法 -- 理论、代码
- 破解jQuery插件收费、下载币(单页扒站小工具)
- wps怎么图片透明_wpsword如何设置图片透明度
- iPhone连接Mac电脑总是断开
- 七剑下天山?七步搞定DB2查询优化!
- 领带打法最新10种(图解)
- 使用section.key的形式读取ini配置项
- PDF文档翻译中文的方法
- Tomcat中定制阀门
- Tableau雷达图和凹凸图
- 计算机类期刊信息,如影响因子、分区等快速查询
- 全球千亿美元市值IT企业榜单
- Android手机软键盘enter改为搜索
- 【JavaWeb 爬虫】Java文本查重网页版 爬取百度搜索结果页全部链接内容
热门文章
- android webservices 返回多行多列数据,NoahWeb实现表格多行多列
- python 数据库连接池_【转】Python 数据库连接池
- 教你win10怎么设置环境变量
- PageHelper分页插件源码及原理剖析
- Spring框架中的单例Bean是线程安全的吗?
- 无符号右移负数_关于负数的右移与无符号右移运算小结
- hashmap为什么线程不安全_StringBuilder为什么线程不安全?
- Linux进阶之路————开机、重启和用户登录注销
- loading linux img2a,嵌入式Linux中initrd的应用--浅析ramdisk、ramfs、initrd和initramfs
- php2588,搞清楚一下必胜2588z和2582z哪个好点?都有些什么区别?内幕评测分析