【WordPress 教程】WordPress主题添加鼠标点击特效

2019年6月21日22:40:04 10 6,079
摘要

介绍几种WordPress主题添加“富强、民主、文明、和谐、”等鼠标点击特效方法以及代码使用。

代码介绍

  • 第一种,比较普通没什么特别
<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>
  • 第二种,文字上美化了一下

展开

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var $i = $("<span></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": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
  • 基本上没什么区别稍微修改了一下看自己喜欢
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("💗","富强","💗","民主","💗","文明","💗","和谐","💗","自由","💗","平等","💗","公正","💗","法治","💗","爱国","💗","敬业","💗","诚信","💗","友善"); 
        var $i = $("<span></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", 
            "font-size": "10px", 
            "animation": "heartbeat .25s infinite .1s", 
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1000, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

  • 第三种,字体颜色随机,大小循环变小变大
此处为隐藏的内容!
发表评论并刷新,方可查看
  • 第四种,数字点击特效

展开

<script>  
jQuery(document).ready(function($) {  
var _click_count=0;  
$("body").bind("click",function(e){ //直接给body一个事件好了.  
var n=Math.round(Math.random()*100);//随机数  
// var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素  
var $i=$("<b>").text("+"+(++n));//添加到页面的元素  
var x=e.pageX,y=e.pageY;//鼠标点击的位置  
$i.css({  
"z-index":99999,  
"top":y-15,  
"left":x,  
"position":"absolute",  
"color":"red"  
});  
$("body").append($i);  
$i.animate(  
{"top":y-180,"opacity":0},  
1500,  
function(){$i.remove();}  
);  
e.stopPropagation();  
});  
});  
</script>

代码部署

  • 直接将代码添加到正在使用 WordPress 主题的 footer.php 文件最后一个</body>前

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:10   其中:访客  10   博主  0

    • 贰柒陆玖 贰柒陆玖

      只有疯狂到认为自己能改变世界的人,才能真正改变世界。— 乔布斯

      • 芒果不加冰 芒果不加冰

        虽然迷茫与痛苦过,但也曾天真的笑过。— 岸本齐史《火影忍者》

        • 谢谢 谢谢

          益者三友。友直,友谅,友多闻,益矣。— 孔子

          • 芥默 ·宛 芥默 ·宛

            生存还是毁灭,这是个问题。— 莎士比亚

            • ︶﹋代码疯子 ︶﹋代码疯子

              我荒废了时间,时间便把我荒废了。— 莎士比亚

              • 造物弄人 造物弄人

                工欲善其事,必先利其器。— 孔子

                • ther(二三) ther(二三)

                  很好 留个言

                  • 游客 游客

                    不在沉默中爆发,就在沉默中灭亡。— 鲁迅

                    • 仙踪小栈 仙踪小栈

                      不错,又增加了几种样式

                      • MUMu MUMu

                        魔装少女就是本少爷!