WordPress网站美化点击效果+鼠标样式美化+网页背景(7b2主题)

这个在wp很多了啊,重点都在素材上,今天奇它论坛@老白我也分享一下自己的WordPress网站点击效果+鼠标样式美化(以7b2主题为例,其实wp通用)

一、效果演示

1.1 鼠标点击随机文字特效

WordPress网站美化点击效果+鼠标样式美化+网页背景(7b2主题)

1.2 鼠标样式美化

其实就是两张图片:选中链接和不选中链接两种情况对应不同图片

WordPress网站美化点击效果+鼠标样式美化+网页背景(7b2主题)

1.3 网页背景粒子特效

WordPress网站美化点击效果+鼠标样式美化+网页背景(7b2主题)

二、实现代码

2.1 点击随机文字

加在主题文件/footer.php底部,</body>之前即可

<!--网站点击文字特效-www.qitabbs.com奇它论坛-->
<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": 99999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机
//"#2299DD" //固定颜色
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>

 

2.2 鼠标效果美化

主题文件/style.css底部添加即可,下载下方的鼠标样式文件,而后获得地址即可

2.3 网页背景粒子特效

footer.php文件底部,同样的

<!--网页背景粒子特效 开始-www.qitabbs.com-->
<script type="text/javascript" color="0,205,205" opacity='0.7' zIndex="-2" count="99" 
src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<!--网页背景粒子特效 结束-www.qitabbs.com-->

三、相关美化

WordPress网站美化点击效果+鼠标样式美化+网页背景(7b2主题)
WordPress网站美化点击效果+鼠标样式美化+网页背景(7b2主题)

WordPress网站b2主题美化之文章顶部“新春/活动倒计时模块”

WordPress网站美化点击效果+鼠标样式美化+网页背景(7b2主题)
WordPress网站美化点击效果+鼠标样式美化+网页背景(7b2主题)

WordPress美化之菜单栏引入阿里巴巴Symbol彩色图标教程-B2主题

内容太多,文末标签!

经验·技巧网站建设

免插件实现WordPress网站侧栏实时疫情图(2022更新版)

2022-1-15 14:39:25

经验·技巧网站建设

WordPress网站评论限制-评论字数+全英文评论+超链接

2022-1-15 19:37:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
今日签到
有新私信 私信列表
搜索