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

孤狼

171
文章

115
评论

2019年6月21日22:40:0418546,115 3406字阅读11分21秒

摘要

介绍几种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>