网页里面实现鼠标点击页面会冒字特效的方法

1、在网页底部添加一段js代码即可，代码如下：

 

<script>

 

(function() {

 

    var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"]

 

      , index = Math.floor(Math.random() * coreSocialistValues.length);

 

    document.body.addEventListener('click', function(e) {

 

        if (e.target.tagName == 'A') {

 

            return;

 

        }

 

        var x = e.pageX

 

          , y = e.pageY

 

          , span = document.createElement('span');

 

        span.textContent = coreSocialistValues[index];

 

        index = (index + 1) % coreSocialistValues.length;//取模循环

 

        span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');

 

        document.body.appendChild(span);

 

        animate(span);

 

    });

 

    function animate(el) {//动画

 

        var i = 0

 

          , top = parseInt(el.style.top)

 

          , id = setInterval(frame, 24);

 

        function frame() {//帧

 

            if (i > 180) {

 

                clearInterval(id);

 

                el.parentNode.removeChild(el);

 

            } else {

 

                i += 2;

 

                el.style.top = top - i + 'px';

 

                el.style.opacity = (180 - i) / 180;

 

            }

 

        }

 

    }

 

}());

 

</script>

 

2、这样在网页上鼠标左键点击网页空白的地方就能随机出现“富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善”中的字了。这些字可以修改成自己的喜欢的字，修改的地方正是在上一步中的js代码里面的这几个字的地方。