浙江铃声推荐联盟

JS特效教程:给网站添加鼠标点击弹出指定汉字特效

Jack小站2019-04-09 13:00:32

      先分享一首音乐:

来啦!来啦!终于更新啦!!!山顶的朋友们,你们还好吗?你们肯定问我最近忙什么?答案就是我自己博客的建设。这是我博客的地址↓↓↓

https://blog.kimu.top

好啦,今天给大家分享一段美化的代码,我们先看效果图:

    当人们在我们网站任意位置点击时,都会出现上升的文字,是不是很炫酷呢?

     想知道怎样实现吗?详细代码分享如下:

<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": 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();

        });

    });

});

</script>

其中 Array(“富强”, “民主”, “文明”, “和谐”, “自由”, “平等”, “公正” ,”法治”, “爱国”, “敬业”, “诚信”, “友善”)里面的汉字可以随便修改组合,也可以适当增加或删除,一切随意就好。还有,如果觉得点击弹出的汉字往上跑得太快的话,你可以将以上代码中的 1500 改为 3000 或者更大的数值即可。