网页鼠标点击任意位置出现跳动文字-♚纪实阁付涛♚

网页鼠标点击任意位置出现跳动文字

在初建这个网站的时候,就在其它博友网站里面见过这等效果;因为觉得太华丽,没必要所以就没弄,今天闲着没事,就又给网站加上去了,传统的别人都是加的以下文字:

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

想想感觉太土,所以自己就修改成了以下文字:

谍豹欢迎您", "共享得永生", "文明逛网站", "和谐下资源", "随机页面有福利", "做网站找谍豹", "香港空间1G最低2元" ,"法治社会误乱评", "爱国爱家爱自己", "敬业守业护民生", "官方热线4006928588", "联系客服咨询"

最后实施效果如下:

修改方案实施方法

将以下代码直接放到网站里面现在整站通用的一个JS文件末尾即可;无须其它修改:

/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("谍豹欢迎您", "共享得永生", "文明逛网站", "和谐下资源", "随机页面有福利", "做网站找谍豹", "香港空间1G最低2元" ,"法治社会误乱评", "爱国爱家爱自己", "敬业守业护民生", "官方热线4006928588", "联系客服咨询");
        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
        },
        4000,
        function() {
            $i.remove();
        });
    });
});
注释:

其中的“4000”代表点击后文字出现到消失的时间间隔,1000=1秒;

其中的“ff6651”为文字颜色,可根据自己需求自由修改;

至于文字,就根据情况自由添加、修改、删除操作了;

【友情提示:】
1、本文由 ♚纪实阁付涛♚ 作者:付涛纪实阁 发表,其版权均为 ♚纪实阁付涛♚ 所有;
2、文章内容系作者个人观点,不代表除个人作者外的任何第三方针对观点赞同或支持;
3、本站文章均为博主原创,如需转载,请注明文章来源;
0

发表评论