摘要：上次逛博客园，有一个园友的博客吸引了我，它那个也自己更改了博客效果，看到他的博客图标已经改成自定义的了。然后我就找了它的JS代码，不过他那个是一个类，挺大，于是我就百度了一下，将个人博客图标更改的方法发布如下： <!-- 修改网页图标为自定义图标 --> <script type="text/jav
阅读全文
posted @ 2024-02-16 22:44
随笔分类 - 【108】博客界面改造文章
摘要：最近闲来无事，就想着把博客界面弄得再有点动画效果，于是就找了延迟函数，把博客的内容列表加载的动画写出来了。 该动画效果还是挺炫的，但是因为刷新页面，下面列表的显示需要拉动到底下才看到，所以这里只能记录一下了。 下面是实现的函数： JS文件在这里，需要的读者自己下载查看： https://files.
阅读全文
posted @ 2023-07-30 17:18
摘要：这天看到一个网页飘叶效果，就放到自己的博客中了，具体看博客界面的效果。 直接把下列的JavaScript代码放到页面中即可。 <script src="https://files.cnblogs.com/files/lzhdim/fallingeffect.js"></script>
阅读全文
posted @ 2022-11-04 15:39
摘要：写到这里，此系列的的博文已经完毕。当然，这个是2022年3月份的博客界面效果升级改造文章。后续如果再对博客界面进行升级改造，那再写此系列的文章。 感谢博客园给了我们这个记录博文的地方，也感谢这个博客园能够对博客界面进行升级改造，让前端工程师能够将博客的界面进行修改，以实现博主自己的博客界面效果。
阅读全文
posted @ 2022-04-26 11:55
摘要：此文写的是此系列的效果的页面加载完成时的代码。 这些个效果，在页面加载完成时事件里绑定相关的时间，以及配置和运行相关的JS脚本代码。 这里就不将代码贴出来了。 https://files.cnblogs.com/files/lzhdim/PageReady.js?t=1648108560 https
阅读全文
posted @ 2022-04-26 11:53
摘要：此文写的是页面的鼠标效果。 1、 CSS样式表； https://files.cnblogs.com/files/lzhdim/cursorEffectCSS.css?t=1648103787 样式表直接放到HTML代码中。笔者放的是页首HTML代码中。 2、 JS脚本； https://files
阅读全文
posted @ 2022-04-25 10:26
摘要：此文写的是所有控制栏的效果。 一、顶部的菜单栏； 顶部菜单栏的HTML代码，见页首HTML代码的定义里。 二、右侧控制栏，包括一个提示栏和一个操作栏； <!--右侧的触发栏--> <div class="rightTrigger"> </div> <!--右侧的菜单控制栏--> <div id="d
阅读全文
posted @ 2022-04-24 14:25
摘要：此文写的是博客顶部的动态导航菜单。 这里菜单包括两个动态效果，一个是菜单效果，一个是菜单的页面加载跳动效果。 1、 CSS样式表； https://files.cnblogs.com/files/lzhdim/webwidget.css?t=1648103673 这个菜单的样式表定义。具体只是顶部菜
阅读全文
posted @ 2022-04-23 12:06
摘要：此文写的是博客顶部展示栏的水波纹效果。 这个效果也是由CSS和JS组成，实际请看博客顶部的展示栏效果。 JS脚本： https://files.cnblogs.com/files/lzhdim/jquery.ripples.min.js?t=1648030691 这个是JS脚本，放置到HTML代码里
阅读全文
posted @ 2022-04-22 10:58
摘要：此文写的是博客侧边栏的时钟信息。 见下图效果： 这个时钟效果，也是有CSS样式表和JS脚本组成。 1、 CSS样式表； https://files.cnblogs.com/files/lzhdim/Clock.css 样式表里定义了时钟的字、星期等内容，在实际的使用时，需要根据自己博客的侧边栏宽度进
阅读全文
posted @ 2022-04-21 13:46
摘要：此文写的是博客中的个人信息加载。 见下图效果： 上面图将个人信息加载的效果进行了展示，信息接口的见另一篇博文： https://www.cnblogs.com/lzhdim/p/16156936.html 实际中需要的信息，那根据上面博文中的接口进行操作即可。
阅读全文
posted @ 2022-04-20 12:34
摘要：从此篇博文开始，将进行博客相关的操作栏等效果的内容编写。 此文写的“随鼠标移动的DIV”这个效果的内容。 1、 CSS定义； https://files.cnblogs.com/files/lzhdim/cursorMoveDiv.css?t=1648051844 上面是CSS定义文件，各个模块的C
阅读全文
posted @ 2022-04-19 14:13
摘要：此文写的是博客页脚的HTML代码定制。 页脚的HTML代码，主要是操作页面加载完成时之前的一些信息。这里笔者的页脚代码，主要添加的是页面底部的版权栏等相关的信息。见下图效果： 笔者的页脚HTML定义代码，除了版权栏之外，主要是放置的页面加载完成时的Javascript代码，用以执行相关的脚本操作。
阅读全文
posted @ 2022-04-18 14:44
摘要：此文写的是博客的侧边公告栏的HTML代码。 这个侧边公告栏代码，只是对侧边公告栏中的内容进行自定义。在后台的选项栏里，有相关的侧边栏的选项进行设置的。这里侧边栏的HTML代码，只是在原来的设置的侧边栏的基础上进行的添加信息的内容。见下图： 笔者对于侧边栏，从个人网站上的ASP文件中获取到信息，然后在
阅读全文
posted @ 2022-04-17 19:29
摘要：此文讲的是博客页首HTML代码的定制。 页首HTML代码，主要放置的是在页面首部的HTML代码和需要的Javascript代码。笔者的页首HTML代码，放置的是页面顶部的定制菜单，以及导航栏。见下图的代码： 这里笔者把页面需要的各个模块的CSS样式表和Javascript脚本放在了页首代码栏内。因为
阅读全文
posted @ 2022-04-17 15:26
摘要：博客园的个人博客，最基本的是一个初始的界面的皮肤，这个包含着自己的HTML页面代码和CSS代码，以及博客自己的基础的Javascript代码。 在这次的博客界面改造中，笔者的建议是先把博客界面的默认CSS获取出来，然后对其进行自定义修改，使其能够满足博客界面的要求，同时在修改博客界面的HTML代码基
阅读全文
posted @ 2022-04-16 17:45
摘要：2022年3月中旬，在家闲来无事，看了下个人博客，萌发了对博客界面进行升级改造的念头。 在博客园也有13年之久了，刚在博客园安家的时候，已经对个人博客界面进行了改造，比如CSS样式，个人信息等。这次决定从界面设计入手，配合前端的知识经验，对博客的界面及代码进行升级改造，规范起来，同时也利于以后的升级
阅读全文
posted @ 2022-03-26 16:13
