稀酷客

 找回密码
 加入稀酷客

只需一步,快速开始

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 1842|回复: 0

[技术文章] 给网站添加鼠标点击文字特效

[复制链接]

2

主题

2

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2018-4-3 13:45:30 | 显示全部楼层 |阅读模式
给网站添加鼠标点击文字特效 JavaScript
  1. <script type="text/javascript">
  2. /* 鼠标特效 */
  3. var a_idx = 0;
  4. jQuery(document).ready(function($) {
  5.     $("body").click(function(e) {
  6.         var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
  7.         var $i = $("<span/>").text(a[a_idx]);
  8.         a_idx = (a_idx + 1) % a.length;
  9.         var x = e.pageX,
  10.         y = e.pageY;
  11.         $i.css({
  12.             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
  13.             "top": y - 20,
  14.             "left": x,
  15.             "position": "absolute",
  16.             "font-weight": "bold",
  17.             "color": "#ff6651"
  18.         });
  19.         $("body").append($i);
  20.         $i.animate({
  21.             "top": y - 180,
  22.             "opacity": 0
  23.         },
  24.         1500,
  25.         function() {
  26.             $i.remove();
  27.         });
  28.     });
  29. });
  30. </script>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入稀酷客   

本版积分规则

QQ|Archiver|手机版|小黑屋|稀酷客 ( 冀ICP备14004526号-1 )

GMT+8, 2019-2-19 09:21 , Processed in 1.093757 second(s), 33 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表