自定义博客园主题样式
背景知识了解
图片url获取
1.将选定的背景图上传至博客园服务器
将选定的图片上传至自己博客园的相册中
2.获取上传至博客园服务器背景图的url
打开相册,选择需要的背景图片-->单击-->在打开的图片上方右键-->复制图片地址
js权限申请
目的:后面的添加js特效需要用到
我的博客园-->管理
设置-->博客园侧边栏公告-->点击 申请js权限
编写申请js权限内容
例:
尊敬的博客园管理员: 请问是否可以帮我开通js权限,我想对文章的样式和布局需要js代码进行调整外观。 谢谢您的帮助。
尊敬的博客园管理员: 您好,我希望用js美化下我的博客页面,麻烦通过下我的js权限申请。 谢谢您的帮助。
随便写一个就行,比较快的话大概一两个小时就能通过,审核不通过多换几个内容试试
通过审核的状态:
自定义设置位置
进入 个人首页--->管理--->设置
页面定制css代码 位置
博客侧边栏公告(支持html代码) 位置
页首 html 代码 位置
页脚 html 代码 位置
模板设置
选择一个你喜欢的模板,后面的代码都是基于你选择的这个模板修改的,可以和我一样选择red_autumnal_leaves
js文件的下载和上传
目的:把别人服务器上的文件替换你服务器上的,防止别人删除文件你也不能用了。
打开链接,ctrl+s保存
我的首页-->管理-->文件-->选择文件-->选择你刚才下载的js文件-->上传
点击下载可以看到对应的链接
替换前后对比:
https://blog-static.cnblogs.com/files/merak21/scrollspy.js
https://blog-static.cnblogs.com/files/你的用户名/scrollspy.js
即只要你将文件上传到了你自己的博客园服务器,直接替换用户名就可
彩带跳转
gitee彩带跳转
将以下代码复制粘贴到 页首 html 代码
<a href="https://gitee.com/sunny_21"> <img style="position: fixed; top: 0; left: 0; border: 0; z-index:9999;" src="https://images.cnblogs.com/cnblogs_com/merak21/1978140/o_210521135414gitee.png" alt="fork me on gitee"> </a>
效果图展示:
github彩带跳转
- 将以下代码复制粘贴到 页首 html 代码
<a href="https://github.com/sunny21"> <img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999;" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png" alt="fork me on github"> </a>
-
说明:
a href=""中的链接换成你自己的 github 主页地址
github彩带颜色
绿色
将src中链接替换成以下链接:
https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png
黑色
将src中链接替换成以下链接:
https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png
橘黄色
将src中链接替换成以下链接:
https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png
灰色:
将src中链接替换成以下链接:
https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png
白色:
将src中链接替换成以下链接:
https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png
透明图片背景
- 将以下代码复制粘贴到 页面定制 css 代码
/* 背景图片,背景透明度 */ #home { opacity: 0.80; margin: 0 auto; width: 85%; min-width: 950px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } body { color: #000; background: url(https://你自己的背景图片.jpg) fixed; background-size: 100%; background-repeat: no-repeat; font-family: "helvetica neue",helvetica,verdana,arial,sans-serif; font-size: 12px; min-height: 101%; }
-
说明 :
#home 中的 opacity: 0.80; 表示主页面透明度 width: 85%;表示主页面所占宽
将body模块下的参数"background”url的值修改为你上传到博客园的背景图片url,保存就可以了 -
效果图展示
个人信息特效
将以下代码复制到 页面定制css代码
/* 个人信息特效 */ #header { position: relative; height: 167px; margin: 0; background: transparent url(https:你的头部背景图片.jpg) no-repeat 0 0; -webkit-box-shadow: inset 0 3px 7px rgb(0 0 0 / 20%), inset 0 -3px 7px rgb(0 0 0 / 20%); -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); box-shadow: inset 0 3px 7px rgb(0 0 0 / 20%), inset 0 -3px 7px rgb(0 0 0 / 20%); } #header h1 a { font-family: "comic sans ms"; color: #b15900; } #blogtitle h2 { font-weight: normal; font-size: 14px; color: #ff7f34; line-height: 1.5em; margin-top: 10px; margin-left: 30px; width: 50%; margin-left: 6em; float: left; } #navlist a:link, #navlist a:visited, #navlist a:active { color: #00b11b; font-weight: bold; font-size: 15px; } #navlist a:hover { color: #00ff27; text-decoration: none; } .blogstats { float: right; color: #b1b1b1; margin-top: 14px; margin-right: 180px; position: absolute; right: 77px; top: 35px; font-size: 14px; }
- 效果图展示
标题样式特效
- 将以下代码复制到 页面定制css代码
/* 标题样式 */ #cnblogs_post_body h1 { background: linear-gradient(to bottom , #f37001,rgb(255 255 255 / 10%)); border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #ffb9a9, 1px 1px 4px 1px rgb(255 95 95 / 78%); color: #ffffff; font-family: "微软雅黑", "宋体", "黑体", arial; font-size: 20px; font-weight: bold; height: 30px; line-height: 29px; margin: 18px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #a70505; text-align:center } #cnblogs_post_body h2 { background: linear-gradient(to bottom , #b930ff,rgb(255 255 255 / 10%)); border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #ebbaff, 1px 1px 4px 1px rgb(156 56 181 / 72%); color: #ffffff; font-family: "微软雅黑", "宋体", "黑体", arial; font-size: 15px; font-weight: bold; height: 23px; line-height: 23px; margin: 12px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #9d65ca; text-align:center } #cnblogs_post_body h3 { background: linear-gradient(to bottom , #5efd35,rgb(255 255 255 / 10%)); border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #ccffab, 1px 1px 6px 1px rgb(4 117 8 / 84%); color: #ffffff; font-family: "微软雅黑", "宋体", "黑体", arial; font-size: 12px; font-weight: bold; height: 21px; line-height: 21px; margin: 12px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #36a019; text-align:center } #cnblogs_post_body h4 { background: linear-gradient(to bottom , #37fff6,rgb(255 255 255 / 10%)); border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #afffff, 1px 1px 6px 1px rgb(4 101 101 / 78%); color: #ffffff; font-family: "微软雅黑", "宋体", "黑体", arial; font-size: 13px; font-weight: bold; height: 16px; line-height: 18px; margin: 18px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #059081; text-align:center } /* 标题样式设置结束 */
- 说明: text-align:center 标题居中显示 font-size: 13px; 字体值大小 line-height: 18px; 字体位置 ,可自行更改
- 效果图展示
目录导航效果
目录导航效果一
- 将以下代码复制粘贴到 页脚html代码
<script src="https://blog-static.cnblogs.com/files/merak21/bootstrap.min.js"></script> <link href="https://blog-static.cnblogs.com/files/merak21/marvin.nav.my1502.css" rel="stylesheet"> <script type="text/javascript" src="https://blog-static.cnblogs.com/files/merak21/marvin.nav.my1502.whitetears.js"></script>
- 说明:
只有h1标题会显示 - 效果图展示
目录导航效果二
将以下代码复制到 页首html代码
<link href="http://files.cnblogs.com/files/merak21/cnblog-scroller3.css" type="text/css" rel="stylesheet"> <script src="http://files.cnblogs.com/files/merak21/scrollspy.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/files/merak21/stickup.min.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/files/merak21/cnblog-scroller.js" type="text/javascript"></script>
将以下代码复制到 页面定制 css 代码
/*添加滚动条*/ #sidebarmain ul { line-height: 1.5em; overflow: auto; max-height: 600px; }
-
说明:
h1-h6标题都会显示
max-height 可以自定义导航栏的最大高度
为了不影响观看效果,可以将博客侧边栏的选项全部关闭
我的博客-->管理-->选项-->侧边栏控件-->全部不选
-
效果图展示:
正文图片悬停放大特效
- 将以下代码复制到 页面定制 css 代码
.post img { cursor: pointer; transition: all 0.5s; } .post img:hover { transform: scale(1.3); }
- 效果图展示
禁止页内复制
- 将以下代码复制到 页首html代码
<script language="javascript"> document.body.onselectstart = document.body.ondrag = function() {return false; } </script>
markdown特效
代码高亮显示
- 复制以下代码到 页面定制 css 代码
/* markdown配置 */ .cnblogs-markdown .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #ecf2ff !important; border: 1px solid #fdfdfd !important; color: #272727; white-space: pre; word-break: normal; font-family: "consolas",sans-serif!important; font-size:14px!important; }
- 复制以下代码到 页脚 html 代码
<!-- markdown配置 --> <link href="https://blog-static.cnblogs.com/files/merak21/mk.min.css" rel="stylesheet"/> <script src="https://blog-static.cnblogs.com/files/merak21/highlight.min.js"></script> <script>hljs.inithighlightingonload();</script>
- 说明:
如果想要其他颜色样式,可以从下载
选择一个你喜欢的样式,上传至博客园后台后,将 link标签的链接 更换成你博客园里的css链接就可
如果对官网的样式也不满意,可以进入css文件自行修改相应值
- 效果图展示:
代码行号显示
- 将以下代码复制到 页脚 html 代码
<script src="https://blog-static.cnblogs.com/files/merak21/highlightjs-line-numbers.min.js"></script> <script>hljs.initlinenumbersonload();</script>
- 效果图展示
代码复制显示
- 将以下代码复制到 页面定制 css 代码
/*添加按钮*/ .cnblogs-markdown pre { position: relative; } .cnblogs-markdown pre > span { position: -webkit-sticky; position: sticky; top: 0; right: 0; border-radius: 2px; padding: 0 10px; font-size: 12px; background: rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; display:none; } .cnblogs-markdown pre:hover > span { display:block; } .cnblogs-markdown pre > .copyed { background: #0c7100; }
- 将以下代码复制到 页脚 html 代码
<script src="https://blog-static.cnblogs.com/files/merak21/clipboard.min.js"></script> <script src="https://blog-static.cnblogs.com/files/merak21/cp.js"></script>
- 效果图展示
代码滚动条显示
纵向滚动条显示
效果:纵向显示自动,横向显示滑到markdown最底部才会显示,高度大于300显示
- 复制以下代码到 页脚html代码
<script> // 高度大于300的添加滚动条 $('pre').each(function (ind, dom) { if ($(dom).css('height').slice(0, -2) > 300) { $(dom).css('height', '300px'); $(dom).css('overflow', 'auto'); } }) </script>
- 说明:如果需要其他高度,请在 slice(0, -2) > 300 'height', '300px' 中更改相应值
- 效果图展示
横向+纵向滚动条显示
效果:超过固定长宽都会显示,与行号显示,纵向显示,显隐按钮会有冲突,用这个最好把其他几个注释
- 复制以下代码到 页面定制css代码
.cnblogs-markdown .hljs { max-width: 970px; max-height: 300px; overflow: auto; }
-
效果图展示
代码显隐按钮
给高度大于600的代码添加显示隐藏按钮,与行号显示,滚动条显示冲突,最好只选一个
- 将以下代码复制到 页脚html代码
<script> // 高度大于600的添加显示隐藏按钮 $('pre').each(function (ind, dom){ if ($(dom).css('height').slice(0, -2) > 500) { var mybtn = document.createelement('button'); $(mybtn).html('↓showcode↓'); $(mybtn).css({'border-radius': '4px','background-color':'lightblue','cursor':'pointer','border-color':'lightblue'}); $(mybtn).insertbefore($(dom)); $(dom).css('display', 'none'); $(mybtn).click(function () { if($(mybtn).html()=='↓showcode↓'){ $(dom).css('display', 'block'); $(mybtn).html('↓closecode↓'); }else { $(dom).css('display', 'none'); $(mybtn).html('↓showcode↓'); } }) } }); </script>
-
说明:这个是设置的高度大于600的代码添加按钮,如果需要其他值,请自行更改相应值
-
效果图展示
雪花飘落特效
雪花特效一
- i、将以下代码复制到 页面定制css代码
#snow{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(255,255,240,0.1); pointer-events: none; }
ii、将以下代码复制到 博客侧边栏公告处(要申请支持js代码)
<!--雪花--> <div class="snow"> <canvas id="snow"></canvas> </div> <script src="https://files.cnblogs.com/files/merak21/snow.js"></script>
- 效果图展示
雪花特效二
- 将以下代码复制到 页脚html代码
<script type="text/javascript"> window.onload = function () { var minsize = 10; //最小字体 var maxsize = 20;//最大字体 var newone = 100; //生成雪花间隔 var flakcolor = "#f5f5f5fa"; //雪花颜色 var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("✽");//定义一个雪花 var dhight = $(window).height(); //定义视图高度 var dw =$(window).width()-80; //定义视图宽度 setinterval(function(){ var sizeflak = minsize+math.random()*maxsize; //产生大小不等的雪花 var startleft = math.random()*dw; //雪花生成是随机的left值 var startopacity = 0.7+math.random()*0.3; //随机透明度 var endtop= dhight-100; //雪花停止top的位置 var endleft= math.random()*dw; //雪花停止的left位置 var durationfull = 5000+math.random()*3000; //雪花飘落速度不同 flak.clone().appendto($("body")).css({ "left":startleft , "opacity":startopacity, "font-size":sizeflak, "color":flakcolor }).animate({ "top":endtop, "left":endleft, "apacity":0.1 },durationfull,function(){ $(this).remove() }); },newone); } </script>
- 效果图展示
樱花飘落特效
樱花飘落特效一
效果:飘落两三页会停
-
将以下代码复制粘贴到 页首html代码
<script src="https://files.cnblogs.com/files/merak21/sakuraplus.js"></script>
-
效果图展示:
樱花飘落特效二
效果:一直飘落
- 将以下代码复制粘贴到 页首html代码
<script src="https://files.cnblogs.com/files/merak21/sakura.js"></script>
-
效果图展示:
鼠标特效
点击特效
文字特效
- 将以下代码复制粘贴到 页脚html代码
<!-- 鼠标点击特效 --> <script type="text/javascript"> $(document).ready(function(){ var a_index = 0; $("body").click(function(e){ var a = new array("❤北冥是个❤","❤阳光❤","❤洒脱❤","❤孑然❤","❤真淳❤","❤不羁❤","❤随和❤","❤浪漫❤","❤富有责任心❤","❤爱你❤","❤的美男子❤"); var $i = $("<span/>").text(a[a_index]); a_index = (a_index + 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": randomcolor() }); $("body").append($i); $i.animate({"top": y-180,"opacity": 0},1500,function() { $i.remove(); }); function randomcolor(){ let r = math.floor(math.random()*256) let g = math.floor(math.random()*256) let b = math.floor(math.random()*256) return "rgb("+r+','+g+','+b+")" } }); }); </script>
-
效果图展示
烟花特效
- 将以下代码复制粘贴到 页尾html代码
<script src="https://blog-static.cnblogs.com/files/merak21/cursor-effects.js"></script> <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
-
效果图展示
动态追随
动态线条特效
将以下代码复制到 页脚html代码
<div style = "display:none;">动态线条</div> <script> !function(){ function n(n,e,t){ return n.getattribute(e)||t } function e(n){ return document.getelementsbytagname(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zindex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerwidth||document.documentelement.clientwidth||document.body.clientwidth, c=m.height=window.innerheight||document.documentelement.clientheight||document.body.clientheight } function i(){ r.clearrect(0,0,a,c); var n,e,t,o,m,l; s.foreach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillrect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/n.max,r.beginpath(),r.linewidth=t/2,r.strokestyle="rgba("+d.c+","+(t+.2)+")",r.moveto(i.x,i.y),r.lineto(n.x,n.y),r.stroke())) }), x(i) } var a,c,u,m=document.createelement("canvas"), d=t(),l="c_n"+d.l,r=m.getcontext("2d"), x=window.requestanimationframe||window.webkitrequestanimationframe||window.mozrequestanimationframe||window.orequestanimationframe||window.msrequestanimationframe|| function(n){ window.settimeout(n,1e3/45) }, w=math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.csstext="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendchild(m),o(),window.onresize=o, window.onmousemove=function(n){ n=n||window.event,y.x=n.clientx,y.y=n.clienty }, window.onmouseout=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), settimeout(function(){i()},100) }(); </script> <div style = "display:none;"> 动态线条end</div>
2、效果图展示
鼠标显示
鼠标指针特效
- 将以下代码复制到 页面 定制css 代码
/* 鼠标指针特效 */ body{ background-repeat: repeat; background-attachment: fixed; background-size:cover; cursor: url(https://images.cnblogs.com/cnblogs_com/merak21/1978140/o_210521150418shub.png),auto; } /*提交按钮*/ #btn_comment_submit{ width:73px;height:35px;border:none; background-color:#0cbb00; -webkit-border-radius: 10px;color:white; font-weight: bold; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); font-size: 10pt; }
将以下代码复制到 页脚 html 代码
<!-- 鼠标指针特效 --> <script src="https://blog-static.cnblogs.com/files/merak21/cursor-effects.js"></script> <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
- 说明:body url中替换成你自已的鼠标指针图片链接
-
效果图展示
点赞特效
- 将以下代码复制到 页面定制 css 代码
#div_digg{ padding: 5px; border-radius: 5px; position: fixed; left: 0; bottom: 80px; width:80px; z-index:100; } .diggit{ background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat; width: 60px; height: 60px; } #div_digg .diggnum{ position: absolute; bottom: -20px; left: 6px; background: #d0d0d0; padding: 2px 0; display: block; color: #555; font-size: 12px; text-align: center; width: 60px; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-weight: bold; } /* 删除反对按钮,有点邪恶了 */ .buryit{ display: none; }
- 说明:如果需要调整点赞位置,可用f12进行调试,详细可参考本博客最后一条
- 效果图展示
置顶特效
- 将以下代码复制到 页首html代码
<!-- 置顶特效 --> <script> function func(){ var tag = document.getelementbyid('i1'); var content = tag.innertext; var f = content.charat(0); var l = content.substring(1,content.length); var new_content = l + f; tag.innertext = new_content; } setinterval('func()',1600); </script> <span id="back-to-top"><a href="#top"></a></span> <style> #back-top { position: fixed; bottom: 10px; right: 5px; z-index: 99; } #back-top span { width: 50px; height: 64px; display: block; background:url(https://images.cnblogs.com/cnblogs_com/merak21/1978205/o_210522231213hj.png) no-repeat center center; } #back-top a{outline:none} </style> <script type="text/javascript"> $(function() { // hide #back-top first $("#back-top").hide(); // fade in #back-top $(window).scroll(function() { if ($(this).scrolltop() > 500) { $('#back-top').fadein(); } else { $('#back-top').fadeout(); } }); // scroll body to 0px on click $('#back-top a').click(function() { $('body,html').animate({ scrolltop: 0 }, 800); return false; }); }); </script> <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
- 效果图展示
版权信息效果
1、 将以下代码复制到 页面定制css代码
#mysignature { border:solid 1px #e5e5e5; padding:10px; background:#fffefe url(http://images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png) no-repeat scroll 15px 50%; padding-left:80px;} #mysignature div{line-height: 25px;}
2、将以下代码复制贴到 博客签名
<div>作者:<a href="https://www.cnblogs.com/merak21/" target="_blank">merak</a></div> <div>出处:<a href="https://www.cnblogs.com/merak21/" target="_blank">https://www.cnblogs.com/merak21/</a></div> <div>本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。 </div>
- 说明:
博客签名位置:管理-->博客签名-->标题(随便写)-->内容(上面代码)-->保存
- 效果图展示
打赏效果
- 将以下代码复制到 页首html
<!-- 打赏插件 --> <script> window.tctipconfig = { imageprefix: "http://files.cnblogs.com/files/kdy11/", cssprefix: "http://files.cnblogs.com/files/kdy11", buttonimageid: 4, buttontip: "dashang", list:{ alipay: {qrimg: "http://files.cnblogs.com/files/xxx/zfb.bmp"}, weixin:{qrimg: "http://files.cnblogs.com/files/xxx/wx.bmp"}, } }; </script> <script src="https://blog-static.cnblogs.com/files/merak21/ch_tctip01.js"></script>
-
说明
将支付宝收款码和微信收款码上传到博客园相册
alipay:{qrimg:"xxx.bmp"}, xxx.bmp 里改成自己上传的支付宝收款码图片链接
weixin:{qrimg:"xxx.bmp"}, xxx.bmp 里改成自己上传的微信收款码图片链接
-
效果图展示
评论效果
- 将以下代码复制到 页首html代码
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">
将以下代码复制到 页脚html代码
<script type="text/javascript"> $(function(){ $('#blogtitle h1').addclass('bounceinleft animated'); $('#blogtitle h2').addclass('bounceinright animated'); // 删除反对按钮 $('.buryit').remove(); initcommentdata(); }); function initcommentdata() { $('.feedbackitem').each(function() { var text = $(this).find('.feedbacklistsubtitle .layer').text(); // 将楼层信息放到data里面 // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, '')); if($(this).find('.feedbacklistsubtitle .louzhu').length>0) $(this).addclass('myself'); var avatar = $(this).find('> .feedbackcon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif'; $(this).find('> .feedbackcon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>') }); } $(document).ajaxcomplete(function(event, xhr, settings) { // 监听获取评论ajax事件 if(settings.url.indexof('/mvc/blog/getcomments.aspx') >= 0) { initcommentdata(); } }); </script>
- 效果展示
附:特效位置颜色调试
调试好后将css样式放在 页面定制css代码 保存即可
可参考
参考链接
上一篇: Vue cli + Element plus的查询和删除
下一篇: 4.运算符
推荐阅读
-
博客园(自定义导航栏)
-
TP5框架实现自定义分页样式的方法示例
-
xmind思维导图怎么选择主题样式?
-
Android编程ProgressBar自定义样式之动画模式实现方法
-
vue v-model实现自定义样式多选与单选功能
-
MindManager2016思维导图怎么设置主题样式?
-
WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展
-
Android 中自定义Dialog样式的Activity点击空白处隐藏软键盘功能(dialog不消失)
-
建设银行App主题样式怎么设置?
-
使用jquery自定义鼠标样式满足个性需求