说明: 本博客使用handsome
主题,预置的后台功能很齐全。并且很多使用typecho的博主也都在用,基于这个主题修改的很漂亮,在此表示羡慕TAT。所以想要对这个主题做一些修改还是很方便的。
本博客也是从其他博主那搬运的样式和源码进行主题的一些小修改,在这里进行一下整理。就当备忘录吧,如果其他小伙伴需要其他效果也可以自行百度。
特效
1.输入框打字特效
下载提供的js脚本,放到网站的某个位置然后在博客的footer
模板中body
的末尾位置引用即可,如果是handsome
主题可以在后台设置外观->开发者设置->自定义输出body尾部的HTML代码
中填写
<!-- In footer.php -->
<script type="text/javascript" src="(这个脚本的路径)"></script>
源码(未压缩混淆)
(function webpackUniversalModuleDefinition(root, factory) {
if (typeof exports === 'object' && typeof module === 'object') module.exports = factory();
else if (typeof define === 'function' && define.amd) define([], factory);
else if (typeof exports === 'object') exports["POWERMODE"] = factory();
else root["POWERMODE"] = factory()
})(this, function() {
return (function(modules) {
var installedModules = {};
function __webpack_require__(moduleId) {
if (installedModules[moduleId]) return installedModules[moduleId].exports;
var module = installedModules[moduleId] = {
exports: {},
id: moduleId,
loaded: false
};
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
module.loaded = true;
return module.exports
}
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.p = "";
return __webpack_require__(0)
})([function(module, exports, __webpack_require__) {
'use strict';
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight
});
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
var particles = [];
var particlePointer = 0;
var frames = 120;
var framesRemain = frames;
var rendering = false;
POWERMODE.shake = true;
function getRandom(min, max) {
return Math.random() * (max - min) + min
}
function getColor(el) {
if (POWERMODE.colorful) {
var u = getRandom(0, 360);
return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')'
} else {
return window.getComputedStyle(el).color
}
}
function getCaret() {
var el = document.activeElement;
var bcr;
if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {
var offset = __webpack_require__(1)(el, el.selectionStart);
bcr = el.getBoundingClientRect();
return {
x: offset.left + bcr.left,
y: offset.top + bcr.top,
color: getColor(el)
}
}
var selection = window.getSelection();
if (selection.rangeCount) {
var range = selection.getRangeAt(0);
var startNode = range.startContainer;
if (startNode.nodeType === document.TEXT_NODE) {
startNode = startNode.parentNode
}
bcr = range.getBoundingClientRect();
return {
x: bcr.left,
y: bcr.top,
color: getColor(startNode)
}
}
return {
x: 0,
y: 0,
color: 'transparent'
}
}
function createParticle(x, y, color) {
return {
x: x,
y: y,
alpha: 1,
color: color,
velocity: {
x: -1 + Math.random() * 2,
y: -3.5 + Math.random() * 2
}
}
}
function POWERMODE() {
{
var caret = getCaret();
var numParticles = 5 + Math.round(Math.random() * 10);
while (numParticles--) {
particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);
particlePointer = (particlePointer + 1) % 500
}
framesRemain = frames;
if (!rendering) {
requestAnimationFrame(loop)
}
} {
if (POWERMODE.shake) {
var intensity = 1 + 2 * Math.random();
var x = intensity * (Math.random() > 0.5 ? -1 : 1);
var y = intensity * (Math.random() > 0.5 ? -1 : 1);
document.body.style.marginLeft = x + 'px';
document.body.style.marginTop = y + 'px';
setTimeout(function() {
document.body.style.marginLeft = '';
document.body.style.marginTop = ''
}, 75)
}
}
};
POWERMODE.colorful = false;
function loop() {
if (framesRemain > 0) {
requestAnimationFrame(loop);
framesRemain--;
rendering = true
} else {
rendering = false
}
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; ++i) {
var particle = particles[i];
if (particle.alpha <= 0.1) continue;
particle.velocity.y += 0.075;
particle.x += particle.velocity.x;
particle.y += particle.velocity.y;
particle.alpha *= 0.96;
context.globalAlpha = particle.alpha;
context.fillStyle = particle.color;
context.fillRect(Math.round(particle.x - 1.5), Math.round(particle.y - 1.5), 3, 3)
}
}
requestAnimationFrame(loop);
module.exports = POWERMODE
}, function(module, exports) {
(function() {
var properties = ['direction', 'boxSizing', 'width', 'height',
'overflowX', 'overflowY', 'borderTopWidth', 'borderRightWidth',
'borderBottomWidth', 'borderLeftWidth', 'borderStyle', 'paddingTop',
'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle',
'fontVariant', 'fontWeight', 'fontStretch', 'fontSize',
'fontSizeAdjust', 'lineHeight', 'fontFamily', 'textAlign',
'textTransform', 'textIndent', 'textDecoration', 'letterSpacing',
'wordSpacing', 'tabSize', 'MozTabSize'];
var isFirefox = window.mozInnerScreenX != null;
function getCaretCoordinates(element, position, options) {
var debug = options && options.debug || false;
if (debug) {
var el = document.querySelector('#input-textarea-caret-position-mirror-div');
if (el) {
el.parentNode.removeChild(el)
}
}
var div = document.createElement('div');
div.id = 'input-textarea-caret-position-mirror-div';
document.body.appendChild(div);
var style = div.style;
var computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
style.whiteSpace = 'pre-wrap';
if (element.nodeName !== 'INPUT') style.wordWrap = 'break-word';
style.position = 'absolute';
if (!debug) style.visibility = 'hidden';
properties.forEach(function(prop) {
style[prop] = computed[prop]
});
if (isFirefox) {
if (element.scrollHeight > parseInt(computed.height)) style.overflowY = 'scroll'
} else {
style.overflow = 'hidden'
}
div.textContent = element.value.substring(0, position);
if (element.nodeName === 'INPUT') div.textContent = div.textContent.replace(/\s/g, "\u00a0");
var span = document.createElement('span');
span.textContent = element.value.substring(position) || '.';
div.appendChild(span);
var coordinates = {
top: span.offsetTop + parseInt(computed['borderTopWidth']),
left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
};
if (debug) {
span.style.backgroundColor = '#aaa'
} else {
document.body.removeChild(div)
}
return coordinates
}
if (typeof module != "undefined" && typeof module.exports != "undefined") {
module.exports = getCaretCoordinates
} else {
window.getCaretCoordinates = getCaretCoordinates
}
}())
}
])
});
POWERMODE.colorful = true; // make power mode colorful
POWERMODE.shake = false; // turn off shake
document.body.addEventListener('input', POWERMODE);
引用
转载自网页输入框打字特效(懒人版) - 神代綺凜の萌化小基地
原始来源QQ爹の博客 - 分享一个输入框的打字特效
2.鼠标点击文字特效
将以下代码粘贴到博客的footer
模板中</body>
前即可,如果是handsome
主题可以在后台设置外观->开发者设置->自定义输出body尾部的HTML代码
中填写
<!-- In 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/>").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>
引用
转载自给Typecho、Emlog等博客网站添加鼠标点击文字特效 - Rat's Blog
插件
1.版权申明插件
使用方法: 将插件解压并文件夹重命名为Copyright,上传到网站目录下的/usr/plugins/
中,在后台启用并设置即可
引用
转载自Typecho版权声明Copyright插件 - 知言笔记
2.外链转内链插件
使用方法: 将插件解压并文件夹重命名为ShortLinks,上传到网站目录下的/usr/plugins/
中,在后台启用并设置即可
引用
转载自【Typecho插件】ShortLinks - 外链转内链,支持正文和评论者链接 - 爱萝莉的Ryan
3.其他插件
本博客还使用了一些其他的插件,例如CommentToMail
等。基本都是在这个Typecho开源插件集群下载的,如果有其他插件的需求可以去看一看
版权声明:版权归Wodrei Blog所有,转载请注明出处或保留此段声明!
本文链接:https://www.wodrei.com/archives/5/
本文采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
来看看
|´・ω・)ノ感谢,笔芯
谢谢,了解了
评论框太花了。图去掉就好了。
主题自带的在电脑上看还好,手机上确实有点挡视野了
厉害了哦。
引用留地址点赞!