鼠标点击效果代码

鼠标点击效果代码

实现代码

插到博客侧边栏公告

 1 <script type="text/javascript">
 2         var a_idx = 0;
 3         jQuery(document).ready(function($) {
 4         $("body").click(function(e) {
 5         var a = new Array("?喜欢就关注一下吧?","?不是点这里哦?","?快去点赞?","?在文章最下面哦?","?快去推荐一下吧?","?感谢观看?","?");
 6         var $i = $("<span></span>").text(a[a_idx]);
 7         a_idx = (a_idx + 1) % a.length;
 8         var x = e.pageX,
 9         y = e.pageY;
10         $i.css({
11             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
12             "top": y - 20,
13             "left": x,
14             "position": "absolute",
15             "font-weight": "bold",
16             "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
17         });
18         $("body").append($i);
19         $i.animate({
20             "top": y - 180,
21             "opacity": 0
22         },
23         1500,
24         function() {
25             $i.remove();
26         });
27     });
28 });
29 </script>

原文地址:https://www.cnblogs.com/lanyincao/p/11768315.html

时间: 2024-10-16 11:54:40

鼠标点击效果代码的相关文章

博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)

前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动画特效,在本文中我们将教大家制作当前简约的页面制作方法. 只要你们有需求,我会尽量帮助到大家,在此感谢各位广大粉丝的支持和理解,我会尽量做到最好,希望小主们不要吝啬你们的支持和推荐,动动小手顶一顶,非常感谢大家长久的陪伴~~ 全部过程都是在“管理->设置”中完成的,博客皮肤推荐使用Simple Me

css3代码实现的鼠标悬浮按钮效果代码实例

css3代码实现的鼠标悬浮按钮效果代码实例:在css3之前,鼠标悬浮于按钮之上,无非是设置按钮的大小.字体颜色或者背景图片等简单的项目,但是css3的出现,可以让设置变得丰富多彩,下面就是一个css3实现的此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://

博客个性化之【鼠标点击效果 】

侧栏插入此代码 /*****************************文字效果******************************************/ <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>    <script type="text/javascript">        var a_idx = 0;

博客园鼠标点击特效代码

<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?",&

基于jQuery鼠标点击弹出登陆框效果

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo

基于jQuery CSS3鼠标点击动画效果

分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="clearfix"> <div class="grid12 small12"> <div class="demos fl" id="demos&quo

基于jquery鼠标点击图片翻开切换效果

基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <img src="images/1.jpeg" alt="1" /> <img src="images/2.jpeg" alt="2" /> <img s

博客装饰---鼠标移动、点击效果

昨天看别人博客的时候有很炫酷的效果,我很喜欢,于是决定自己也来弄一哈~这个是需要申请js权限的~没想到昨天申请今天就通过了,非常感谢! 第一个:鼠标随意晃一下都是爱你的形状~~ /*鼠标跟随效果*/ <style type="text/css"> .draw { position: fixed; width: 1px; line-height: 1px; pointer-events: none; } @keyframes floatOne { 0% { opacity:1

CSS3实现的鼠标悬浮开门关门效果代码实例

CSS3实现的鼠标悬浮开门关门效果代码实例:本章节分享一段代码实例,它利用CSS3模拟实现了简单的开门关门效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落<