js/jq代码实现鼠标点击文字有趣特效

责编:menVScode 2018-10-10 10:12 阅读(21)

效果展示

GIF

JQuery代码部分

<script type="text/javascript">
/* 鼠标特效 */
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": 99999999999,
      "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();
    });
  });
});
</script>

js代码

var clickNum = 0;
var $html = document.getElementsByTagName("html")[0];
var $body = document.getElementsByTagName("body")[0];
var txt = ["富强","🚩", "民主","😍", "文明", "🔥","和谐","😘", "自由","✌", "平等","💘", "公正" ,"🌹","法治","💞", "爱国","💖", "敬业","🍒", "诚信", "🍓","友善"];
$html.onclick = function(e) {
    var $elem = document.createElement("b");
    $elem.style.color = "#E94F06";
    $elem.style.zIndex = 9999;
    $elem.style.position = "absolute";
    $elem.style.select = "none";
    var x = e.pageX;
    var y = e.pageY;
    $elem.style.left = (x - 10) + "px";
    $elem.style.top = (y - 20) + "px";
    clearInterval(anim);
    $elem.innerText = txt[(clickNum++)%(txt.length)];
    $elem.style.fontSize = Math.random() * 10 + 8 + "px";
    var increase = 0;
    var anim;
    setTimeout(function() {
        anim = setInterval(function() {
            if (++increase == 150) {
                clearInterval(anim);
                $body.removeChild($elem);
            }
            $elem.style.top = y - 20 - increase + "px";
            $elem.style.opacity = (150 - increase) / 120;
        }, 8);
    }, 70);
    $body.appendChild($elem);
}
标签: 文字
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码