WordPress美化——主题添加鼠标点击特效

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

第一种:字体颜色随机,大小循环变小变大

<script type="text/javascript">
$(function() {
    var a_idx = 0,
        b_idx = 0;
        c_idx = 0;
    $("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><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": 99999,
            "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 type="text/javascript">
$(function() {
    $("body").bind("click",function(e){ //直接给body一个事件好了
        var n  = Math.round(Math.random()*100); //随机数
        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>前即可。

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服:1377177670@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载或失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有米币奖励和额外收入!

哈米酷 其他美化 WordPress美化——主题添加鼠标点击特效 https://www.hmkoo.com/698.html

互联网优质源码素材教程共享下载平台

常见问题
  • 本站除独家和商用资源外的所有资源版权均属于原作者所有,这些资源均只能用于参考学习使用,请于下载后的24个小时之内,从您的电脑中彻底删除上述内容资源,切勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完的压缩包与网盘上的容量,若小于网盘提示的容量则是不完整的原因。这是浏览器下载的bug,建议用百度网盘。
查看详情

相关文章

评论
暂无评论
WordPress美化——主题添加鼠标点击特效-海报

分享本文封面