头图跟随鼠标移动
其实俺就是薅的b站头图代码 ,实现起来也不复杂,在VOID/includes/banner.php
最后那里的<?php elseif($this->is('index')): ?>
条件判断中添加一段脚本就行:
<?php elseif($this->is('index')): ?>
<?php
$title = Helper::options()->title;
if($setting['indexBannerTitle']!='') $title = $setting['indexBannerTitle'];
$subtitle = Helper::options()->description;
if($setting['indexBannerSubtitle']!='') $subtitle = $setting['indexBannerSubtitle'];
?>
<div class="banner-title index<?php if(!empty($banner)) echo ' force-normal'; ?>">
<h1 class="post-title"><span class="brand"><span><?php echo $title; ?></span></span><br><span class="subtitle"><?php echo $subtitle; ?></span></h1>
</div>
<!-- 脚本开始 -->
<script>
detect = document.querySelector(".index");
banner_img = document.querySelector("#banner > img");
banner_img.style.width = "110%";
banner_img.style.left = "-5%";
detect.addEventListener("mouseenter", function(n) {
this.x = n.clientX, banner_img.style.transition = "none"
});
detect.addEventListener("mousemove", function(n) {
this._x = n.clientX;
n = 0 - (this._x - this.x) / -30;
banner_img.style.transform = "translate(" + n + "px, 0px)"
});
detect.addEventListener("mouseleave", function(n) {
banner_img.style.transition = ".3s", banner_img.style.transform = "translate(0,0)"
});
</script>
<!-- 脚本结束 -->
<?php endif; ?>
</div>
点击头图放大功能
在主题css
中添加:
#scrollButton {
position: absolute;
left: 50%;
bottom: 10px;
color: white;
transform: translateX(-50%);
}
#scrollButton:hover {
filter: drop-shadow(2px 5px 6px white);
}
#scrollButton.rotated {
transform: rotateX(180deg);
/* Rotates the button 180 degrees around the X-axis */
transition: transform 0.5s ease;
/* Smooth transition for rotation */
}
.lazy-wrap:not(.no-banner) {
min-height: 0vh;
filter: brightness(1);
transition: min-height 0.5s ease, filter 1s ease;
}
类似跟随鼠标移动效果,在banner.php
的<?php elseif ($this->is('index')): ?>
块中加入一段代码:
<?php if (!Utils::isMobile()): ?>
<div id="scrollButton" aria-label="Scroll Down">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="white" height="15px"
width="15px" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve">
<path id="XMLID_225_"
d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z" />
</svg>
</div>
<script>
document.getElementById('scrollButton').addEventListener('click', function () {
var lazyWrap = document.querySelector('.lazy-wrap:not(.no-banner)');
var button = document.getElementById('scrollButton');
if (lazyWrap) {
lazyWrap.style.minHeight = lazyWrap.style.minHeight === '100vh' ? '' : '100vh';
lazyWrap.style.filter = lazyWrap.style.filter === 'brightness(1.3)' ? '' : 'brightness(1.3)';
}
// Toggle the 'rotated' class on the button
button.classList.toggle('rotated');
});
</script>
<?php endif; ?>
如果想让移动端也显示此效果,把最外层的if判断注释掉就ok啦!
大佬厉害了,抄一下 (☆ω☆)
大佬也是车车人吗?请问大佬的翠香底图是怎么加上去的呢,是自己写了一份CSS文件吗
哈哈哈是的,gif素材我是在幻想乡萃夜祭里找的,然后自己写的css/js
首页又改了?快!我要抄!!
yes!是那个点击头图能放大的功能吗
没错是那个!但是你的复制按钮好像坏掉了 OωO
修好力
但是手机端好像不能复制 |´・ω・)ノ
怪,我琢磨下为啥
再给代码框加一个复制按钮就更好了,回头抄我的
先谢一步
js:https://www.himiku.com/usr/js/clipboard.js
/* 剪切板 */ .clipboard { position: absolute; top: 3px; right: 10px; color: #22252b; z-index: 100; text-align: center; cursor: pointer; line-height: 18px; } body.theme-dark .clipboard { color: white; }css:
有用pjax的话要填重载函数:loadClipboard();
因为准备明年再水,所以先发给你,快用上!!
nice!明天就给装上