• 接51单片机课程设计,价格美丽
  • 这两天买了块51开发板玩玩,比用仿真好玩多了
  • 以后我尽量放蓝奏云上面
  • 博客今天做了一次较大的改动。好长时间没有更新文章了,是因为开学了和做其他站的等等原因,总之现在都差不多忙完了,最近会更新些文章的。
  • 本站正式开启碎语单页,本人的一些碎语会发在这里!

在自己的网站上设置鼠标单击特效

wordpress 六月飞雪 4个月前 (08-22) 1131次浏览 已收录 14个评论 扫描二维码
文章目录[隐藏]

这两天比较忙没啥好分享出来的。
那就发个最最最简单的把。
当在网站上单机鼠标时随机出现特定的文字,且文字颜色随机。

效果图

在自己的网站上设置鼠标单击特效

代码

废话不多说,直接上代码把。

<!--鼠标单击特效-->
<script type="text/javascript"> /* 鼠标特效 */ 
       function getColorRandom(){   /* 随机颜色函数 */ 
            var c="#";  
            var cArray=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];  
            for(var i=0;i<6;i++){  
              var  cIndex= Math.round(Math.random()*15);  
                c+=cArray[cIndex];  
            }  
            return c;  
        }  
var a_idx = 0; jQuery(document).ready(function($)
{ 
  $("body").click(function(e){
  var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
  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": 999999999,
    "top": y - 20,
    "left": x,
    "position": "absolute",
    "font-weight": "bold",
     "color":getColorRandom()});       
  $("body").append($i);
  $i.animate({
  "top": y - 180, "opacity": 0}, 1500,
   function() { $i.remove(); }); }); }); 
</script>

把以上代码放入<head>和</head>之间


乐于分享 , 版权所有丨如未注明 , 均为原创丨本网站采用CC BY-NC-SA 3.0 CN协议进行授权
转载请注明原文链接:在自己的网站上设置鼠标单击特效
喜欢 (5)
六月飞雪
关于作者:
网站搭建请联系!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(14)个小伙伴在吐槽
  1. 六月飞雪
    签到成功!签到时间:2018-08-22 22:33:12,每日打卡,生活更精彩哦~
    doom2018-08-22 22:32 回复 Windows 10 | Chrome 68.0.3440.106
  2. 六月飞雪
    签到成功!签到时间:2018-08-22 22:36:37,每日打卡,生活更精彩哦~
    doom2018-08-22 22:36 回复 Windows 10 | Chrome 68.0.3440.106
  3. 签到成功!签到时间:2018-08-22 23:39:19,每日打卡,生活更精彩哦~
    匿名2018-08-22 23:38 回复 Windows 10 | Chrome 68.0.3440.106
  4. 签到成功!签到时间:2018-08-22 23:39:20,每日打卡,生活更精彩哦~
    匿名2018-08-22 23:40 回复 Windows 10 | Chrome 68.0.3440.106
  5. 签到成功!签到时间:2018-08-22 23:39:21,每日打卡,生活更精彩哦~
    匿名2018-08-22 23:42 回复 Windows 10 | Chrome 68.0.3440.106
  6. 签到成功!签到时间:2018-08-22 23:39:22,每日打卡,生活更精彩哦~
    匿名2018-08-22 23:43 回复 未知操作系统 | Chrome 68.0.3440.106
  7. 1签到成功!签到时间:2018-08-22 23:39:22,每日打卡,生活更精彩哦~
    匿名2018-08-22 23:43 回复 未知操作系统 | Chrome 68.0.3440.106
  8. 2签到成功!签到时间:2018-08-22 23:39:22,每日打卡,生活更精彩哦~
    匿名2018-08-22 23:43 回复 未知操作系统 | Chrome 68.0.3440.106
  9. 签到成功!签到时间:2018-08-22 23:39:23,每日打卡,生活更精彩哦~
    匿名2018-08-22 23:45 回复 未知操作系统 | Chrome 68.0.3440.106
  10. 签到成功!签到时间:2018-08-22 23:39:24,每日打卡,生活更精彩哦~
    匿名2018-08-22 23:47 回复 未知操作系统 | Chrome 68.0.3440.106
  11. 1签到成功!签到时间:2018-08-22 23:39:24,每日打卡,生活更精彩哦~
    匿名2018-08-22 23:48 回复 未知操作系统 | Chrome 68.0.3440.106
  12. 六月飞雪
    签到成功!签到时间:2018-08-23 17:45:12,每日打卡,生活更精彩哦~
    doom2018-08-23 17:44 回复 Windows 10 | Chrome 68.0.3440.106
  13. 六月飞雪
    签到成功!签到时间:2018-08-28 14:29:56,每日打卡,生活更精彩哦~
    doom2018-08-28 14:37 回复 Windows 10 | Chrome 68.0.3440.106
  14. 这就很ojbk了
    lmarch2018-09-12 02:36 回复 Windows 10 | Chrome 68.0.3440.106