主页
开篇（请大家看完）：此网站写给挚爱，后续页面还会慢慢更新，大家敬请期待~ ~ ~
此前端框架，主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意，精心打造了一系列引人入胜的页面特效，会为大家带来全新的浏览体验。
同时，我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好，对框架进行个性化的定制和扩展，以打造出更符合自己品味的页面效果。
但请注意，如果您打算将这个框架转发给其他人或用于其他场合，请务必注明原创来源。让我们一起维护一个良好的创作环境。
最后，轻舟会继续更新和完善这个前端页面特效框架，为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注！
页面效果： 星空是可动的哦~~~毒药水特效的颜色搭配，文字渐变的动态效果，图片360度旋转展示特效等等等；每一次的按钮点击都是满满的惊艳 ~ ~ ~
一：caidan.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="JS/adapter.js"></script>
<link rel="stylesheet" href="CSS/base.css">
<link rel="stylesheet" href="CSS/menu.css">
<link rel="stylesheet" href="CSS/3D图片旋转.css">
<title>111</title>
<!--导航栏-->
<style>
.caidan {
height: 48px;
background-color: rgba(20, 33, 125, 0.3);
}
.lj{
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.lop{
width: 100px;
height: 100%;
list-style-type: none;
position: relative;
transform-style: preserve-3d;
transition: all 0.6s;
}
.lop a{
display: inline-block;
text-decoration: underline;
width: 100%;
height: 100%;
text-align: center;
line-height: 48px;
font-family: "新宋体";
font-size:20px;
font-weight: bold;
font-style: oblique;
text-emphasis: '❤';
color: transparent;
background: linear-gradient(to right, #9437e5 0, #eeda25 20%, #e22626 40%);
background-position: -32px 0;
-webkit-background-clip: text;
animation: eff71 3s linear infinite;
}
@keyframes eff71{
to{
background-position: 130px 0;
}
}
.en {
width: 100%;
height: 100%;
outline: 1px solid rgba(0, 111, 170, 0.45);
position: absolute;
z-index: 2;
transform: translateZ(24px);
}
.zh {
width: 100%;
height: 100%;
background: linear-gradient(to bottom,green, greenyellow,lawngreen, lightgreen, mediumseagreen,deepskyblue,cadetblue);
outline: 1px solid #00aa7f;
color: #fff;
position: absolute;
z-index: 2;
transform: translateY(24px) rotateX(-90deg);
}
.lop:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<!--星空背景-->
<div>
<canvas id="canvas"></canvas>
<canvas id="snow"></canvas>
<div class="am-g" style="position: fixed; bottom: 0px;">
<div class="am-u-sm-12">
<div style="z-index: 9999" id="player" class="aplayer">
</div>
</div>
</div>
</div>
<style type="text/css">
canvas {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 217,
stars = [],
count = 0,
maxStars = 1300;
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
function random(min, max) {
if (arguments.length < 2) {
max = min;
min = 0;
}
if (min > max) {
var hold = max;
max = min;
min = hold;
}
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function maxOrbit(x, y) {
var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
}
var Star = function () {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 8;
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 50000;
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
Star.prototype.draw = function () {
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
twinkle = random(10);
if (twinkle === 1 && this.alpha > 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 && this.alpha < 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = 0; i < maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5;
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i < l; i++) {
stars[i].draw();
canvas2.style.cssText = "display:none";
};
window.requestAnimationFrame(animation);
}
animation();
</script>
<!--左侧隐藏栏-->
<div id="menu">
<!--隐藏菜单-->
<div id="ensconce">
<h2>
<img src="images/show.png" alt="">
常温系统
</h2>
</div>
<!--显示菜单-->
<div id="open">
<div class="navH">
<p class="text71">常“温”</p >
<span><img class="obscure" src="images/obscure.png" alt=""></span>
</div>
<div class="navBox">
<ul>
<li>
<h2 class="obtain">烟花予你<i></i></h2>
<div class="secondary">
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
</div>
</li>
<li>
<h2 class="obtain">111<i></i></h2>
<div class="secondary">
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
</div>
</li>
<li>
<h2 class="obtain">111<i></i></h2>
<div class="secondary">
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
</div>
</li>
<li>
<h2 class="obtain">111<i></i></h2>
<div class="secondary">
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
</div>
</li>
<li>
<h2 class="obtain">111<i></i></h2>
<div class="secondary">
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
</div>
</li>
<li>
<h2 class="obtain">111<i></i></h2>
<div class="secondary">
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
</div>
</li>
<li>
<h2 class="obtain">111<i></i></h2>
<div class="secondary">
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
</div>
</li>
<li>
<h2 class="obtain">111<i></i></h2>
<div class="secondary">
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
</div>
</li>
<li>
<h2 class="obtain">111<i></i></h2>
<div class="secondary">
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
<h3><a>我爱你</a></h3>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--上方导航栏-->
<nav class="caidan">
<ul class="lj">
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
<li class="lop">
<a href="#" class="en">Home</a>
<a href="#" class="zh">首页</a>
</li>
</ul>
</nav>
<script src="JS/menu.js"></script>
<div class="hei"></div>
<div id="drag-container">
<div id="spin-container">
<!-- 在这里添加图片或者mp4视频 -->
<img id="tiaozhuan1" alt="">
<img id="tiaozhuan2" alt="">
<img id="tiaozhuan3" alt="">
<img id="tiaozhuan4" alt="">
<img id="tiaozhuan5" alt="">
<img id="tiaozhuan6" alt="">
<img id="tiaozhuan7" alt="">
<img id="tiaozhuan8" alt="">
<!-- 背景文字描述 -->
<p>(❤ ω ❤)</p >
</div>
<div id="ground"></div>
</div>
<div id="music-container"></div>
<script src="JS/script3.js"></script>
</body>
</html>
二：CSS文件包
（1）base.css
body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
font-family: "微软雅黑";
height: 100%;
width: 100%;
box-sizing: border-box;
}
.middle {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
a {
color: #3e3e3e;
text-decoration: none;
}
img, input, button, textarea {
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul {
list-style: none;
}
input {
padding-top: 0;
padding-bottom: 0;
font-family: "SimSun", "宋体";
}
img {
border: 0;
vertical-align: middle;
}
h1, h2, h3, h4, h5, h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
s, i, em, u {
font-style: normal;
text-decoration: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
（2）menu.css
#menu {
overflow: hidden;
height: 100%;
float: left;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#menu #ensconce {
width: 0.35rem;
height: 100%;
float: left;
text-align: center;
position: relative;
display: none;
background-image: linear-gradient(45deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
}
#menu #ensconce h2 {
cursor: pointer;
color: #f7f9fa;
font-size: 0.24rem;
text-emphasis: '❤';
line-height: 0.5rem;
width: 100%;
position: absolute;
top: 35%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(0%, -50%);
}
#menu #ensconce h2 img {
width: 52%;
}
#menu #open {
width: 2.6rem;
height: 100%;
background-color: rgba(34, 215, 73, 0.64);
padding-bottom: 0.1rem;
box-sizing: border-box;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
}
#menu #open .navH {
height: 0.6rem;
background: linear-gradient(to bottom,lawngreen, blue, indigo, violet);
line-height: 0.6rem;
text-align: center;
font-size: 0.2rem;
color: #e8eff1;
position: relative;
box-sizing: border-box;
font-family: "新宋体";
}
.text71{
font-weight: 600;
font-size: 18px;
color: transparent;
letter-spacing: 4px;
margin: 0;
padding: 0 16px;
background: linear-gradient(to right, #e5ce37 0, #2dce7b 20%, #c40a0a 40%);
background-position: -32px 0;
-webkit-background-clip: text;
animation: eff71 3s linear infinite;
}
@keyframes eff71{
to{
background-position: 130px 0;
}
}
#menu #open .navH span {
position: absolute;
top: 49%;
right: 0;
padding: 0 0.15rem;
cursor: pointer;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
display: inline-block;
}
#menu #open .navH span .obscure {
width: 0.24rem;
}
#menu #open .navBox {
height: 100%;
overflow-y: auto;
padding-left: 0.05rem;
padding-right: 0.07rem;
margin-top: 0.1rem;
cursor: pointer;
margin-bottom: 4px;
background-image: linear-gradient(100deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad,#e5081b, #0a3cee, #561286, #cc3ff5,#8e44ad);
background-size: 400%;
animation: ty 5s infinite;
}
#menu #open .navBox ul li {
cursor: pointer;
margin-bottom: 4px;
background-image: linear-gradient(45deg, rgba(227, 219, 220, 0.38), rgba(142, 153, 189, 0.51), rgba(83, 191, 210, 0.55), rgba(33, 165, 205, 0.42),#8e44ad);
background-size: 100%;
animation: ty 5s infinite;
}
@keyframes ty {
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
#menu #open .navBox ul li .obtain {
background-color: rgba(22, 40, 158, 0.29);
}
#menu #open .navBox ul li .obtain:hover {
background: linear-gradient(to bottom,yellow,yellowgreen, greenyellow,darkgray,dimgray);
}
#menu #open .navBox ul li h2 {
position: relative;
width: 100%;
height: 100%;
text-align: center;
font-size: 0.15rem;
padding: 0.15rem 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
color: transparent;
background: linear-gradient(to right, #7f69e2 0, #9046e5 20%, #9c1dbf 40%);
background-position: -32px 0;
-webkit-background-clip: text;
animation: eff 3s linear infinite;
}
@keyframes eff{
to{
background-position: 130px 0;
}
}
#menu #open .navBox ul li h2 i {
position: absolute;
top: 50%;
right: 0.15rem;
border-top: 0.07rem transparent dashed;
border-left: 0.07rem solid #fff;
border-right: 0.07rem transparent dashed;
border-bottom: 0.07rem transparent dashed;
display: inline-block;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
-o-transition: -o-transform 0.6s ease;
-ms-transition: -ms-transform 0.6s ease;
transform-origin: 4px 3px;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
#menu #open .navBox ul li h2 .arrowRot {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#menu #open .navBox ul li .secondary {
overflow: hidden;
height: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
}
#menu #open .navBox ul li .secondary h3 {
padding: 0.1rem 0;
text-align: center;
font-size: 0.13rem;
background-color: rgba(123, 229, 158, 0.4);
color: #e6f6e9;
border-bottom: 0.8px solid #42495d;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
#menu #open .navBox ul li .secondary h3 a{
background: linear-gradient(to right, #e5ce37 0, #2dce7b 20%, #c40a0a 40%);
background-position: -32px 0;
-webkit-background-clip: text;
animation: eff71 1s linear infinite;
}
@keyframes eff71{
to{
background-position: 130px 0;
}
}
#menu #open .navBox ul li .secondary h3:hover {
background: linear-gradient(to bottom, #ff0000, orange, yellow, rgba(49, 173, 49, 0.99), blue, indigo, violet);
}
#menu #open .navBox ul li .secondary .seconFocus {
background-color: #be40e2;
-webkit-box-shadow: 3px 3px 3px #aa8c51;
-moz-box-shadow: 3px 3px 3px #aa8c51;
box-shadow: 3px 3px 3px #aa8c51;
}
（3）3D图片旋转.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hei{
height: 150px;
}
html,
body {
touch-action: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#drag-container, #spin-container {
position: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
width: 200px;
align-items: center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
}
#drag-container img, #drag-container video {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 200px;
font-size: 50px;
-webkit-box-shadow: 0 0 8px #fff;
box-shadow: 0 0 8px #fff;
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}
#drag-container img:hover, #drag-container video:hover {
-webkit-box-shadow: 0 0 15px #fffd;
box-shadow: 0 0 15px #fffd;
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}
#drag-container p {
font-family: Serif;
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translate(-50%,-50%) rotateX(90deg);
transform: translate(-50%,-50%) rotateX(90deg);
color: #d41919;
}
#ground {
width: 900px;
height: 900px;
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translate(-50%,-50%) rotateX(90deg);
transform: translate(-50%,-50%) rotateX(90deg);
background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
}
@-webkit-keyframes spin {
from{
-webkit-transform: rotateY(10deg);
transform: rotateY(0deg);
} to{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes spin {
from{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
} to{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@-webkit-keyframes spinRevert {
from{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
} to{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@keyframes spinRevert {
from{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
} to{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
三：JS文件包
（1）adapter.js
var html = document.getElementsByTagName('html')[0];
var width = window.innerWidth;
if (width > 1080) {
width = 1080;
}
else if (width < 320 ) {
width = 320 ;
}
var fontSize = 100/1080*width;
html.style.fontSize = fontSize +'px';
window.onresize = function(){
var html = document.getElementsByTagName('html')[0];
var width = window.innerWidth;
if (width > 1080) {
width = 1080;
}
else if (width < 320 ) {
width = 320 ;
}
var fontSize = 100/1080 * width;
html.style.fontSize = fontSize +'px';
}
（2）menu.js
window.onload = function () {
var flag = true;
var liC = document.querySelectorAll(".navBox li h2");
// 主导航nav点击事件
for (var i = 0; i < liC.length; i++) {
liC[i].onclick = function () {
if (flag) {
// 节流阀
flag = false;
setTimeout(function () {
flag = true;
}, 500)
// 自点
if (this.className === "obFocus") {
this.querySelector("i").classList.remove("arrowRot");
getNext(this).style.height = "0";
this.classList.add("obtain");
this.classList.remove("obFocus");
return
}
var sec = getNext(this);
var sib = siblings(sec.parentNode);
var otherArr = [];
var arrowClass = [];
// 排他 secondary arrowRot obFocus
for (var j = 0; j < sib.length; j++) {
var sibSec = sib[j].getElementsByTagName('*');
for (var i = 0; i < sibSec.length; i++) {
if (sibSec[i].className == "secondary") {
otherArr.push(sibSec[i])
}
if (sibSec[i].className == "arrowRot") {
arrowClass.push(sibSec[i])
}
if (sibSec[i].className == "obFocus") {
sibSec[i].classList.remove("obFocus");
sibSec[i].classList.add("obtain");
}
}
}
for (var i = 0; i < otherArr.length; i++) {
otherArr[i].style.height = "0";
}
if (arrowClass[0]) {
arrowClass[0].classList.remove("arrowRot");
}
// 留自己
sec.style.height = 2.5078 + "rem";
this.getElementsByTagName("i")[0].classList.add("arrowRot");
this.classList.remove("obtain");
this.classList.add("obFocus");
}
}
}
// 子导航点击事件
var seconC = document.querySelectorAll(".secondary h3")
for (var i = 0; i < seconC.length; i++) {
seconC[i].onclick = function () {
for (var i = 0; i < seconC.length; i++) {
seconC[i].classList.remove("seconFocus");
}
this.classList.add("seconFocus");
}
}
// 隐藏菜单
var obscure = document.querySelector(".navH span");
var open = document.querySelector("#open");
var ensconce = document.querySelector("#ensconce");
obscure.onclick = function () {
open.style.marginLeft = "-300px";
setTimeout(function () {
ensconce.style.display = "block";
}, 350)
}
//显示菜单
var showC = document.querySelector("#ensconce h2");
showC.onclick = function () {
open.style.marginLeft = "0px";
setTimeout(function () {
ensconce.style.display = "none";
}, 100)
}
}
function getByClass(clsName, parent) {
var oParent = parent ? document.getElementById(parent) : document,
boxArr = new Array(),
oElements = oParent.getElementsByTagName('*');
for (var i = 0; i < oElements.length; i++) {
if (oElements[i].className == clsName) {
boxArr.push(oElements[i]);
}
}
return boxArr;
}
// 获取下一个兄弟元素
function getNext(node) {
if (!node.nextSibling) return null;
var nextNode = node.nextSibling;
if (nextNode.nodeType == 1) {
return nextNode;
}
return getNext(node.nextSibling);
}
// 获取除了自己以外的其他亲兄弟元素
function siblings(elem) {
var r = [];
var n = elem.parentNode.firstChild;
for (; n; n = n.nextSibling) {
if (n.nodeType === 1 && n !== elem) {
r.push(n);
}
}
return r;
}
（3）script3.js
// 全局参数定义
var radius = 280; // 相册的半径
var autoRotate = true; // 是否自动旋转
var rotateSpeed = -30; // 旋转速度
var imgWidth = 200; // 照片宽度 (unit: px)
var imgHeight = 250; // 照片高度 (unit: px)
setTimeout(init, 1000);
var odrag = document.getElementById('drag-container');
var ospin = document.getElementById('spin-container');
var aImg = ospin.getElementsByTagName('img');
var aVid = ospin.getElementsByTagName('video');
var aEle = [...aImg, ...aVid];
ospin.style.width = imgWidth + "px";
ospin.style.height = imgHeight + "px";
var ground = document.getElementById('ground');
ground.style.width = radius * 3 + "px";
ground.style.height = radius * 3 + "px";
function init(delayTime) {
for (var i = 0; i < aEle.length; i++) {
aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
aEle[i].style.transition = "transform 1s";
aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
}
}
function applyTranform(obj) {
if(tY > 180) tY = 180;
if(tY < 0) tY = 0;
obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
}
function playSpin(yes) {
ospin.style.animationPlayState = (yes?'running':'paused');
}
var sX, sY, nX, nY, desX = 0,
desY = 0,
tX = 0,
tY = 10;
if (autoRotate) {
var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
ospin.style.animation = `${
animationName} ${
Math.abs(rotateSpeed)}s infinite linear`;
}
document.onpointerdown = function (e) {
clearInterval(odrag.timer);
e = e || window.event;
var sX = e.clientX,
sY = e.clientY;
this.onpointermove = function (e) {
e = e || window.event;
var nX = e.clientX,
nY = e.clientY;
desX = nX - sX;
desY = nY - sY;
tX += desX * 0.1;
tY += desY * 0.1;
applyTranform(odrag);
sX = nX;
sY = nY;
};
this.onpointerup = function (e) {
odrag.timer = setInterval(function () {
desX *= 0.95;
desY *= 0.95;
tX += desX * 0.1;
tY += desY * 0.1;
applyTranform(odrag);
playSpin(false);
if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
clearInterval(odrag.timer);
playSpin(true);
}
}, 17);
this.onpointermove = this.onpointerup = null;
};
return false;
};
document.onmousewheel = function(e) {
e = e || window.event;
var d = e.wheelDelta / 20 || -e.detail;
radius += d;
init(1);
};
document.getElementById('tiaozhuan1').addEventListener('click', function() {
window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan2').addEventListener('click', function() {
window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan3').addEventListener('click', function() {
window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan4').addEventListener('click', function() {
window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan5').addEventListener('click', function() {
window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan6').addEventListener('click', function() {
window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan7').addEventListener('click', function() {
window.location.href = ''; // 替换为你想要跳转的URL
});
document.getElementById('tiaozhuan8').addEventListener('click', function() {
window.location.href = ''; // 替换为你想要跳转的URL
});
四：images包
(1)show.png
(2)obscure.png
