在此之前不得不吐槽一下百度,有用的没搜到,倒是广告一大堆。之前有段时间(医院事件)没有广告的,不知道现在又有了。百度缺钱?他不缺,这是自己作践自己,终会自取灭亡的。现在必应也挺不错的。
言归正传,本网站主题是7TEC,觉得很不错,感兴趣的可以去他的博客看看。
看到左下角的小人物了吧,酷!其实是一个插件,详情点击这里,很厉害的一个小哥哥。emm,看到那逻辑简直头疼。。。
剩下的是一些js文件,在footer.php中引入就好了。注意z-index这个属性,其他的都问题不大,一个一个来。
一、离开网站更改标题
<script type="text/javascript">
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange',
function() {
if (document.hidden) {
//注意把图标的地址换成自己的
$('[rel="shortcut icon"]').attr('href', 'http://www.funnyrule.cn/usr/themes/7TEC/img/icon.png');
document.title = '╥﹏╥...诶呦,这网站好矫情!';
clearTimeout(titleTime);
} else {
$('[rel="shortcut icon"]').attr('href', 'http://www.funnyrule.cn/usr/themes/7TEC/img/icon.png');
document.title = '^O^嘿嘿!你终于来了~' + OriginTitile;
titleTime = setTimeout(function() {
document.title = OriginTitile;
},
2000);
}
});
</script>
二、鼠标特效
<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": 99999999999,
"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>
三、下雪特效
ps:这个js拖了网站四五十毫秒,就去掉了。
<script type="text/javascript">
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z- index':'9999', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 5, /* 定义雪花最小尺寸 */
maxSize: 50,/* 定义雪花最大尺寸 */
newOn: 300 /* 定义密集程度,数字越小越密集 */
});
});
</script>
以下代码太长了,大家自己扒源码看吧,按F12。就像这样。
四、背景色特效
【ribbon.min.js】
五、烟花特效
【meme.js】
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
【anime.min.js】
【fireworks.js】
六、评论框打字特效
【commentTyping.js】
七、鼠标更改默认样式
【pointer.js】
看到鼠标变成小圈圈,一直转,不要太炫酷。看国外的网站发现的,结果就自己用啦,那两个网明天我找找看发在评论区。
有小bug就那样吧,改不了了。。。
这个js下载之后,里面有备注,class类和id类写在相应的路径下面,没一定html基础的折腾起来会很难受
下面是css,写在style.css中
八、文字跳动
看网站最底部,没想到css就能实现。把类名替换成自己的哦。
.text_beat span{
position: relative;
}
.text_beat span:nth-child(1){
-webkit-animation:jump 1s linear 0s infinite alternate;
}
.text_beat span:nth-child(2){
-webkit-animation:jump 1s linear 0.2s infinite alternate;
}
.text_beat span:nth-child(3){
-webkit-animation:jump 1s linear 0.4s infinite alternate;
}
.text_beat span:nth-child(4){
-webkit-animation:jump 1s linear 0.6s infinite alternate;
}
.text_beat span:nth-child(5){
-webkit-animation:jump 1s linear 0.8s infinite alternate;
}
@-webkit-keyframes jump
{
0%{
top:0px;
color:red;
}
50%{
top:-10px;
color:green;
}
100%{
top:10px;
color:blue;
}
}
有不懂的可以问我,js加多了网站肯定有延迟,是好是坏自己斟酌。
「点击下方按钮添加我的微信吧!」
(๑>ڡ<)☆谢谢老板~
使用微信扫描二维码完成支付

诶呀,默认超链接咋没颜色
https://www.iobo.it/
https://project-obsolete.com/en/
https://kyivsculpture.com/en/
鼠标搞成这样好卡,卡顿感受不了
哈哈哈,好不容易把源码扒下来,过段时间厌了就去了(!)[zface_7.gif]