HTML/CSS/JS 鼠标特效三（鼠标点击WEB页面出现自定义文字、图片冒泡特效）

1、实际效果

【青树柠檬~旧事老酒】

• 以下3个示例效果大同小异，大家按需求选择即可
• 引入以下代码前，需引入JQuery，否则报错

2、示例代码一

<!--鼠标点击特效，自定义各种图案2020/02/12-->
 <script >
    var a_idx=0;
    jQuery(document).ready(function($){
   
      addTips = 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": 999999999999999999999999999999999999999999999999999999999999999999999,
          "top":y-20,
          "left":x,
          "position":"absolute",
          "font-weight":"bold",
          "color":"#ff6651"
        });
 
        $("body").append(i);
        i.animate({
   "top": y-180,"opacity":0},1500,function(){
   i.remove()})
        return false;
      }
      //绑定鼠标左键
      $("body").click(addTips);
      //绑定鼠标左键
      $("body").bind("contextmenu",addTips)
  });
    </script>
    <script>
      function o(w,v,i){
   
          return w.getAttribute(v)||i
      }
      function j(i){
   
          return document.getElementsByTagName(i)
      }
      function l(){
   
          var i=j("script"),w=i.length,v=i[w-1];
          return {
   l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}
      }
      function k(){
   
          r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth