鼠标特效

纯代码实现修改WordPress鼠标指针

大家是不是在访问别人的博客或者网站时，发现鼠标的指针就变了，变得很个性，今天西瓜君就教大家如何修改wordpress的鼠标指针

[wm_notice]哈哈你发现鼠标指针是不是很特别[/wm_notice]

一、鼠标指针图标的制作

1.大家可以在ps里面制作上一个,个性的鼠标指针也是可以的，制作好后最后保存成png格式即可，下面是我给大家制作的一个可爱的鼠标指针，喜欢就拿走。

2.或者可以在网上下载一些鼠标指针，也是可以的（自己动手丰衣足食）。

二、修改主题的style.css文件

1.vieu主题设置方法直接在后台主题设置-自定义代码-css样式里面添加保存。

2.其他wp主题直接把以上的css代码放入style.css文件即可

代码

//body里面的样式
body {
    cursor: url(鼠标指针的图片链接), auto;
}
//a标签的样式
a:hover {
    cursor: url(鼠标指针的图片链接), auto;
}

[wm_warn]切记：保存后，清理浏览器缓存，即可实现效果[/wm_warn]

给WordPress主题新增三种鼠标点击特效

大家好西瓜君今天给大家新增三种鼠标点击特效，昨天分享了一种是【富强,民主,鼠标点击特效】的一个鼠标特效，下面直接看教程。我就在这儿不给大家展示第一种特效。

代码

第二种：文字上美化了一下

<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 type="text/javascript">
/* 鼠标特效 */
$(function() {
    var a_idx = 0,
        b_idx = 0;
    c_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("欢迎您", "么么哒", "你真好", "棒棒哒", "真可爱", "你最美", "喜欢你", "真聪明", "爱你哦", "好厉害", "你真帅", "祝福你"),
                b = new Array("#09ebfc", "#ff6651", "#ffb351", "#51ff65", "#5197ff", "#a551ff", "#ff51f7", "#ff518e", "#ff5163", "#efff51"),
                c = new Array("12", "14", "16", "18", "20", "22", "24", "26", "28", "30");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            b_idx = (b_idx + 1) % b.length;
            c_idx = (c_idx + 1) % c.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "font-size": c[c_idx] + "px",
                "color": b[b_idx]
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            }, 1500, function() {
                $i.remove();
            });
        });
    });
    var _hmt = _hmt || [];
})
</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 文件最后一个前就OK了

【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>

部署教程

一般情况下只要将复制好的代码粘贴到之前就可以了。如果是WordPress主题的网站直接添加到footer.php文件的之前就OK了。代码中的字体以及属性均可以自定义设置，如果添加后未生效请尝试清理CDN缓存或者浏览器缓存就可以了。