当前位置: 首页 > JQ > typehco鼠标点击特效,随机彩色标签云

typehco鼠标点击特效,随机彩色标签云

admin
  • admin
  • 2021-01-23
  • 128字
  • 431次浏览
  • 2赞
  • 无评论
typehco鼠标点击特效,随机彩色标签云

1、鼠标点击特效
将以下代码放在主题的handsome/component/footer.php中的之前即可。

字体自行修改

<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": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

随机彩色标签云
之前看过一个彩色标签云的插件,这里用js为标签随机添加上预先定义的颜色,每次刷新都会进行换色:

使用方法:请将下方代码添加到后台主题设置自定义JavaScript中。

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

标签: JavaScript, HTML, jq

本文已 超过1年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理。

页面

相关文章

评论啦~

文章目录

分享

板块设置

背景:
纸色:
字体色:
cookie音乐:
切换模式: