69 changed files with 4903 additions and 0 deletions
-
18css/common.css
-
477css/index.css
-
7css/libs/animate.min.css
-
187css/libs/reset.css
-
90css/plugins/gridNavigation.css
-
486css/style.css
-
BINfonts/PingFang.ttc
-
BINfonts/斗鱼追光体.ttf
-
BINimages/an-bottom.webp
-
BINimages/animation.webp
-
BINimages/bg.mp4
-
BINimages/header-btn-hover.png
-
BINimages/header-btn.png
-
BINimages/header.png
-
BINimages/icon_home_full.png
-
BINimages/icon_my_full.png
-
BINimages/icon_play_o_full.png
-
BINimages/img-bg.png
-
BINimages/index-an1.webp
-
BINimages/index-an2.webp
-
BINimages/index-an3.webp
-
BINimages/index-an4.webp
-
BINimages/index-an5.webp
-
BINimages/index-an6.webp
-
BINimages/index-box.png
-
BINimages/index-box2.png
-
BINimages/left.png
-
BINimages/page-box.png
-
BINimages/right.png
-
138index.html
-
138index2.html
-
138index3.html
-
23js/index.js
-
147js/libs/flexible.js
-
2js/libs/jquery-3.7.1.min.js
-
4js/libs/jquery.min.js
-
2js/libs/layer/layer.js
-
2js/libs/layer/mobile/layer.js
-
1js/libs/layer/mobile/need/layer.css
-
BINjs/libs/layer/theme/default/icon-ext.png
-
BINjs/libs/layer/theme/default/icon.png
-
1js/libs/layer/theme/default/layer.css
-
BINjs/libs/layer/theme/default/loading-0.gif
-
BINjs/libs/layer/theme/default/loading-1.gif
-
BINjs/libs/layer/theme/default/loading-2.gif
-
1js/libs/layui/css/layui.css
-
1js/libs/layui/css/modules/code.css
-
1js/libs/layui/css/modules/laydate/default/laydate.css
-
BINjs/libs/layui/css/modules/layer/default/icon-ext.png
-
BINjs/libs/layui/css/modules/layer/default/icon.png
-
1js/libs/layui/css/modules/layer/default/layer.css
-
BINjs/libs/layui/css/modules/layer/default/loading-0.gif
-
BINjs/libs/layui/css/modules/layer/default/loading-1.gif
-
BINjs/libs/layui/css/modules/layer/default/loading-2.gif
-
BINjs/libs/layui/font/iconfont.eot
-
554js/libs/layui/font/iconfont.svg
-
BINjs/libs/layui/font/iconfont.ttf
-
BINjs/libs/layui/font/iconfont.woff
-
BINjs/libs/layui/font/iconfont.woff2
-
5js/libs/layui/layui.js
-
205js/plugins/jquery.easing.1.3.js
-
891js/plugins/jquery.gridnav.js
-
400js/plugins/pdfobject.js
-
BINmedia/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf
-
BINmedia/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4
-
175page1.html
-
238page2.html
-
238page4.html
-
332test.html
@ -0,0 +1,18 @@ |
|||
/* 粒子背景 */ |
|||
#particles-js { |
|||
width: 100%; |
|||
height: calc(100vh); |
|||
background-color: #000000; |
|||
background-image: url(''); |
|||
background-size: cover; |
|||
background-position: 50% 50%; |
|||
background-repeat: no-repeat; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.particles-js-canvas-el { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 9; |
|||
} |
|||
@ -0,0 +1,477 @@ |
|||
@font-face { |
|||
font-family: "DOUYU-Regular"; |
|||
src: url('../fonts/斗鱼追光体.ttf'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: "PingFang"; |
|||
src: url('../fonts/PingFang.ttc'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
.ai-wrapper{ |
|||
position: relative; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-color: #0F1B46; |
|||
font-family: 'DOUYU-Regular'; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.ai-bg{ |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 6; |
|||
} |
|||
/* 头部 */ |
|||
.ai-header-wrapper{ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 1.8125rem; |
|||
overflow: hidden; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.ai-header{ |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.header-btn{ |
|||
position: absolute; |
|||
top: .45rem; |
|||
display: flex; |
|||
justify-content: center; |
|||
width: 2.2875rem; |
|||
height: 1.1125rem; |
|||
line-height: .7rem; |
|||
font-size: .175rem; |
|||
color: #fff; |
|||
background: url('../images/header-btn.png') no-repeat left top; |
|||
background-size:cover; |
|||
} |
|||
|
|||
.header-btn span{ |
|||
display: block; |
|||
width: .25rem; |
|||
height: .25rem; |
|||
margin-top: .175rem; |
|||
margin-right: .025rem; |
|||
} |
|||
|
|||
.header-home{ |
|||
left: 0; |
|||
} |
|||
|
|||
.header-home span{ |
|||
background: url('../images/icon_home_full.png') no-repeat left top; |
|||
background-size:cover; |
|||
} |
|||
|
|||
.header-login{ |
|||
right: 0; |
|||
} |
|||
|
|||
.header-login span{ |
|||
background: url('../images/icon_my_full.png') no-repeat left top; |
|||
background-size:cover; |
|||
} |
|||
|
|||
.header-btn:hover{ |
|||
background: url('../images/header-btn-hover.png') no-repeat left top; |
|||
background-size:cover; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.header-title { |
|||
width: 24.025rem; |
|||
height: 1.8125rem; |
|||
margin: 0 auto; |
|||
background: url('../images/header.png') no-repeat left top; |
|||
background-size:cover; |
|||
} |
|||
|
|||
.header-title h2{ |
|||
font-size: .475rem; |
|||
line-height: 1.25rem; |
|||
font-weight: 300; |
|||
text-align: center; |
|||
background: -webkit-linear-gradient(90deg, #fff 0%, #9FCAFF 70%); |
|||
background: linear-gradient(180deg, #fff 0%, #9FCAFF 70%); |
|||
-webkit-background-clip: text; |
|||
background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
color: transparent; |
|||
text-shadow: 0px 11px 11px rgba(105,173,255,0.34), 0px 0px 24px rgba(105,173,255,0.68); |
|||
} |
|||
/* 首页菜单部分 */ |
|||
.ai-index{ |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.index-list { |
|||
position: absolute; |
|||
top: 2.5rem; |
|||
} |
|||
|
|||
.list-left{ |
|||
left: 1.5rem; |
|||
} |
|||
|
|||
.list-right{ |
|||
right: 1.5rem; |
|||
} |
|||
|
|||
.index-list li{ |
|||
position: relative; |
|||
width: 5rem; |
|||
height: 2.5rem; |
|||
margin-bottom: 1rem; |
|||
z-index: 9999; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.index-list li::before{ |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 5rem; |
|||
height: 2.5rem; |
|||
background: url('../images/index-box2.png') no-repeat left top; |
|||
background-size:cover; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.other-bg li::before{ |
|||
background: url('../images/index-box.png') no-repeat left top; |
|||
background-size:cover; |
|||
} |
|||
|
|||
|
|||
.index-list li a{ |
|||
position: relative; |
|||
display: block; |
|||
width: calc(100% - .625rem); |
|||
height: calc(100% - .5rem); |
|||
padding: .5rem 0 0 .625rem; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.index-list li a p{ |
|||
position: relative; |
|||
font-size: .4rem; |
|||
z-index: 99; |
|||
color: #fff; |
|||
} |
|||
|
|||
.index-list li a span{ |
|||
position: relative; |
|||
font-size: .3rem; |
|||
font-family: 'PingFang'; |
|||
background: -webkit-linear-gradient(360deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); |
|||
background: linear-gradient(360deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); |
|||
-webkit-background-clip: text; |
|||
background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
color: transparent; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.index-list li a img{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
display: block; |
|||
width: 2.5rem; |
|||
height: 2.5rem; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.list-right li::before{ |
|||
transform: rotateY(-180deg) |
|||
/* transform: scaleY(-1); */ |
|||
} |
|||
|
|||
.list-left li:nth-child(1), |
|||
.list-left li:nth-child(3){ |
|||
margin-left: 1rem; |
|||
} |
|||
|
|||
.list-right li:nth-child(2){ |
|||
/* margin-left: 1rem; */ |
|||
} |
|||
|
|||
.list-right li a{ |
|||
text-align: right; |
|||
padding: .5rem .625rem 0 0; |
|||
} |
|||
|
|||
.list-right li a{ |
|||
padding: .5rem .625rem 0 0; |
|||
} |
|||
|
|||
.list-right li img{ |
|||
left: 0; |
|||
} |
|||
|
|||
/* 没有背景框的时候 */ |
|||
.no-box-style li::before{ |
|||
background: none; |
|||
} |
|||
|
|||
.no-box-style li a img{ |
|||
position: absolute; |
|||
right: -0.25rem; |
|||
top: -.75rem; |
|||
display: block; |
|||
width: 2.75rem; |
|||
height: 2.75rem; |
|||
} |
|||
|
|||
.no-box-style.list-right li a img{ |
|||
left: -0.25rem; |
|||
} |
|||
|
|||
.no-box-style li a span{ |
|||
background: none; |
|||
-webkit-background-clip:initial; |
|||
background-clip:initial; |
|||
-webkit-text-fill-color:#3D528B; |
|||
color: #3D528B; |
|||
} |
|||
|
|||
|
|||
.list-left li:nth-child(1) { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.list-left li:nth-child(2) { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 280px; |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.list-left li:nth-child(3) { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 560px; |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
.list-right li:nth-child(1) { |
|||
position: absolute; |
|||
right: 1rem; |
|||
top: 0; |
|||
} |
|||
|
|||
.list-right li:nth-child(2) { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 280px; |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.list-right li:nth-child(3) { |
|||
position: absolute; |
|||
right: 1rem; |
|||
top: 560px; |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
|
|||
/* 首页-机器人+底图 */ |
|||
.index-middle{ |
|||
width: 11.25rem; |
|||
} |
|||
|
|||
.index-middle img{ |
|||
display: block; |
|||
} |
|||
|
|||
.ai-human{ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
z-index: 9; |
|||
/* animation-duration: .4s; |
|||
animation-delay: .3s; */ |
|||
} |
|||
|
|||
.ai-bottom{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
z-index: 6; |
|||
} |
|||
|
|||
/* 编程体验 */ |
|||
.page-content{ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: calc(100% - 2.75rem); |
|||
padding-top: 2.75rem; |
|||
z-index: 10; |
|||
font-family: 'PingFang'; |
|||
} |
|||
|
|||
|
|||
|
|||
/* ai数字人 start */ |
|||
.chat-wrapper { |
|||
position: relative; |
|||
width: 10rem; |
|||
height: 10rem; |
|||
margin: 1.75rem auto 0 auto; |
|||
background-color: #fff; |
|||
border-radius: .125rem; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.chat-content { |
|||
width: 100%; |
|||
height: calc(100% - 2.5rem); |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.chat-message { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin: .125rem; |
|||
padding: .125rem; |
|||
line-height: .5rem; |
|||
font-size: .25rem; |
|||
color: #000; |
|||
} |
|||
|
|||
.chat-message p { |
|||
position: relative; |
|||
line-height: .5rem; |
|||
padding: 0 .125rem; |
|||
margin-right: .125rem; |
|||
background-color: burlywood; |
|||
border-radius: .05rem; |
|||
} |
|||
|
|||
.chat-message p span{ |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -0.45rem; |
|||
width: 1rem; |
|||
height: .375rem; |
|||
text-align: center; |
|||
line-height: .375rem; |
|||
border: 1px solid #000; |
|||
border-radius: .05rem; |
|||
font-size: .175rem; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.chat-message p span:hover{ |
|||
background-color: #999; |
|||
} |
|||
|
|||
.chat-message p span.remove-btn{ |
|||
border: none; |
|||
color: #999; |
|||
} |
|||
|
|||
.chat-message p span.remove-btn:hover{ |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.chat-message img { |
|||
display: block; |
|||
width: .5rem; |
|||
height: .5rem; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.bot-message { |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.bot-message p { |
|||
margin-left: .125rem; |
|||
background-color: rgb(0, 209, 112); |
|||
} |
|||
.loading{ |
|||
position: relative; |
|||
} |
|||
.loading img { |
|||
display: block; |
|||
width: .25rem; |
|||
height: .25rem; |
|||
margin-top: .125rem; |
|||
animation: rotate 2s linear infinite; |
|||
} |
|||
|
|||
@keyframes rotate { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
.chat-send { |
|||
width: 100%; |
|||
height: 2.5rem; |
|||
background-color: #fff; |
|||
border-radius: .125rem; |
|||
} |
|||
|
|||
.chat-send textarea { |
|||
display: block; |
|||
width: calc(100% - .5rem); |
|||
height: 1.25rem; |
|||
font-size: .3rem; |
|||
line-height: .375rem; |
|||
border: none; |
|||
padding: .25rem; |
|||
background-color: #e4e4e4; |
|||
} |
|||
|
|||
.send-button-container { |
|||
text-align: right; |
|||
} |
|||
|
|||
.send-button { |
|||
margin: .125rem .25rem 0 0; |
|||
padding: 0 .25rem; |
|||
line-height: .5rem; |
|||
font-size: .325rem; |
|||
color: #000; |
|||
} |
|||
|
|||
.send-disabled-button { |
|||
color: #7c7c7c; |
|||
} |
|||
|
|||
/* ai数字人 end */ |
|||
7
css/libs/animate.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,187 @@ |
|||
@charset "utf-8"; |
|||
|
|||
/* CSS Document */ |
|||
|
|||
html { |
|||
color: #727272; |
|||
background: #f5f5f5; |
|||
-webkit-text-size-adjust: 100%; |
|||
-ms-text-size-adjust: 100%; |
|||
} |
|||
|
|||
body, |
|||
div, |
|||
dl, |
|||
dt, |
|||
dd, |
|||
ul, |
|||
ol, |
|||
li, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
pre, |
|||
code, |
|||
form, |
|||
fieldset, |
|||
legend, |
|||
input, |
|||
textarea, |
|||
p, |
|||
blockquote, |
|||
th, |
|||
td, |
|||
hr, |
|||
button, |
|||
article, |
|||
aside, |
|||
details, |
|||
figcaption, |
|||
figure, |
|||
footer, |
|||
header, |
|||
hgroup, |
|||
menu, |
|||
nav, |
|||
section { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
body, |
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
font: 12px arial, "微软雅黑" |
|||
} |
|||
|
|||
input, |
|||
select, |
|||
textarea { |
|||
font-size: 100%; |
|||
} |
|||
|
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
|
|||
th { |
|||
text-align: inherit; |
|||
} |
|||
|
|||
fieldset, |
|||
img { |
|||
border: 0; |
|||
} |
|||
|
|||
iframe { |
|||
display: block; |
|||
} |
|||
|
|||
abbr, |
|||
acronym { |
|||
border: 0; |
|||
font-variant: normal; |
|||
} |
|||
|
|||
del { |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
address, |
|||
caption, |
|||
cite, |
|||
code, |
|||
dfn, |
|||
em, |
|||
i, |
|||
th, |
|||
var { |
|||
font-style: normal; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
ol, |
|||
ul { |
|||
list-style: none; |
|||
} |
|||
|
|||
caption, |
|||
th { |
|||
text-align: left; |
|||
} |
|||
|
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
font-size: 100%; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
q:before, |
|||
q:after { |
|||
content: ''; |
|||
} |
|||
|
|||
ins, |
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
button { |
|||
border: 0; |
|||
outline: none; |
|||
} |
|||
|
|||
|
|||
/* common |
|||
-----------------------------------------------*/ |
|||
|
|||
.clearfix:after { |
|||
content: "\200B"; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
} |
|||
|
|||
.clearfix { |
|||
zoom: 1; |
|||
} |
|||
|
|||
.clear { |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
a { |
|||
color: #000; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover { |
|||
color: #000; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
select::-ms-expand { |
|||
display: none; |
|||
} |
|||
|
|||
input, |
|||
textarea:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
select { |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
} |
|||
@ -0,0 +1,90 @@ |
|||
/* Thumbnail Effects Style */ |
|||
.tj_container{ |
|||
position: relative; |
|||
} |
|||
|
|||
.page-list-btn { |
|||
width: .5rem; |
|||
height: 2.5rem; |
|||
position: absolute; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
cursor: pointer; |
|||
z-index: 9999; |
|||
} |
|||
.tj_prev { |
|||
left: 1rem; |
|||
background: url("../../images/left.png") no-repeat top left; |
|||
background-size: cover; |
|||
} |
|||
|
|||
.tj_next { |
|||
right: 1rem; |
|||
background: url("../../images/right.png") no-repeat top left; |
|||
background-size: cover; |
|||
} |
|||
|
|||
.tj_wrapper { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.tj_wrapper ul { |
|||
width: 18.25rem; |
|||
height: 9rem; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.tj_wrapper ul li { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 6rem; |
|||
height: 4.5rem; |
|||
} |
|||
|
|||
.tj_wrapper ul li a { |
|||
display: block; |
|||
width: 5rem; |
|||
height: 3.5rem; |
|||
background: url("../../images/page-box.png") no-repeat left top; |
|||
background-size: cover; |
|||
} |
|||
.tj-list-img { |
|||
position: relative; |
|||
width: 4.6rem; |
|||
height: 2.725rem; |
|||
margin: .2rem auto .125rem auto; |
|||
} |
|||
|
|||
.tj-list-img img { |
|||
display: block; |
|||
width: 4.6rem; |
|||
height: 2.725rem; |
|||
} |
|||
|
|||
.tj-list-img span{ |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
display: block; |
|||
width: .8rem; |
|||
height: .8rem; |
|||
background: url("../../images/icon_play_o_full.png") no-repeat left top; |
|||
background-size: cover; |
|||
transform: translateX(-50%) translateY(-50%); |
|||
} |
|||
|
|||
.tj_wrapper ul li a p { |
|||
font-size: .25rem; |
|||
height: .375rem; |
|||
line-height: .375rem; |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
@ -0,0 +1,486 @@ |
|||
.contanier{ |
|||
width: 100%; |
|||
height: calc(100vh); |
|||
background: url('../images/bg.gif') no-repeat top left; |
|||
background-size: cover; |
|||
overflow: hidden; |
|||
} |
|||
.return { |
|||
position: fixed; |
|||
bottom: 50%; |
|||
right: 20px; |
|||
width: 1.25rem; |
|||
height: 1.25rem; |
|||
border-radius: 100%; |
|||
text-align: center; |
|||
font-size: .375rem; |
|||
line-height: 1.25rem; |
|||
background-color: yellow; |
|||
font-weight: bold; |
|||
color: #000; |
|||
z-index: 9999; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* nav部分 */ |
|||
.flex-container { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
justify-items: center; |
|||
margin: 30px; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.flex-container .flex-middle{ |
|||
width: 500px; |
|||
height: 400px; |
|||
line-height: 400px; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: .25rem; |
|||
font-weight: bold; |
|||
border: 1px solid #fff; |
|||
} |
|||
|
|||
.flex-container ul { |
|||
position: relative; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
flex-direction: row; |
|||
width: calc((100% - 600px) / 2); |
|||
height: 400px; |
|||
} |
|||
|
|||
|
|||
/* .flex-container ul.flex-left { |
|||
position: relative; |
|||
border: 1px solid red; |
|||
} */ |
|||
|
|||
.flex-container ul.flex-left li:nth-child(1) { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.flex-container ul.flex-left li:nth-child(2) { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 140px; |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.flex-container ul.flex-left li:nth-child(3) { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 280px; |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
|
|||
.flex-container ul.flex-right li:nth-child(1) { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.flex-container ul.flex-right li:nth-child(2) { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 140px; |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.flex-container ul.flex-right li:nth-child(3) { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 280px; |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
.flex-container ul li{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 1.25rem; |
|||
line-height: 1.25rem; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-size: .25rem; |
|||
font-weight: bold; |
|||
background-color: rgb(0, 174, 255); |
|||
border: 1px solid #000; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.flex-container ul li img{ |
|||
display: block; |
|||
margin-left: .375rem; |
|||
height: .625rem; |
|||
} |
|||
|
|||
.flex-item-link img.active{ |
|||
position: fixed; |
|||
top: 50%; |
|||
left: -50%; |
|||
width: 400px; |
|||
height: 400px; |
|||
margin: -200px 0 0 -200px; |
|||
} |
|||
|
|||
.flex-container ul li a{ |
|||
display: block; |
|||
} |
|||
|
|||
/* pdf预览 */ |
|||
.pdfobject-container { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: calc(100vw); |
|||
height: calc(100vh); |
|||
z-index: 999; |
|||
} |
|||
|
|||
.chat-wrapper { |
|||
position: relative; |
|||
width: 10rem; |
|||
height: 10rem; |
|||
margin: .375rem auto; |
|||
background-color: #fff; |
|||
border-radius: .125rem; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.chat-content { |
|||
width: 100%; |
|||
height: calc(100% - 2.5rem); |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.chat-message { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
margin: .125rem; |
|||
padding: .125rem; |
|||
line-height: .5rem; |
|||
font-size: .25rem; |
|||
color: #000; |
|||
} |
|||
|
|||
.chat-message p { |
|||
position: relative; |
|||
line-height: .5rem; |
|||
padding: 0 .125rem; |
|||
margin-right: .125rem; |
|||
background-color: burlywood; |
|||
border-radius: .05rem; |
|||
} |
|||
|
|||
.chat-message p span{ |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -0.45rem; |
|||
width: 1rem; |
|||
height: .375rem; |
|||
text-align: center; |
|||
line-height: .375rem; |
|||
border: 1px solid #000; |
|||
border-radius: .05rem; |
|||
font-size: .175rem; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.chat-message p span:hover{ |
|||
background-color: #999; |
|||
} |
|||
|
|||
.chat-message p span.remove-btn{ |
|||
border: none; |
|||
color: #999; |
|||
} |
|||
|
|||
.chat-message p span.remove-btn:hover{ |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.chat-message img { |
|||
display: block; |
|||
width: .5rem; |
|||
height: .5rem; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.bot-message { |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
.bot-message p { |
|||
margin-left: .125rem; |
|||
background-color: rgb(0, 209, 112); |
|||
} |
|||
.loading{ |
|||
position: relative; |
|||
} |
|||
.loading img { |
|||
display: block; |
|||
width: .25rem; |
|||
height: .25rem; |
|||
margin-top: .125rem; |
|||
animation: rotate 2s linear infinite; |
|||
} |
|||
|
|||
@keyframes rotate { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
.chat-send { |
|||
width: 100%; |
|||
height: 2.5rem; |
|||
background-color: #fff; |
|||
border-radius: .125rem; |
|||
} |
|||
|
|||
.chat-send textarea { |
|||
display: block; |
|||
width: calc(100% - .5rem); |
|||
height: 1.25rem; |
|||
font-size: .3rem; |
|||
line-height: .375rem; |
|||
border: none; |
|||
padding: .25rem; |
|||
background-color: #e4e4e4; |
|||
} |
|||
|
|||
.send-button-container { |
|||
text-align: right; |
|||
} |
|||
|
|||
.send-button { |
|||
margin: .125rem .25rem 0 0; |
|||
padding: 0 .25rem; |
|||
line-height: .5rem; |
|||
font-size: .325rem; |
|||
color: #000; |
|||
} |
|||
|
|||
.send-disabled-button { |
|||
color: #7c7c7c; |
|||
} |
|||
|
|||
.scene-wrapper{ |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
flex-wrap: wrap; |
|||
width: calc(100vw - .525rem); |
|||
height: calc(100vh - .525rem); |
|||
padding: .25rem; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.scene-item{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-self: center; |
|||
width: calc(100% / 3 - .525rem); |
|||
margin: .25rem; |
|||
} |
|||
|
|||
.scene-item img{ |
|||
display: block; |
|||
width: 2.5rem; |
|||
height: 2.5rem; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.scene-item p{ |
|||
margin-top: .25rem; |
|||
font-size: .3rem; |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
|
|||
/* 菜单3D */ |
|||
.show-nav{ |
|||
position: relative; |
|||
width: 1000px; |
|||
height: 460px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin: 0 auto; |
|||
z-index: 99; |
|||
} |
|||
|
|||
#showcase { |
|||
width: 100%; |
|||
height: 360px; |
|||
/* border-radius: 8px; */ |
|||
position: absolute; |
|||
transform-style: preserve-3d; |
|||
transition: transform 1s; |
|||
} |
|||
|
|||
.menu-item{ |
|||
position: absolute; |
|||
width: 240px; |
|||
height: 240px; |
|||
border-radius: 100%; |
|||
background-color: #fff; |
|||
text-align: center; |
|||
line-height: 240px; |
|||
font-size: 26px; |
|||
font-weight: bold; |
|||
color: #000; |
|||
cursor: pointer; |
|||
} |
|||
/* |
|||
.a { |
|||
transform: rotateY(0deg); |
|||
background: #ed1c24; |
|||
} |
|||
.b { |
|||
transform: rotateY(60deg); |
|||
background: #0072bc; |
|||
} |
|||
.c { |
|||
transform: rotateY(120deg); |
|||
background: #39b54a; |
|||
} |
|||
.d { |
|||
transform: rotateY(180deg); |
|||
background: #f26522; |
|||
} |
|||
.e { |
|||
transform: rotateY(240deg); |
|||
background: #630460; |
|||
} |
|||
.f { |
|||
transform: rotateY(300deg); |
|||
background: #8c6239; |
|||
} |
|||
*/ |
|||
|
|||
#nav { |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
} |
|||
#nav > button { |
|||
width: 64px; |
|||
height: 36px; |
|||
color: #666; |
|||
font: bold 16px arial; |
|||
text-align: center; |
|||
margin: 5px; |
|||
text-shadow: 0px 1px 0px #f5f5f5; |
|||
background: #f6f6f6; |
|||
border: solid 2px rgba(0, 0, 0, 0.4); |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
-webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); |
|||
-moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); |
|||
box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4); |
|||
cursor: pointer; |
|||
} |
|||
#nav > button:active, |
|||
#nav > button.down { |
|||
background: #dfdfdf; |
|||
border: solid 2px rgba(0, 0, 0, 0.6); |
|||
box-shadow: none; |
|||
} |
|||
|
|||
|
|||
|
|||
.container { |
|||
width: 250px; |
|||
height: 200px; |
|||
position: relative; |
|||
perspective: 1000px; |
|||
} |
|||
|
|||
.carousel { |
|||
height: 100%; |
|||
width: 100%; |
|||
position: absolute; |
|||
transform-style: preserve-3d; |
|||
transition: transform 1s; |
|||
} |
|||
|
|||
.item { |
|||
display: block; |
|||
position: absolute; |
|||
background: #000; |
|||
width: 250px; |
|||
height: 200px; |
|||
line-height: 200px; |
|||
font-size: .375rem; |
|||
text-align: center; |
|||
color: #FFF; |
|||
opacity: 0.95; |
|||
border-radius: 10px; |
|||
cursor: pointer; |
|||
} |
|||
.item a{ |
|||
/* display: block; */ |
|||
} |
|||
|
|||
.a { |
|||
transform: rotateY(0deg) translateZ(250px); |
|||
background: #ed1c24; |
|||
} |
|||
.b { |
|||
transform: rotateY(60deg) translateZ(250px); |
|||
background: #0072bc; |
|||
} |
|||
.c { |
|||
transform: rotateY(120deg) translateZ(250px); |
|||
background: #39b54a; |
|||
} |
|||
.d { |
|||
transform: rotateY(180deg) translateZ(250px); |
|||
background: #f26522; |
|||
} |
|||
.e { |
|||
transform: rotateY(240deg) translateZ(250px); |
|||
background: #630460; |
|||
} |
|||
.f { |
|||
transform: rotateY(300deg) translateZ(250px); |
|||
background: #8c6239; |
|||
} |
|||
|
|||
.next, .prev { |
|||
color: #444; |
|||
position: absolute; |
|||
top: 50%; |
|||
padding: 15px 30px; |
|||
cursor: pointer; |
|||
background: #CCC; |
|||
border-radius: 5px; |
|||
border-top: 1px solid #FFF; |
|||
box-shadow: 0 5px 0 #999; |
|||
transition: box-shadow 0.1s, top 0.1s; |
|||
z-index: 999; |
|||
} |
|||
.next:hover, .prev:hover { color: #000; } |
|||
.next:active, .prev:active { |
|||
top: 51%; |
|||
box-shadow: 0 1px 0 #999; |
|||
} |
|||
.next { right: .75rem; } |
|||
.prev { left: .75rem; } |
|||
|
|||
|
After Width: 183 | Height: 89 | Size: 13 KiB |
|
After Width: 183 | Height: 89 | Size: 13 KiB |
|
After Width: 1922 | Height: 145 | Size: 104 KiB |
|
After Width: 20 | Height: 20 | Size: 326 B |
|
After Width: 20 | Height: 20 | Size: 370 B |
|
After Width: 64 | Height: 64 | Size: 1.2 KiB |
|
After Width: 368 | Height: 218 | Size: 1.4 KiB |
|
After Width: 400 | Height: 200 | Size: 60 KiB |
|
After Width: 400 | Height: 200 | Size: 54 KiB |
|
After Width: 40 | Height: 200 | Size: 8.4 KiB |
|
After Width: 400 | Height: 280 | Size: 72 KiB |
|
After Width: 40 | Height: 200 | Size: 8.3 KiB |
@ -0,0 +1,138 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> |
|||
<meta http-equiv="Pragma" content="no-cache" /> |
|||
<meta http-equiv="Expires" content="0" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/common.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/index.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>首页</title> |
|||
</head> |
|||
<body> |
|||
<div class="ai-wrapper"> |
|||
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> |
|||
<div class="ai-header-wrapper"> |
|||
<div class="ai-header"> |
|||
<!-- <div class="header-btn header-home"><span></span><p>首页</p></div> --> |
|||
<div class="header-title"> |
|||
<h2>AI编程机器人体验系统</h2> |
|||
</div> |
|||
<div class="header-btn header-login"><span></span><p>登录</p></div> |
|||
</div> |
|||
</div> |
|||
<div class="ai-index"> |
|||
<!-- no-box-style --> |
|||
<ul class="index-list list-left no-box-style"> |
|||
<li class="animate__animated animate__backInLeft"> |
|||
<!-- page1.html --> |
|||
<a id="page1" href="javascript:;"> |
|||
<p>编程体验</p> |
|||
<span>Programming experience</span> |
|||
<img src="./images/index-an1.webp" alt="编程体验" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInLeft"> |
|||
<!-- page2.html --> |
|||
<a id="page2" href="javascript:;"> |
|||
<p>场景演示</p> |
|||
<span>Scene presentation</span> |
|||
<img src="./images/index-an2.webp" alt="场景演示" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInLeft"> |
|||
<a href="javascript:;"> |
|||
<p>AI资源库</p> |
|||
<span>AI resource library</span> |
|||
<img src="./images/index-an3.webp" alt="AI资源库" /> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
<div class="index-middle"> |
|||
<img class="ai-human" src="./images/animation.webp" alt="机器人" /> |
|||
<img class="ai-bottom" src="./images/an-bottom.webp" alt="底部光效" /> |
|||
</div> |
|||
<!-- no-box-style --> |
|||
<ul class="index-list list-right no-box-style"> |
|||
<li class="animate__animated animate__backInRight"> |
|||
<a id="page4" href="javascript:;"> |
|||
<p>实战竞赛</p> |
|||
<span>Actual combat</span> |
|||
<img src="./images/index-an4.webp" alt="实战竞赛" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInRight"> |
|||
<a href="javascript:;"> |
|||
<p>作品展示</p> |
|||
<span>Work display</span> |
|||
<img src="./images/index-an5.webp" alt="作品展示" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInRight"> |
|||
<a id="aiChat" href="javascript:;"> |
|||
<p>AI数字人</p> |
|||
<span>AI digital human</span> |
|||
<img src="./images/index-an6.webp" alt="AI数字人" /> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="js/libs/flexible.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function () { |
|||
$('.list-left li').hover( |
|||
function() { |
|||
$(this).removeClass('animate__backInLeft').addClass('animate__bounce'); |
|||
}, |
|||
function() { |
|||
$(this).removeClass('animate__bounce') |
|||
} |
|||
); |
|||
|
|||
$('.list-right li').hover( |
|||
function() { |
|||
$(this).removeClass('animate__backInRight').addClass('animate__headShake'); |
|||
}, |
|||
function() { |
|||
$(this).removeClass('animate__headShake') |
|||
} |
|||
); |
|||
|
|||
$('.index-list li').on('click', function () { |
|||
const _this = $(this) |
|||
$('.ai-human').css('animation-duration', '0.2s').addClass('animate__animated animate__flash') |
|||
setTimeout(function () { |
|||
$('.list-left li').removeClass('animate__backInLeft').addClass('animate__animated animate__backOutLeft') |
|||
$('.list-right li').removeClass('animate__backInRight').addClass('animate__animated animate__backOutRight') |
|||
setTimeout(function(){ |
|||
// window.top.location.href = 'ai_chat.html'; |
|||
const href = _this.find('a').attr('id'); |
|||
if (href === 'page1') { |
|||
window.location.href = 'page1.html'; |
|||
} else if (href === 'page2') { |
|||
window.location.href = 'page2.html'; |
|||
} else if (href === 'page4') { |
|||
window.location.href = 'page4.html'; |
|||
} else if (href === 'aiChat') { |
|||
window.location.href = 'ai_chat.html'; |
|||
} else { |
|||
// 其他情况的处理逻辑 |
|||
} |
|||
return false; |
|||
},1000) |
|||
}, 1000) |
|||
}) |
|||
}) |
|||
</script> |
|||
</html> |
|||
@ -0,0 +1,138 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> |
|||
<meta http-equiv="Pragma" content="no-cache" /> |
|||
<meta http-equiv="Expires" content="0" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/common.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/index.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>首页</title> |
|||
</head> |
|||
<body> |
|||
<div class="ai-wrapper"> |
|||
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> |
|||
<div class="ai-header-wrapper"> |
|||
<div class="ai-header"> |
|||
<!-- <div class="header-btn header-home"><span></span><p>首页</p></div> --> |
|||
<div class="header-title"> |
|||
<h2>AI编程机器人体验系统</h2> |
|||
</div> |
|||
<div class="header-btn header-login"><span></span><p>登录</p></div> |
|||
</div> |
|||
</div> |
|||
<div class="ai-index"> |
|||
<!-- no-box-style --> |
|||
<ul class="index-list list-left"> |
|||
<li class="animate__animated animate__backInLeft"> |
|||
<!-- page1.html --> |
|||
<a id="page1" href="javascript:;"> |
|||
<p>编程体验</p> |
|||
<span>Programming experience</span> |
|||
<img src="./images/index-an1.webp" alt="编程体验" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInLeft"> |
|||
<!-- page2.html --> |
|||
<a id="page2" href="javascript:;"> |
|||
<p>场景演示</p> |
|||
<span>Scene presentation</span> |
|||
<img src="./images/index-an2.webp" alt="场景演示" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInLeft"> |
|||
<a href="javascript:;"> |
|||
<p>AI资源库</p> |
|||
<span>AI resource library</span> |
|||
<img src="./images/index-an3.webp" alt="AI资源库" /> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
<div class="index-middle"> |
|||
<img class="ai-human" src="./images/animation.webp" alt="机器人" /> |
|||
<img class="ai-bottom" src="./images/an-bottom.webp" alt="底部光效" /> |
|||
</div> |
|||
<!-- no-box-style --> |
|||
<ul class="index-list list-right"> |
|||
<li class="animate__animated animate__backInRight"> |
|||
<a id="page4" href="javascript:;"> |
|||
<p>实战竞赛</p> |
|||
<span>Actual combat</span> |
|||
<img src="./images/index-an4.webp" alt="实战竞赛" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInRight"> |
|||
<a href="javascript:;"> |
|||
<p>作品展示</p> |
|||
<span>Work display</span> |
|||
<img src="./images/index-an5.webp" alt="作品展示" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInRight"> |
|||
<a id="aiChat" href="javascript:;"> |
|||
<p>AI数字人</p> |
|||
<span>AI digital human</span> |
|||
<img src="./images/index-an6.webp" alt="AI数字人" /> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="js/libs/flexible.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function () { |
|||
$('.list-left li').hover( |
|||
function() { |
|||
$(this).removeClass('animate__backInLeft').addClass('animate__bounce'); |
|||
}, |
|||
function() { |
|||
$(this).removeClass('animate__bounce') |
|||
} |
|||
); |
|||
|
|||
$('.list-right li').hover( |
|||
function() { |
|||
$(this).removeClass('animate__backInRight').addClass('animate__headShake'); |
|||
}, |
|||
function() { |
|||
$(this).removeClass('animate__headShake') |
|||
} |
|||
); |
|||
|
|||
$('.index-list li').on('click', function () { |
|||
const _this = $(this) |
|||
$('.ai-human').css('animation-duration', '0.2s').addClass('animate__animated animate__flash') |
|||
setTimeout(function () { |
|||
$('.list-left li').removeClass('animate__backInLeft').addClass('animate__animated animate__backOutLeft') |
|||
$('.list-right li').removeClass('animate__backInRight').addClass('animate__animated animate__backOutRight') |
|||
setTimeout(function(){ |
|||
// window.top.location.href = 'ai_chat.html'; |
|||
const href = _this.find('a').attr('id'); |
|||
if (href === 'page1') { |
|||
window.location.href = 'page1.html'; |
|||
} else if (href === 'page2') { |
|||
window.location.href = 'page2.html'; |
|||
} else if (href === 'page4') { |
|||
window.location.href = 'page4.html'; |
|||
} else if (href === 'aiChat') { |
|||
window.location.href = 'ai_chat.html'; |
|||
} else { |
|||
// 其他情况的处理逻辑 |
|||
} |
|||
return false; |
|||
},1000) |
|||
}, 1000) |
|||
}) |
|||
}) |
|||
</script> |
|||
</html> |
|||
@ -0,0 +1,138 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> |
|||
<meta http-equiv="Pragma" content="no-cache" /> |
|||
<meta http-equiv="Expires" content="0" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/common.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/index.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>首页</title> |
|||
</head> |
|||
<body> |
|||
<div class="ai-wrapper"> |
|||
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> |
|||
<div class="ai-header-wrapper"> |
|||
<div class="ai-header"> |
|||
<!-- <div class="header-btn header-home"><span></span><p>首页</p></div> --> |
|||
<div class="header-title"> |
|||
<h2>AI编程机器人体验系统</h2> |
|||
</div> |
|||
<div class="header-btn header-login"><span></span><p>登录</p></div> |
|||
</div> |
|||
</div> |
|||
<div class="ai-index"> |
|||
<!-- no-box-style --> |
|||
<ul class="index-list list-left other-bg"> |
|||
<li class="animate__animated animate__backInLeft"> |
|||
<!-- page1.html --> |
|||
<a id="page1" href="javascript:;"> |
|||
<p>编程体验</p> |
|||
<span>Programming experience</span> |
|||
<img src="./images/index-an1.webp" alt="编程体验" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInLeft"> |
|||
<!-- page2.html --> |
|||
<a id="page2" href="javascript:;"> |
|||
<p>场景演示</p> |
|||
<span>Scene presentation</span> |
|||
<img src="./images/index-an2.webp" alt="场景演示" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInLeft"> |
|||
<a href="javascript:;"> |
|||
<p>AI资源库</p> |
|||
<span>AI resource library</span> |
|||
<img src="./images/index-an3.webp" alt="AI资源库" /> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
<div class="index-middle"> |
|||
<img class="ai-human" src="./images/animation.webp" alt="机器人" /> |
|||
<img class="ai-bottom" src="./images/an-bottom.webp" alt="底部光效" /> |
|||
</div> |
|||
<!-- no-box-style --> |
|||
<ul class="index-list list-right other-bg"> |
|||
<li class="animate__animated animate__backInRight"> |
|||
<a id="page4" href="javascript:;"> |
|||
<p>实战竞赛</p> |
|||
<span>Actual combat</span> |
|||
<img src="./images/index-an4.webp" alt="实战竞赛" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInRight"> |
|||
<a href="javascript:;"> |
|||
<p>作品展示</p> |
|||
<span>Work display</span> |
|||
<img src="./images/index-an5.webp" alt="作品展示" /> |
|||
</a> |
|||
</li> |
|||
<li class="animate__animated animate__backInRight"> |
|||
<a id="aiChat" href="javascript:;"> |
|||
<p>AI数字人</p> |
|||
<span>AI digital human</span> |
|||
<img src="./images/index-an6.webp" alt="AI数字人" /> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="js/libs/flexible.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function () { |
|||
$('.list-left li').hover( |
|||
function() { |
|||
$(this).removeClass('animate__backInLeft').addClass('animate__bounce'); |
|||
}, |
|||
function() { |
|||
$(this).removeClass('animate__bounce') |
|||
} |
|||
); |
|||
|
|||
$('.list-right li').hover( |
|||
function() { |
|||
$(this).removeClass('animate__backInRight').addClass('animate__headShake'); |
|||
}, |
|||
function() { |
|||
$(this).removeClass('animate__headShake') |
|||
} |
|||
); |
|||
|
|||
$('.index-list li').on('click', function () { |
|||
const _this = $(this) |
|||
$('.ai-human').css('animation-duration', '0.2s').addClass('animate__animated animate__flash') |
|||
setTimeout(function () { |
|||
$('.list-left li').removeClass('animate__backInLeft').addClass('animate__animated animate__backOutLeft') |
|||
$('.list-right li').removeClass('animate__backInRight').addClass('animate__animated animate__backOutRight') |
|||
setTimeout(function(){ |
|||
// window.top.location.href = 'ai_chat.html'; |
|||
const href = _this.find('a').attr('id'); |
|||
if (href === 'page1') { |
|||
window.location.href = 'page1.html'; |
|||
} else if (href === 'page2') { |
|||
window.location.href = 'page2.html'; |
|||
} else if (href === 'page4') { |
|||
window.location.href = 'page4.html'; |
|||
} else if (href === 'aiChat') { |
|||
window.location.href = 'ai_chat.html'; |
|||
} else { |
|||
// 其他情况的处理逻辑 |
|||
} |
|||
return false; |
|||
},1000) |
|||
}, 1000) |
|||
}) |
|||
}) |
|||
</script> |
|||
</html> |
|||
@ -0,0 +1,23 @@ |
|||
var ajaxUrl = 'http://192.168.99.86:3001' |
|||
|
|||
function FetchChatTalk () { |
|||
$.ajax({ |
|||
url: ajaxUrl + '/api/v1/workspace/dxhtsg/chat', |
|||
type: 'POST', |
|||
headers: { |
|||
"Authorization": "Bearer XVSPT0T-6P54SZH-QP36QKJ-KK77TN6" |
|||
}, |
|||
contentType:'application/json', |
|||
dataType: "json", |
|||
data: JSON.stringify({ |
|||
"message": '你是谁', |
|||
"mode":"chat" |
|||
}), |
|||
success: function (res) { |
|||
console.log('res',res) |
|||
}, |
|||
error: function (err) { |
|||
console.log(err); |
|||
} |
|||
}); |
|||
} |
|||
@ -0,0 +1,147 @@ |
|||
(function(win, lib) { |
|||
var doc = win.document |
|||
var docEl = doc.documentElement |
|||
var metaEl = doc.querySelector('meta[name="viewport"]') |
|||
var flexibleEl = doc.querySelector('meta[name="flexible"]') |
|||
var dpr = 0 |
|||
var scale = 0 |
|||
var tid |
|||
var flexible = lib.flexible || (lib.flexible = {}) |
|||
|
|||
if (metaEl) { |
|||
console.warn('将根据已有的meta标签来设置缩放比例') |
|||
var match = metaEl |
|||
.getAttribute('content') |
|||
// eslint-disable-next-line no-useless-escape
|
|||
.match(/initial\-scale=([\d\.]+)/) |
|||
if (match) { |
|||
scale = parseFloat(match[1]) |
|||
dpr = parseInt(1 / scale) |
|||
} |
|||
} else if (flexibleEl) { |
|||
var content = flexibleEl.getAttribute('content') |
|||
if (content) { |
|||
// eslint-disable-next-line no-useless-escape
|
|||
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) |
|||
// eslint-disable-next-line no-useless-escape
|
|||
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) |
|||
if (initialDpr) { |
|||
dpr = parseFloat(initialDpr[1]) |
|||
scale = parseFloat((1 / dpr).toFixed(2)) |
|||
} |
|||
if (maximumDpr) { |
|||
dpr = parseFloat(maximumDpr[1]) |
|||
scale = parseFloat((1 / dpr).toFixed(2)) |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (!dpr && !scale) { |
|||
// eslint-disable-next-line no-unused-vars
|
|||
var isAndroid = win.navigator.appVersion.match(/android/gi) |
|||
var isIPhone = win.navigator.appVersion.match(/iphone/gi) |
|||
var devicePixelRatio = win.devicePixelRatio |
|||
if (isIPhone) { |
|||
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
|
|||
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { |
|||
dpr = 3 |
|||
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { |
|||
dpr = 2 |
|||
} else { |
|||
dpr = 1 |
|||
} |
|||
} else { |
|||
// 其他设备下，仍旧使用1倍的方案
|
|||
dpr = 1 |
|||
} |
|||
scale = 1 / dpr |
|||
} |
|||
|
|||
docEl.setAttribute('data-dpr', dpr) |
|||
if (!metaEl) { |
|||
metaEl = doc.createElement('meta') |
|||
metaEl.setAttribute('name', 'viewport') |
|||
metaEl.setAttribute( |
|||
'content', |
|||
'initial-scale=' + |
|||
scale + |
|||
', maximum-scale=' + |
|||
scale + |
|||
', minimum-scale=' + |
|||
scale + |
|||
', user-scalable=no' |
|||
) |
|||
if (docEl.firstElementChild) { |
|||
docEl.firstElementChild.appendChild(metaEl) |
|||
} else { |
|||
var wrap = doc.createElement('div') |
|||
wrap.appendChild(metaEl) |
|||
doc.write(wrap.innerHTML) |
|||
} |
|||
} |
|||
|
|||
function refreshRem() { |
|||
var width = docEl.getBoundingClientRect().width |
|||
// 最小1366px，最大适配2560px
|
|||
if (width / dpr < 1366) { |
|||
width = 1366 * dpr |
|||
} else if (width / dpr > 2560) { |
|||
width = 2560 * dpr |
|||
} |
|||
// 设置成24等份，设计稿时1920px的，这样1rem就是80px
|
|||
var rem = width / 24 |
|||
docEl.style.fontSize = rem + 'px' |
|||
flexible.rem = win.rem = rem |
|||
} |
|||
|
|||
win.addEventListener( |
|||
'resize', |
|||
function() { |
|||
clearTimeout(tid) |
|||
tid = setTimeout(refreshRem, 300) |
|||
}, |
|||
false |
|||
) |
|||
win.addEventListener( |
|||
'pageshow', |
|||
function(e) { |
|||
if (e.persisted) { |
|||
clearTimeout(tid) |
|||
tid = setTimeout(refreshRem, 300) |
|||
} |
|||
}, |
|||
false |
|||
) |
|||
|
|||
if (doc.readyState === 'complete') { |
|||
doc.body.style.fontSize = 12 * dpr + 'px' |
|||
} else { |
|||
doc.addEventListener( |
|||
'DOMContentLoaded', |
|||
// eslint-disable-next-line no-unused-vars
|
|||
function(e) { |
|||
doc.body.style.fontSize = 12 * dpr + 'px' |
|||
}, |
|||
false |
|||
) |
|||
} |
|||
|
|||
refreshRem() |
|||
|
|||
flexible.dpr = win.dpr = dpr |
|||
flexible.refreshRem = refreshRem |
|||
flexible.rem2px = function(d) { |
|||
var val = parseFloat(d) * this.rem |
|||
if (typeof d === 'string' && d.match(/rem$/)) { |
|||
val += 'px' |
|||
} |
|||
return val |
|||
} |
|||
flexible.px2rem = function(d) { |
|||
var val = parseFloat(d) / this.rem |
|||
if (typeof d === 'string' && d.match(/px$/)) { |
|||
val += 'rem' |
|||
} |
|||
return val |
|||
} |
|||
})(window, window['lib'] || (window['lib'] = {})) |
|||
2
js/libs/jquery-3.7.1.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
4
js/libs/jquery.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
js/libs/layer/layer.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,2 @@ |
|||
/*! layer mobile-v2.0.0 Web 通用弹出层组件 MIT License */ |
|||
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window); |
|||
1
js/libs/layer/mobile/need/layer.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 180 | Height: 100 | Size: 5.8 KiB |
|
After Width: 210 | Height: 61 | Size: 11 KiB |
1
js/libs/layer/theme/default/layer.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 60 | Height: 24 | Size: 5.7 KiB |
|
After Width: 37 | Height: 37 | Size: 701 B |
|
After Width: 32 | Height: 32 | Size: 1.7 KiB |
1
js/libs/layui/css/layui.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1 @@ |
|||
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#FAFAFA;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none} |
|||
1
js/libs/layui/css/modules/laydate/default/laydate.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 180 | Height: 100 | Size: 5.8 KiB |
|
After Width: 210 | Height: 61 | Size: 11 KiB |
1
js/libs/layui/css/modules/layer/default/layer.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
|
After Width: 60 | Height: 24 | Size: 5.7 KiB |
|
After Width: 37 | Height: 37 | Size: 701 B |
|
After Width: 32 | Height: 32 | Size: 1.7 KiB |
554
js/libs/layui/font/iconfont.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
5
js/libs/layui/layui.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,205 @@ |
|||
/* |
|||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
|||
* |
|||
* Uses the built in easing capabilities added In jQuery 1.1 |
|||
* to offer multiple easing options |
|||
* |
|||
* TERMS OF USE - jQuery Easing |
|||
* |
|||
* Open source under the BSD License. |
|||
* |
|||
* Copyright © 2008 George McGinley Smith |
|||
* All rights reserved. |
|||
* |
|||
* Redistribution and use in source and binary forms, with or without modification, |
|||
* are permitted provided that the following conditions are met: |
|||
* |
|||
* Redistributions of source code must retain the above copyright notice, this list of |
|||
* conditions and the following disclaimer. |
|||
* Redistributions in binary form must reproduce the above copyright notice, this list |
|||
* of conditions and the following disclaimer in the documentation and/or other materials |
|||
* provided with the distribution. |
|||
* |
|||
* Neither the name of the author nor the names of contributors may be used to endorse |
|||
* or promote products derived from this software without specific prior written permission. |
|||
* |
|||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY |
|||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF |
|||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE |
|||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
|||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE |
|||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED |
|||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING |
|||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED |
|||
* OF THE POSSIBILITY OF SUCH DAMAGE. |
|||
* |
|||
*/ |
|||
|
|||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
|||
jQuery.easing['jswing'] = jQuery.easing['swing']; |
|||
|
|||
jQuery.extend( jQuery.easing, |
|||
{ |
|||
def: 'easeOutQuad', |
|||
swing: function (x, t, b, c, d) { |
|||
//alert(jQuery.easing.default);
|
|||
return jQuery.easing[jQuery.easing.def](x, t, b, c, d); |
|||
}, |
|||
easeInQuad: function (x, t, b, c, d) { |
|||
return c*(t/=d)*t + b; |
|||
}, |
|||
easeOutQuad: function (x, t, b, c, d) { |
|||
return -c *(t/=d)*(t-2) + b; |
|||
}, |
|||
easeInOutQuad: function (x, t, b, c, d) { |
|||
if ((t/=d/2) < 1) return c/2*t*t + b; |
|||
return -c/2 * ((--t)*(t-2) - 1) + b; |
|||
}, |
|||
easeInCubic: function (x, t, b, c, d) { |
|||
return c*(t/=d)*t*t + b; |
|||
}, |
|||
easeOutCubic: function (x, t, b, c, d) { |
|||
return c*((t=t/d-1)*t*t + 1) + b; |
|||
}, |
|||
easeInOutCubic: function (x, t, b, c, d) { |
|||
if ((t/=d/2) < 1) return c/2*t*t*t + b; |
|||
return c/2*((t-=2)*t*t + 2) + b; |
|||
}, |
|||
easeInQuart: function (x, t, b, c, d) { |
|||
return c*(t/=d)*t*t*t + b; |
|||
}, |
|||
easeOutQuart: function (x, t, b, c, d) { |
|||
return -c * ((t=t/d-1)*t*t*t - 1) + b; |
|||
}, |
|||
easeInOutQuart: function (x, t, b, c, d) { |
|||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b; |
|||
return -c/2 * ((t-=2)*t*t*t - 2) + b; |
|||
}, |
|||
easeInQuint: function (x, t, b, c, d) { |
|||
return c*(t/=d)*t*t*t*t + b; |
|||
}, |
|||
easeOutQuint: function (x, t, b, c, d) { |
|||
return c*((t=t/d-1)*t*t*t*t + 1) + b; |
|||
}, |
|||
easeInOutQuint: function (x, t, b, c, d) { |
|||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; |
|||
return c/2*((t-=2)*t*t*t*t + 2) + b; |
|||
}, |
|||
easeInSine: function (x, t, b, c, d) { |
|||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b; |
|||
}, |
|||
easeOutSine: function (x, t, b, c, d) { |
|||
return c * Math.sin(t/d * (Math.PI/2)) + b; |
|||
}, |
|||
easeInOutSine: function (x, t, b, c, d) { |
|||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; |
|||
}, |
|||
easeInExpo: function (x, t, b, c, d) { |
|||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; |
|||
}, |
|||
easeOutExpo: function (x, t, b, c, d) { |
|||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; |
|||
}, |
|||
easeInOutExpo: function (x, t, b, c, d) { |
|||
if (t==0) return b; |
|||
if (t==d) return b+c; |
|||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; |
|||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; |
|||
}, |
|||
easeInCirc: function (x, t, b, c, d) { |
|||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; |
|||
}, |
|||
easeOutCirc: function (x, t, b, c, d) { |
|||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b; |
|||
}, |
|||
easeInOutCirc: function (x, t, b, c, d) { |
|||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; |
|||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; |
|||
}, |
|||
easeInElastic: function (x, t, b, c, d) { |
|||
var s=1.70158;var p=0;var a=c; |
|||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; |
|||
if (a < Math.abs(c)) { a=c; var s=p/4; } |
|||
else var s = p/(2*Math.PI) * Math.asin (c/a); |
|||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
|||
}, |
|||
easeOutElastic: function (x, t, b, c, d) { |
|||
var s=1.70158;var p=0;var a=c; |
|||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; |
|||
if (a < Math.abs(c)) { a=c; var s=p/4; } |
|||
else var s = p/(2*Math.PI) * Math.asin (c/a); |
|||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; |
|||
}, |
|||
easeInOutElastic: function (x, t, b, c, d) { |
|||
var s=1.70158;var p=0;var a=c; |
|||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); |
|||
if (a < Math.abs(c)) { a=c; var s=p/4; } |
|||
else var s = p/(2*Math.PI) * Math.asin (c/a); |
|||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
|||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; |
|||
}, |
|||
easeInBack: function (x, t, b, c, d, s) { |
|||
if (s == undefined) s = 1.70158; |
|||
return c*(t/=d)*t*((s+1)*t - s) + b; |
|||
}, |
|||
easeOutBack: function (x, t, b, c, d, s) { |
|||
if (s == undefined) s = 1.70158; |
|||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; |
|||
}, |
|||
easeInOutBack: function (x, t, b, c, d, s) { |
|||
if (s == undefined) s = 1.70158; |
|||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; |
|||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; |
|||
}, |
|||
easeInBounce: function (x, t, b, c, d) { |
|||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; |
|||
}, |
|||
easeOutBounce: function (x, t, b, c, d) { |
|||
if ((t/=d) < (1/2.75)) { |
|||
return c*(7.5625*t*t) + b; |
|||
} else if (t < (2/2.75)) { |
|||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; |
|||
} else if (t < (2.5/2.75)) { |
|||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; |
|||
} else { |
|||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; |
|||
} |
|||
}, |
|||
easeInOutBounce: function (x, t, b, c, d) { |
|||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; |
|||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; |
|||
} |
|||
}); |
|||
|
|||
/* |
|||
* |
|||
* TERMS OF USE - EASING EQUATIONS |
|||
* |
|||
* Open source under the BSD License. |
|||
* |
|||
* Copyright © 2001 Robert Penner |
|||
* All rights reserved. |
|||
* |
|||
* Redistribution and use in source and binary forms, with or without modification, |
|||
* are permitted provided that the following conditions are met: |
|||
* |
|||
* Redistributions of source code must retain the above copyright notice, this list of |
|||
* conditions and the following disclaimer. |
|||
* Redistributions in binary form must reproduce the above copyright notice, this list |
|||
* of conditions and the following disclaimer in the documentation and/or other materials |
|||
* provided with the distribution. |
|||
* |
|||
* Neither the name of the author nor the names of contributors may be used to endorse |
|||
* or promote products derived from this software without specific prior written permission. |
|||
* |
|||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY |
|||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF |
|||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE |
|||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
|||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE |
|||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED |
|||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING |
|||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED |
|||
* OF THE POSSIBILITY OF SUCH DAMAGE. |
|||
* |
|||
*/ |
|||
@ -0,0 +1,891 @@ |
|||
(function ($) { |
|||
jQuery.fn.reverse = Array.prototype.reverse; |
|||
|
|||
var |
|||
// auxiliar functions
|
|||
aux = { |
|||
setup: function ($wrapper, $items, opts) { |
|||
|
|||
// set the wrappers position to relative
|
|||
$wrapper.css('position', 'relative'); |
|||
|
|||
// save the items position
|
|||
aux.saveInitialPosition($items); |
|||
|
|||
// set the items to absolute and assign top & left
|
|||
$items.each(function (i) { |
|||
var $item = $(this); |
|||
|
|||
$item.css({ |
|||
position: 'absolute', |
|||
left: $item.data('left'), |
|||
top: $item.data('top') |
|||
}); |
|||
}); |
|||
|
|||
// check how many items we have per row
|
|||
var rowCount = Math.floor($wrapper.width() / $items.width()), |
|||
// number of items to show is rowCount * n rows
|
|||
shown = rowCount * opts.rows, |
|||
// total number of rows
|
|||
totalRows = Math.ceil($items.length / rowCount); |
|||
|
|||
// save this values for later
|
|||
var config = {}; |
|||
config.currentRow = 1; |
|||
config.totalRows = totalRows; |
|||
config.rowCount = rowCount; |
|||
config.shownItems = shown; |
|||
$wrapper.data('config', config); |
|||
|
|||
// show n rowns
|
|||
$wrapper.children(':gt(' + (shown - 1) + ')').hide(); |
|||
|
|||
// assign row classes to the items
|
|||
$items.each(function (i) { |
|||
var $item = $(this), |
|||
row = Math.ceil((i + 1) / rowCount); |
|||
|
|||
$item.addClass('tj_row_' + row); |
|||
}); |
|||
|
|||
nav.setup($wrapper, $items, opts); |
|||
|
|||
}, |
|||
saveInitialPosition: function ($items) { |
|||
$items.each(function (i) { |
|||
var $item = $(this); |
|||
|
|||
$item.data({ |
|||
left: $item.position().left + 'px', |
|||
top: $item.position().top+ 'px' |
|||
}); |
|||
}); |
|||
} |
|||
}, |
|||
// navigation types
|
|||
nav = { |
|||
setup: function ($wrapper, $items, opts) { |
|||
nav[opts.type.mode].setup($wrapper, $items, opts); |
|||
}, |
|||
def: { |
|||
setup: function ($wrapper, $items, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
$items.each(function (i) { |
|||
var $item = $(this), |
|||
row = Math.ceil((i + 1) / config.rowCount), |
|||
t, |
|||
f = row % opts.rows; |
|||
|
|||
if (f === 1) { |
|||
t = '0px'; |
|||
} else if (f === 0) { |
|||
t = (opts.rows - 1) * $items.height() + 'px'; |
|||
} else { |
|||
t = (f - 1) * $items.height() + 'px'; |
|||
} |
|||
|
|||
$item.css({ top: t }); |
|||
}); |
|||
}, |
|||
pagination: function ($wrapper, dir, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
if ((dir === 1 && config.currentRow + opts.rows > config.totalRows) || |
|||
(dir === -1 && config.currentRow - opts.rows <= 0) |
|||
) { |
|||
$wrapper.data('anim', false); |
|||
return false; |
|||
} |
|||
|
|||
// var currentRows = '', nextRows = '';
|
|||
|
|||
// for (var i = 0; i < opts.rows; ++i) {
|
|||
// currentRows += '.tj_row_' + (config.currentRow + i) + ',';
|
|||
|
|||
// (dir === 1)
|
|||
// ? nextRows += '.tj_row_' + (config.currentRow + opts.rows + i) + ','
|
|||
// : nextRows += '.tj_row_' + (config.currentRow - 1 - i) + ',';
|
|||
// }
|
|||
|
|||
// 使用数组来存储选择器
|
|||
var currentRows = []; |
|||
var nextRows = []; |
|||
|
|||
// 获取当前行的起始位置
|
|||
var currentRowStart = config.currentRow; |
|||
|
|||
for (var i = 0; i < opts.rows; ++i) { |
|||
// 生成当前行选择器并存储到数组中
|
|||
currentRows.push('.tj_row_' + (currentRowStart + i)); |
|||
|
|||
// 根据方向计算下一行的选择器并存储到数组中
|
|||
if (dir === 1) { |
|||
nextRows.push('.tj_row_' + (currentRowStart + opts.rows + i)); |
|||
} else { |
|||
nextRows.push('.tj_row_' + (currentRowStart - 1 - i)); |
|||
} |
|||
} |
|||
|
|||
// 通过 join(',') 将数组中的选择器连接成字符串
|
|||
currentRows = currentRows.join(','); |
|||
nextRows = nextRows.join(','); |
|||
|
|||
|
|||
$wrapper.children(currentRows).hide(); |
|||
$wrapper.children(nextRows).show(); |
|||
|
|||
(dir === 1) ? config.currentRow += opts.rows : config.currentRow -= opts.rows; |
|||
|
|||
$wrapper.data('anim', false); |
|||
|
|||
$wrapper.data('config', config); |
|||
} |
|||
}, |
|||
fade: { |
|||
setup: function ($wrapper, $items, opts) { |
|||
// same like def mode
|
|||
nav['def'].setup($wrapper, $items, opts); |
|||
}, |
|||
pagination: function ($wrapper, dir, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
if ((dir === 1 && config.currentRow + opts.rows > config.totalRows) || |
|||
(dir === -1 && config.currentRow - opts.rows <= 0) |
|||
) { |
|||
$wrapper.data('anim', false); |
|||
return false; |
|||
} |
|||
|
|||
|
|||
|
|||
// var currentRows = '', nextRows = '';
|
|||
|
|||
// for (var i = 0; i < opts.rows; ++i) {
|
|||
// currentRows += '.tj_row_' + (config.currentRow + i) + ',';
|
|||
|
|||
// (dir === 1)
|
|||
// ? nextRows += '.tj_row_' + (config.currentRow + opts.rows + i) + ','
|
|||
// : nextRows += '.tj_row_' + (config.currentRow - 1 - i) + ',';
|
|||
// }
|
|||
|
|||
var currentRows = []; |
|||
var nextRows = []; |
|||
|
|||
for (var i = 0; i < opts.rows; ++i) { |
|||
currentRows.push('.tj_row_' + (config.currentRow + i)); |
|||
|
|||
if (dir === 1) { |
|||
nextRows.push('.tj_row_' + (config.currentRow + opts.rows + i)); |
|||
} else { |
|||
nextRows.push('.tj_row_' + (config.currentRow - 1 - i)); |
|||
} |
|||
} |
|||
|
|||
// 生成最终的选择器字符串
|
|||
currentRows = currentRows.join(','); |
|||
nextRows = nextRows.join(','); |
|||
|
|||
$wrapper.children(currentRows).fadeOut(opts.type.speed, opts.type.easing); |
|||
|
|||
var $nextRowElements = $wrapper.children(nextRows), |
|||
|
|||
totalNextRows = $nextRowElements.length, |
|||
cnt = 0; |
|||
|
|||
$nextRowElements.fadeIn(opts.type.speed, opts.type.easing, function () { |
|||
++cnt; |
|||
if (cnt === totalNextRows) { |
|||
$wrapper.data('anim', false); |
|||
} |
|||
}); |
|||
|
|||
(dir === 1) ? config.currentRow += opts.rows : config.currentRow -= opts.rows; |
|||
|
|||
$wrapper.data('config', config); |
|||
} |
|||
}, |
|||
seqfade: { |
|||
setup: function ($wrapper, $items, opts) { |
|||
// same like def mode
|
|||
nav['def'].setup($wrapper, $items, opts); |
|||
}, |
|||
pagination: function ($wrapper, dir, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
if ((dir === 1 && config.currentRow + opts.rows > config.totalRows) || |
|||
(dir === -1 && config.currentRow - opts.rows <= 0) |
|||
) { |
|||
$wrapper.data('anim', false); |
|||
return false; |
|||
} |
|||
|
|||
// var currentRows = '', nextRows = '';
|
|||
// for (var i = 0; i < opts.rows; ++i) {
|
|||
// currentRows += '.tj_row_' + (config.currentRow + i) + ',';
|
|||
|
|||
// (dir === 1)
|
|||
// ? nextRows += '.tj_row_' + (config.currentRow + opts.rows + i) + ','
|
|||
// : nextRows += '.tj_row_' + (config.currentRow - 1 - i) + ',';
|
|||
// }
|
|||
|
|||
// 使用数组来收集结果
|
|||
var currentRows = []; |
|||
var nextRows = []; |
|||
|
|||
// 获取当前行和下一行的起始位置
|
|||
var currentStart = config.currentRow; |
|||
var nextStartOffset = opts.rows; |
|||
|
|||
for (var i = 0; i < opts.rows; ++i) { |
|||
// 将当前行的选择器加入数组
|
|||
currentRows.push('.tj_row_' + (currentStart + i)); |
|||
|
|||
// 根据方向计算下一行的选择器并加入数组
|
|||
if (dir === 1) { |
|||
nextRows.push('.tj_row_' + (currentStart + nextStartOffset + i)); |
|||
} else { |
|||
nextRows.push('.tj_row_' + (currentStart - 1 - i)); |
|||
} |
|||
} |
|||
|
|||
// 通过 join(',') 将数组中的选择器连接成字符串
|
|||
currentRows = currentRows.join(','); |
|||
nextRows = nextRows.join(','); |
|||
|
|||
var seq_t = opts.type.factor; |
|||
|
|||
var $currentRowElements; |
|||
(dir === 1) |
|||
? $currentRowElements = $wrapper.children(currentRows) |
|||
: $currentRowElements = $wrapper.children(currentRows).reverse(); |
|||
|
|||
$currentRowElements.each(function (i) { |
|||
var $el = $(this); |
|||
setTimeout(function () { |
|||
$el.fadeOut(opts.type.speed, opts.type.easing) |
|||
}, seq_t + i * seq_t); |
|||
}); |
|||
|
|||
var $nextRowElements; |
|||
(dir === 1) |
|||
? $nextRowElements = $wrapper.children(nextRows) |
|||
: $nextRowElements = $wrapper.children(nextRows).reverse(); |
|||
|
|||
var total_elems = $nextRowElements.length, |
|||
cnt = 0; |
|||
|
|||
$nextRowElements.each(function (i) { |
|||
var $el = $(this); |
|||
setTimeout(function () { |
|||
$el.fadeIn(opts.type.speed, opts.type.easing, function () { |
|||
++cnt; |
|||
if (cnt === total_elems) { |
|||
$wrapper.data('anim', false); |
|||
} |
|||
}) |
|||
}, (seq_t * 2) + i * seq_t); |
|||
}); |
|||
|
|||
(dir === 1) ? config.currentRow += opts.rows : config.currentRow -= opts.rows; |
|||
|
|||
$wrapper.data('config', config); |
|||
} |
|||
}, |
|||
updown: { |
|||
setup: function ($wrapper, $items, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
$wrapper.children(':gt(' + (config.shownItems - 1) + ')').css('opacity', 0); |
|||
|
|||
$items.each(function (i) { |
|||
var $item = $(this), |
|||
row = Math.ceil((i + 1) / config.rowCount), |
|||
t = $item.position().top, |
|||
f = row % opts.rows; |
|||
|
|||
if (row > opts.rows) { |
|||
t = (opts.rows * $items.height()); |
|||
} |
|||
|
|||
$item.css({ top: t + 'px' }); |
|||
}); |
|||
}, |
|||
pagination: function ($wrapper, dir, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
if ((dir === 1 && config.currentRow + opts.rows > config.totalRows) || |
|||
(dir === -1 && config.currentRow - 1 <= 0) |
|||
) { |
|||
$wrapper.data('anim', false); |
|||
return false; |
|||
} |
|||
|
|||
var movingRows = ''; |
|||
for (var i = 0; i <= opts.rows; ++i) { |
|||
if (i > 0) movingRows += ','; // 添加逗号作为分隔符
|
|||
movingRows += '.tj_row_' + (dir === 1 ? (config.currentRow + i) : (config.currentRow + (i - 1))); |
|||
} |
|||
|
|||
var $elements; |
|||
|
|||
(dir === 1) |
|||
? $elements = $wrapper.children(movingRows) |
|||
: $elements = $wrapper.children(movingRows).reverse(); |
|||
|
|||
var total_elems = $elements.length, |
|||
cnt = 0; |
|||
|
|||
$elements.each(function (i) { |
|||
var $el = $(this), |
|||
row = $el.attr('class'), |
|||
animParam = {}, |
|||
|
|||
currentRow = config.currentRow; |
|||
|
|||
// if first row fade out
|
|||
// if last row fade in
|
|||
// for all the rows move them up / down
|
|||
if (dir === 1) { |
|||
if (row === 'tj_row_' + (currentRow)) { |
|||
animParam.opacity = 0; |
|||
} |
|||
else if (row === 'tj_row_' + (currentRow + opts.rows)) { |
|||
animParam.opacity = 1; |
|||
} |
|||
} |
|||
else { |
|||
if (row === 'tj_row_' + (currentRow - 1)) { |
|||
animParam.opacity = 1; |
|||
} |
|||
else if (row === 'tj_row_' + (currentRow + opts.rows - 1)) { |
|||
animParam.opacity = 0; |
|||
} |
|||
} |
|||
|
|||
$el.show(); |
|||
|
|||
(dir === 1) |
|||
? animParam.top = $el.position().top - $el.height() + 'px' |
|||
: animParam.top = $el.position().top + $el.height() + 'px' |
|||
|
|||
$el.stop().animate(animParam, opts.type.speed, opts.type.easing, function () { |
|||
if (parseInt(animParam.top) < 0 || parseInt(animParam.top) > $el.height() * (opts.rows - 1)) |
|||
$el.hide(); |
|||
|
|||
++cnt; |
|||
if (cnt === total_elems) { |
|||
$wrapper.data('anim', false); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
(dir === 1) ? config.currentRow += 1 : config.currentRow -= 1; |
|||
|
|||
$wrapper.data('config', config); |
|||
} |
|||
}, |
|||
sequpdown: { |
|||
setup: function ($wrapper, $items, opts) { |
|||
// same like updown mode
|
|||
nav['updown'].setup($wrapper, $items, opts); |
|||
}, |
|||
pagination: function ($wrapper, dir, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
if ((dir === 1 && config.currentRow + opts.rows > config.totalRows) || |
|||
(dir === -1 && config.currentRow - 1 <= 0) |
|||
) { |
|||
$wrapper.data('anim', false); |
|||
return false; |
|||
} |
|||
|
|||
var movingRows = ''; |
|||
|
|||
for (var i = 0; i <= opts.rows; ++i) { |
|||
if (i > 0) movingRows += ','; // 添加逗号作为分隔符
|
|||
movingRows += '.tj_row_' + (dir === 1 ? (config.currentRow + i) : (config.currentRow + (i - 1))); |
|||
} |
|||
|
|||
var seq_t = opts.type.factor, |
|||
$elements; |
|||
|
|||
var dircond = 1; |
|||
if (opts.type.reverse) dircond = -1; |
|||
(dir === dircond) |
|||
? $elements = $wrapper.children(movingRows) |
|||
: $elements = $wrapper.children(movingRows).reverse(); |
|||
|
|||
var total_elems = $elements.length, |
|||
cnt = 0; |
|||
|
|||
$elements.each(function (i) { |
|||
var $el = $(this), |
|||
row = $el.attr('class'), |
|||
animParam = {}, |
|||
|
|||
currentRow = config.currentRow; |
|||
|
|||
setTimeout(function () { |
|||
// if first row fade out
|
|||
// if last row fade in
|
|||
// for all the rows move them up / down
|
|||
if (dir === 1) { |
|||
if (row === 'tj_row_' + (currentRow)) { |
|||
animParam.opacity = 0; |
|||
} |
|||
else if (row === 'tj_row_' + (currentRow + opts.rows)) { |
|||
animParam.opacity = 1; |
|||
} |
|||
} |
|||
else { |
|||
if (row === 'tj_row_' + (currentRow - 1)) { |
|||
animParam.opacity = 1; |
|||
} |
|||
else if (row === 'tj_row_' + (currentRow + opts.rows - 1)) { |
|||
animParam.opacity = 0; |
|||
} |
|||
} |
|||
|
|||
$el.show(); |
|||
|
|||
(dir === 1) |
|||
? animParam.top = $el.position().top - $el.height() + 'px' |
|||
: animParam.top = $el.position().top + $el.height() + 'px' |
|||
|
|||
$el.stop().animate(animParam, opts.type.speed, opts.type.easing, function () { |
|||
if (parseInt(animParam.top) < 0 || parseInt(animParam.top) > $el.height() * (opts.rows - 1)) |
|||
$el.hide(); |
|||
|
|||
++cnt; |
|||
if (cnt === total_elems) { |
|||
$wrapper.data('anim', false); |
|||
} |
|||
}); |
|||
}, seq_t + i * seq_t); |
|||
}); |
|||
|
|||
(dir === 1) ? config.currentRow += 1 : config.currentRow -= 1; |
|||
|
|||
$wrapper.data('config', config); |
|||
} |
|||
}, |
|||
showhide: { |
|||
setup: function ($wrapper, $items, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
$items.each(function (i) { |
|||
var $item = $(this), |
|||
row = Math.ceil((i + 1) / config.rowCount), |
|||
t, |
|||
f = row % opts.rows; |
|||
|
|||
if (f === 1) { |
|||
t = '0px'; |
|||
} else if (f === 0) { |
|||
t = (opts.rows - 1) * $items.height() + 'px'; |
|||
} else { |
|||
t = (f - 1) * $items.height() + 'px'; |
|||
} |
|||
|
|||
$item.css({ top: t }); |
|||
}); |
|||
}, |
|||
pagination: function ($wrapper, dir, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
if ((dir === 1 && config.currentRow + opts.rows > config.totalRows) || |
|||
(dir === -1 && config.currentRow - opts.rows <= 0) |
|||
) { |
|||
$wrapper.data('anim', false); |
|||
return false; |
|||
} |
|||
|
|||
// var currentRows = '', nextRows = '';
|
|||
|
|||
// for (var i = 0; i < opts.rows; ++i) {
|
|||
// currentRows += '.tj_row_' + (config.currentRow + i) + ',';
|
|||
|
|||
// (dir === 1)
|
|||
// ? nextRows += '.tj_row_' + (config.currentRow + opts.rows + i) + ','
|
|||
// : nextRows += '.tj_row_' + (config.currentRow - 1 - i) + ',';
|
|||
// }
|
|||
|
|||
// 使用数组来存储选择器
|
|||
var currentRows = []; |
|||
var nextRows = []; |
|||
|
|||
// 获取当前行的起始位置
|
|||
var currentRowStart = config.currentRow; |
|||
|
|||
for (var i = 0; i < opts.rows; ++i) { |
|||
// 生成当前行选择器并存储到数组中
|
|||
currentRows.push('.tj_row_' + (currentRowStart + i)); |
|||
|
|||
// 根据方向计算下一行的选择器并存储到数组中
|
|||
if (dir === 1) { |
|||
nextRows.push('.tj_row_' + (currentRowStart + opts.rows + i)); |
|||
} else { |
|||
nextRows.push('.tj_row_' + (currentRowStart - 1 - i)); |
|||
} |
|||
} |
|||
|
|||
// 通过 join(',') 将数组中的选择器连接成字符串
|
|||
currentRows = currentRows.join(','); |
|||
nextRows = nextRows.join(','); |
|||
|
|||
|
|||
$wrapper.children(currentRows).hide(opts.type.speed, opts.type.easing); |
|||
|
|||
var $nextRowElements = $wrapper.children(nextRows), |
|||
totalNextRows = $nextRowElements.length, |
|||
cnt = 0; |
|||
|
|||
$nextRowElements.show(opts.type.speed, opts.type.easing, function () { |
|||
++cnt; |
|||
if (cnt === totalNextRows) { |
|||
$wrapper.data('anim', false); |
|||
} |
|||
}); |
|||
|
|||
(dir === 1) ? config.currentRow += opts.rows : config.currentRow -= opts.rows; |
|||
|
|||
$wrapper.data('config', config); |
|||
} |
|||
}, |
|||
disperse: { |
|||
setup: function ($wrapper, $items, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
$items.each(function (i) { |
|||
var $item = $(this), |
|||
row = Math.ceil((i + 1) / config.rowCount), |
|||
t, |
|||
f = row % opts.rows; |
|||
|
|||
if (f === 1) { |
|||
t = '0px'; |
|||
} else if (f === 0) { |
|||
t = (opts.rows - 1) * $items.height() + 'px'; |
|||
} else { |
|||
t = (f - 1) * $items.height() + 'px'; |
|||
} |
|||
|
|||
$item.css({ top: t }).data('top', t); |
|||
}); |
|||
}, |
|||
pagination: function ($wrapper, dir, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
if ((dir === 1 && config.currentRow + opts.rows > config.totalRows) || |
|||
(dir === -1 && config.currentRow - opts.rows <= 0) |
|||
) { |
|||
$wrapper.data('anim', false); |
|||
return false; |
|||
} |
|||
|
|||
// var currentRows = '', nextRows = '';
|
|||
// for (var i = 0; i < opts.rows; ++i) {
|
|||
// currentRows += '.tj_row_' + (config.currentRow + i) + ',';
|
|||
|
|||
// (dir === 1)
|
|||
// ? nextRows += '.tj_row_' + (config.currentRow + opts.rows + i) + ','
|
|||
// : nextRows += '.tj_row_' + (config.currentRow - 1 - i) + ',';
|
|||
// }
|
|||
|
|||
|
|||
// 使用数组来存储选择器
|
|||
var currentRows = []; |
|||
var nextRows = []; |
|||
|
|||
// 获取当前行的起始位置
|
|||
var currentRowStart = config.currentRow; |
|||
|
|||
for (var i = 0; i < opts.rows; ++i) { |
|||
// 生成当前行选择器并存储到数组中
|
|||
currentRows.push('.tj_row_' + (currentRowStart + i)); |
|||
|
|||
// 根据方向计算下一行的选择器并存储到数组中
|
|||
if (dir === 1) { |
|||
nextRows.push('.tj_row_' + (currentRowStart + opts.rows + i)); |
|||
} else { |
|||
nextRows.push('.tj_row_' + (currentRowStart - 1 - i)); |
|||
} |
|||
} |
|||
|
|||
// 通过 join(',') 将数组中的选择器连接成字符串
|
|||
currentRows = currentRows.join(','); |
|||
nextRows = nextRows.join(','); |
|||
|
|||
|
|||
$wrapper.children(currentRows).each(function (i) { |
|||
var $el = $(this); |
|||
$el.stop().animate({ |
|||
left: $el.position().left + Math.floor(Math.random() * 101) - 50 + 'px', |
|||
top: $el.position().top + Math.floor(Math.random() * 101) - 50 + 'px', |
|||
opacity: 0 |
|||
}, opts.type.speed, opts.type.easing, function () { |
|||
$el.css({ |
|||
left: $el.data('left'), |
|||
top: $el.data('top') |
|||
}).hide(); |
|||
}); |
|||
}); |
|||
|
|||
var $nextRowElements = $wrapper.children(nextRows); |
|||
total_elems = $nextRowElements.length, |
|||
cnt = 0; |
|||
|
|||
$nextRowElements.each(function (i) { |
|||
var $el = $(this); |
|||
|
|||
$el.css({ |
|||
left: parseInt($el.data('left')) + Math.floor(Math.random() * 301) - 150 + 'px', |
|||
top: parseInt($el.data('top')) + Math.floor(Math.random() * 301) - 150 + 'px', |
|||
opacity: 0 |
|||
}) |
|||
.show() |
|||
.animate({ |
|||
left: $el.data('left'), |
|||
top: $el.data('top'), |
|||
opacity: 1 |
|||
}, opts.type.speed, opts.type.easing, function () { |
|||
++cnt; |
|||
if (cnt === total_elems) { |
|||
$wrapper.data('anim', false); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
(dir === 1) ? config.currentRow += opts.rows : config.currentRow -= opts.rows; |
|||
|
|||
$wrapper.data('config', config); |
|||
} |
|||
}, |
|||
rows: { |
|||
setup: function ($wrapper, $items, opts) { |
|||
// same like def mode
|
|||
nav['def'].setup($wrapper, $items, opts); |
|||
}, |
|||
pagination: function ($wrapper, dir, opts) { |
|||
var config = $wrapper.data('config'); |
|||
|
|||
if ((dir === 1 && config.currentRow + opts.rows > config.totalRows) || |
|||
(dir === -1 && config.currentRow - opts.rows <= 0) |
|||
) { |
|||
$wrapper.data('anim', false); |
|||
return false; |
|||
} |
|||
|
|||
// var currentRows = '', nextRows = '';
|
|||
// for (var i = 0; i < opts.rows; ++i) {
|
|||
// currentRows += '.tj_row_' + (config.currentRow + i) + ',';
|
|||
|
|||
// (dir === 1)
|
|||
// ? nextRows += '.tj_row_' + (config.currentRow + opts.rows + i) + ','
|
|||
// : nextRows += '.tj_row_' + (config.currentRow - 1 - i) + ',';
|
|||
// }
|
|||
|
|||
// 使用数组来存储选择器
|
|||
var currentRows = []; |
|||
var nextRows = []; |
|||
|
|||
// 获取当前行的起始位置
|
|||
var currentRowStart = config.currentRow; |
|||
|
|||
for (var i = 0; i < opts.rows; ++i) { |
|||
// 生成当前行选择器并存储到数组中
|
|||
currentRows.push('.tj_row_' + (currentRowStart + i)); |
|||
|
|||
// 根据方向计算下一行的选择器并存储到数组中
|
|||
if (dir === 1) { |
|||
nextRows.push('.tj_row_' + (currentRowStart + opts.rows + i)); |
|||
} else { |
|||
nextRows.push('.tj_row_' + (currentRowStart - 1 - i)); |
|||
} |
|||
} |
|||
|
|||
// 通过 join(',') 将数组中的选择器连接成字符串
|
|||
currentRows = currentRows.join(','); |
|||
nextRows = nextRows.join(','); |
|||
|
|||
|
|||
$wrapper.children(currentRows).each(function (i) { |
|||
var $el = $(this), |
|||
rownmb = $el.attr('class').match(/tj_row_(\d+)/)[1], |
|||
diff; |
|||
|
|||
if (rownmb % 2 === 0) { |
|||
diff = opts.type.factor; |
|||
} |
|||
else { |
|||
diff = -opts.type.factor; |
|||
} |
|||
|
|||
$el.stop().animate({ |
|||
left: $el.position().left + diff + 'px', |
|||
opacity: 0 |
|||
}, opts.type.speed, opts.type.easing, function () { |
|||
$el.css({ |
|||
left: $el.data('left') |
|||
}).hide(); |
|||
}); |
|||
}); |
|||
|
|||
var $nextRowElements = $wrapper.children(nextRows); |
|||
total_elems = $nextRowElements.length, |
|||
cnt = 0; |
|||
|
|||
$nextRowElements.each(function (i) { |
|||
var $el = $(this), |
|||
rownmb = $el.attr('class').match(/tj_row_(\d+)/)[1], |
|||
diff; |
|||
|
|||
if (rownmb % 2 === 0) { |
|||
diff = opts.type.factor; |
|||
} |
|||
else { |
|||
diff = -opts.type.factor; |
|||
} |
|||
|
|||
$el.css({ |
|||
left: parseInt($el.data('left')) + diff + 'px', |
|||
opacity: 0 |
|||
}) |
|||
.show() |
|||
.animate({ |
|||
left: $el.data('left'), |
|||
opacity: 1 |
|||
}, opts.type.speed, opts.type.easing, function () { |
|||
++cnt; |
|||
if (cnt === total_elems) { |
|||
$wrapper.data('anim', false); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
(dir === 1) ? config.currentRow += opts.rows : config.currentRow -= opts.rows; |
|||
|
|||
$wrapper.data('config', config); |
|||
} |
|||
} |
|||
}, |
|||
methods = { |
|||
init: function (options) { |
|||
|
|||
if (this.length) { |
|||
|
|||
var settings = { |
|||
rows: 2, |
|||
navL: '#tj_prev', |
|||
navR: '#tj_next', |
|||
type: { |
|||
mode: 'def', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
|
|||
speed: 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
|
|||
easing: 'jswing', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
|
|||
factor: 50, // for seqfade, sequpdown, rows
|
|||
reverse: false // for sequpdown
|
|||
} |
|||
}; |
|||
|
|||
return this.each(function () { |
|||
|
|||
// if options exist, lets merge them with our default settings
|
|||
if (options) { |
|||
$.extend(settings, options); |
|||
} |
|||
|
|||
var $el = $(this).css('visibility', 'hidden'), |
|||
// the ul
|
|||
$wrapper = $el.find('ul.tj_gallery'), |
|||
// the items
|
|||
$thumbs = $wrapper.children('li'), |
|||
total = $thumbs.length, |
|||
// the navigation elements
|
|||
$p_nav = $(settings.navL), |
|||
$n_nav = $(settings.navR); |
|||
|
|||
// save current row for later (first visible row)
|
|||
//config.currentRow = 1;
|
|||
|
|||
// flag to control animation progress
|
|||
$wrapper.data('anim', false); |
|||
|
|||
// preload thumbs
|
|||
var loaded = 0; |
|||
$thumbs.find('img').each(function (i) { |
|||
var $img = $(this); |
|||
$('<img/>').on('load', function () { |
|||
++loaded; |
|||
if (loaded === total) { |
|||
// setup
|
|||
aux.setup($wrapper, $thumbs, settings); |
|||
$el.css('visibility', 'visible'); |
|||
|
|||
// navigation events
|
|||
if ($p_nav.length) { |
|||
$p_nav.on('click.gridnav', function (e) { |
|||
if ($wrapper.data('anim')) return false; |
|||
$wrapper.data('anim', true); |
|||
nav[settings.type.mode].pagination($wrapper, -1, settings); |
|||
return false; |
|||
}); |
|||
} |
|||
if ($n_nav.length) { |
|||
$n_nav.on('click.gridnav', function (e) { |
|||
if ($wrapper.data('anim')) return false; |
|||
$wrapper.data('anim', true); |
|||
nav[settings.type.mode].pagination($wrapper, 1, settings); |
|||
return false; |
|||
}); |
|||
} |
|||
/* |
|||
adds events to the mouse |
|||
*/ |
|||
// $el.on('mousewheel.gridnav', function (e, delta) {
|
|||
// if (delta > 0) {
|
|||
// if ($wrapper.data('anim')) return false;
|
|||
// $wrapper.data('anim', true);
|
|||
// nav[settings.type.mode].pagination($wrapper, -1, settings);
|
|||
// }
|
|||
// else {
|
|||
// if ($wrapper.data('anim')) return false;
|
|||
// $wrapper.data('anim', true);
|
|||
// nav[settings.type.mode].pagination($wrapper, 1, settings);
|
|||
// }
|
|||
// return false;
|
|||
// });
|
|||
|
|||
$el.on('wheel.gridnav', function(e) { |
|||
var delta = e.originalEvent.deltaY; // 使用 deltaY 来检测滚轮方向
|
|||
var direction = delta > 0 ? 1 : -1; |
|||
|
|||
if ($wrapper.data('anim')) { |
|||
return false; |
|||
} |
|||
|
|||
$wrapper.data('anim', true); |
|||
nav[settings.type.mode].pagination($wrapper, direction, settings); |
|||
|
|||
return false; |
|||
}); |
|||
} |
|||
}).attr('src', $img.attr('src')); |
|||
}); |
|||
|
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
$.fn.gridnav = function (method) { |
|||
if (methods[method]) { |
|||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); |
|||
} else if (typeof method === 'object' || !method) { |
|||
return methods.init.apply(this, arguments); |
|||
} else { |
|||
$.error('Method ' + method + ' does not exist on jQuery.gridnav'); |
|||
} |
|||
}; |
|||
})(jQuery); |
|||
@ -0,0 +1,400 @@ |
|||
/** |
|||
* PDFObject v2.3.0 |
|||
* https://github.com/pipwerks/PDFObject
|
|||
* @license |
|||
* Copyright (c) 2008-2024 Philip Hutchison |
|||
* MIT-style license: http://pipwerks.mit-license.org/
|
|||
* UMD module pattern from https://github.com/umdjs/umd/blob/master/templates/returnExports.js
|
|||
*/ |
|||
|
|||
(function (root, factory) { |
|||
if (typeof define === "function" && define.amd) { |
|||
// AMD. Register as an anonymous module.
|
|||
define([], factory); |
|||
} else if (typeof module === "object" && module.exports) { |
|||
// Node. Does not work with strict CommonJS, but
|
|||
// only CommonJS-like environments that support module.exports,
|
|||
// like Node.
|
|||
module.exports = factory(); |
|||
} else { |
|||
// Browser globals (root is window)
|
|||
root.PDFObject = factory(); |
|||
} |
|||
}(this, function () { |
|||
|
|||
"use strict"; |
|||
|
|||
//PDFObject is designed for client-side (browsers), not server-side (node)
|
|||
//Will choke on undefined navigator and window vars when run on server
|
|||
//Return boolean false and exit function when running server-side
|
|||
|
|||
if(typeof window === "undefined" || window.navigator === undefined || window.navigator.userAgent === undefined){ return false; } |
|||
|
|||
let pdfobjectversion = "2.3.0"; |
|||
let win = window; |
|||
let nav = win.navigator; |
|||
let ua = nav.userAgent; |
|||
let suppressConsole = false; |
|||
|
|||
//Fallback validation when navigator.pdfViewerEnabled is not supported
|
|||
let isModernBrowser = function (){ |
|||
|
|||
/* |
|||
userAgent sniffing is not the ideal path, but most browsers revoked the ability to check navigator.mimeTypes |
|||
for security purposes. As of 2023, browsers have begun implementing navigator.pdfViewerEnabled, but older versions |
|||
do not have navigator.pdfViewerEnabled or the ability to check navigator.mimeTypes. We're left with basic browser |
|||
sniffing and assumptions of PDF support based on browser vendor. |
|||
*/ |
|||
|
|||
//Chromium has provided native PDF support since 2011.
|
|||
//Most modern browsers use Chromium under the hood: Google Chrome, Microsoft Edge, Opera, Brave, Vivaldi, Arc, and more.
|
|||
//Chromium uses the PDFium rendering engine, which is based on Foxit's PDF rendering engine.
|
|||
//Note that MS Edge opts to use a different PDF rendering engine. As of 2024, Edge uses a version of Adobe's Reader
|
|||
let isChromium = (win.chrome !== undefined); |
|||
|
|||
//Safari on macOS has provided native PDF support since 2009.
|
|||
//This code snippet also detects the DuckDuckGo browser, which uses Safari/Webkit under the hood.
|
|||
let isSafari = (win.safari !== undefined || (nav.vendor !== undefined && /Apple/.test(nav.vendor) && /Safari/.test(ua))); |
|||
|
|||
//Firefox has provided PDF support via PDFJS since 2013.
|
|||
let isFirefox = (win.Mozilla !== undefined || /irefox/.test(ua)); |
|||
|
|||
return isChromium || isSafari || isFirefox; |
|||
|
|||
}; |
|||
|
|||
/* |
|||
Special handling for Internet Explorer 11. |
|||
Check for ActiveX support, then whether "AcroPDF.PDF" or "PDF.PdfCtrl" are valid. |
|||
IE11 uses ActiveX for Adobe Reader and other PDF plugins, but window.ActiveXObject will evaluate to false. |
|||
("ActiveXObject" in window) evaluates to true. |
|||
MS Edge does not support ActiveX so this test will evaluate false for MS Edge. |
|||
*/ |
|||
let validateAX = function (type){ |
|||
var ax = null; |
|||
try { |
|||
ax = new ActiveXObject(type); |
|||
} catch (e) { |
|||
//ensure ax remains null when ActiveXObject attempt fails
|
|||
ax = null; |
|||
} |
|||
return !!ax; //convert resulting object to boolean
|
|||
}; |
|||
|
|||
let hasActiveXPDFPlugin = function (){ return ("ActiveXObject" in win) && (validateAX("AcroPDF.PDF") || validateAX("PDF.PdfCtrl")) }; |
|||
|
|||
let checkSupport = function (){ |
|||
|
|||
//Safari on iPadOS doesn't report as 'mobile' when requesting desktop site, yet still fails to embed PDFs
|
|||
let isSafariIOSDesktopMode = (nav.platform !== undefined && nav.platform === "MacIntel" && nav.maxTouchPoints !== undefined && nav.maxTouchPoints > 1); |
|||
|
|||
let isMobileDevice = (isSafariIOSDesktopMode || /Mobi|Tablet|Android|iPad|iPhone/.test(ua)); |
|||
|
|||
//As of June 2023, no mobile browsers properly support inline PDFs. If mobile, just say no.
|
|||
if(isMobileDevice){ return false; } |
|||
|
|||
//Modern browsers began supporting navigator.pdfViewerEnabled in late 2022 and early 2023.
|
|||
let supportsPDFVE = (typeof nav.pdfViewerEnabled === "boolean"); |
|||
|
|||
//If browser supports nav.pdfViewerEnabled and is explicitly saying PDFs are NOT supported (e.g. PDFJS disabled by user in Firefox), respect it.
|
|||
if(supportsPDFVE && !nav.pdfViewerEnabled){ return false; } |
|||
|
|||
return (supportsPDFVE && nav.pdfViewerEnabled) || isModernBrowser() || hasActiveXPDFPlugin(); |
|||
|
|||
}; |
|||
|
|||
//Determines whether PDF support is available
|
|||
let supportsPDFs = checkSupport(); |
|||
|
|||
//Create a fragment identifier for using PDF Open parameters when embedding PDF
|
|||
let buildURLFragmentString = function(pdfParams){ |
|||
|
|||
let string = ""; |
|||
let prop; |
|||
let paramArray = []; |
|||
let fdf = ""; |
|||
|
|||
//The comment, viewrect, and highlight parameters require page to be set first.
|
|||
|
|||
//Check to ensure page is used if comment, viewrect, or highlight are specified
|
|||
if(pdfParams.comment || pdfParams.viewrect || pdfParams.highlight){ |
|||
|
|||
if(!pdfParams.page){ |
|||
|
|||
//If page is not set, use the first page
|
|||
pdfParams.page = 1; |
|||
|
|||
//Inform user that page needs to be set properly
|
|||
embedError("The comment, viewrect, and highlight parameters require a page parameter, but none was specified. Defaulting to page 1."); |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
//Let's go ahead and ensure page is always the first parameter.
|
|||
if(pdfParams.page){ |
|||
paramArray.push("page=" + encodeURIComponent(pdfParams.page)); |
|||
delete pdfParams.page; |
|||
} |
|||
|
|||
//FDF needs to be the last parameter in the string
|
|||
if(pdfParams.fdf){ |
|||
fdf = pdfParams.fdf; |
|||
delete pdfParams.fdf; |
|||
} |
|||
|
|||
//Add all other parameters, as needed
|
|||
if(pdfParams){ |
|||
|
|||
for (prop in pdfParams) { |
|||
if (pdfParams.hasOwnProperty(prop)) { |
|||
paramArray.push(encodeURIComponent(prop) + "=" + encodeURIComponent(pdfParams[prop])); |
|||
} |
|||
} |
|||
|
|||
//Add fdf as the last parameter, if needed
|
|||
if(fdf){ |
|||
paramArray.push("fdf=" + encodeURIComponent(fdf)); |
|||
} |
|||
|
|||
//Join all parameters in the array into a string
|
|||
string = paramArray.join("&"); |
|||
|
|||
//The string will be empty if no PDF Parameters were provided
|
|||
//Only prepend the hash if the string is not empty
|
|||
if(string){ |
|||
string = "#" + string; |
|||
} |
|||
|
|||
} |
|||
|
|||
return string; |
|||
|
|||
}; |
|||
|
|||
let embedError = function (msg){ |
|||
if(!suppressConsole){ |
|||
console.log("[PDFObject]", msg); |
|||
} |
|||
return false; |
|||
}; |
|||
|
|||
let emptyNodeContents = function (node){ |
|||
while(node.firstChild){ |
|||
node.removeChild(node.firstChild); |
|||
} |
|||
}; |
|||
|
|||
let getTargetElement = function (targetSelector){ |
|||
|
|||
//Default to body for full-browser PDF
|
|||
let targetNode = document.body; |
|||
|
|||
//If a targetSelector is specified, check to see whether
|
|||
//it's passing a selector, jQuery object, or an HTML element
|
|||
|
|||
if(typeof targetSelector === "string"){ |
|||
|
|||
//Is CSS selector
|
|||
targetNode = document.querySelector(targetSelector); |
|||
|
|||
} else if (win.jQuery !== undefined && targetSelector instanceof jQuery && targetSelector.length) { |
|||
|
|||
//Is jQuery element. Extract HTML node
|
|||
targetNode = targetSelector.get(0); |
|||
|
|||
} else if (targetSelector.nodeType !== undefined && targetSelector.nodeType === 1){ |
|||
|
|||
//Is HTML element
|
|||
targetNode = targetSelector; |
|||
|
|||
} |
|||
|
|||
return targetNode; |
|||
|
|||
}; |
|||
|
|||
let convertBase64ToDownloadableLink = function (b64, filename, targetNode, fallbackHTML) { |
|||
|
|||
//IE-11 safe version. More verbose than modern fetch()
|
|||
if (window.Blob && window.URL && window.URL.createObjectURL) { |
|||
|
|||
var xhr = new XMLHttpRequest(); |
|||
xhr.open('GET', b64, true); |
|||
xhr.responseType = 'blob'; |
|||
xhr.onload = function() { |
|||
|
|||
if (xhr.status === 200) { |
|||
|
|||
var blob = xhr.response; |
|||
var link = document.createElement('a'); |
|||
link.innerText = "Download PDF"; |
|||
link.href = URL.createObjectURL(blob); |
|||
link.setAttribute('download', filename); |
|||
targetNode.innerHTML = fallbackHTML.replace(/\[pdflink\]/g, link.outerHTML); |
|||
|
|||
} |
|||
|
|||
}; |
|||
|
|||
xhr.send(); |
|||
|
|||
} |
|||
|
|||
}; |
|||
|
|||
|
|||
let generatePDFObjectMarkup = function (embedType, targetNode, url, pdfOpenFragment, width, height, id, title, omitInlineStyles, customAttribute, PDFJS_URL){ |
|||
|
|||
//Ensure target element is empty first
|
|||
emptyNodeContents(targetNode); |
|||
|
|||
let source = url; |
|||
|
|||
if(embedType === "pdfjs"){ |
|||
//If PDFJS_URL already contains a ?, assume querystring is in place, and use an ampersand to append PDFJS's file parameter
|
|||
let connector = (PDFJS_URL.indexOf("?") !== -1) ? "&" : "?"; |
|||
source = PDFJS_URL + connector + "file=" + encodeURIComponent(url) + pdfOpenFragment; |
|||
} else { |
|||
source += pdfOpenFragment; |
|||
} |
|||
|
|||
let el = document.createElement("iframe"); |
|||
el.className = "pdfobject"; |
|||
el.type = "application/pdf"; |
|||
el.title = title; |
|||
el.src = source; |
|||
el.allow = "fullscreen"; |
|||
el.frameborder = "0"; |
|||
if(id){ el.id = id; } |
|||
|
|||
if(!omitInlineStyles){ |
|||
|
|||
let style = "border: none;"; |
|||
|
|||
if(targetNode !== document.body){ |
|||
//assign width and height to target node
|
|||
style += "width: " + width + "; height: " + height + ";"; |
|||
} else { |
|||
//this is a full-page embed, use CSS to fill the viewport
|
|||
style += "position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;"; |
|||
} |
|||
|
|||
el.style.cssText = style; |
|||
|
|||
} |
|||
|
|||
//Allow developer to insert custom attribute on iframe element, but ensure it does not conflict with attributes used by PDFObject
|
|||
let reservedTokens = ["className", "type", "title", "src", "style", "id", "allow", "frameborder"]; |
|||
if(customAttribute && customAttribute.key && reservedTokens.indexOf(customAttribute.key) === -1){ |
|||
el.setAttribute(customAttribute.key, (typeof customAttribute.value !== "undefined") ? customAttribute.value : ""); |
|||
} |
|||
|
|||
targetNode.classList.add("pdfobject-container"); |
|||
targetNode.appendChild(el); |
|||
|
|||
return targetNode.getElementsByTagName("iframe")[0]; |
|||
|
|||
}; |
|||
|
|||
let embed = function(url, targetSelector, options){ |
|||
|
|||
//If targetSelector is not defined, convert to boolean
|
|||
let selector = targetSelector || false; |
|||
|
|||
//Ensure options object is not undefined -- enables easier error checking below
|
|||
let opt = options || {}; |
|||
|
|||
//Get passed options, or set reasonable defaults
|
|||
suppressConsole = (typeof opt.suppressConsole === "boolean") ? opt.suppressConsole : false; |
|||
let id = (typeof opt.id === "string") ? opt.id : ""; |
|||
let page = opt.page || false; |
|||
let pdfOpenParams = opt.pdfOpenParams || {}; |
|||
let fallbackLink = (typeof opt.fallbackLink === "string" || typeof opt.fallbackLink === "boolean") ? opt.fallbackLink : true; |
|||
let width = opt.width || "100%"; |
|||
let height = opt.height || "100%"; |
|||
let title = opt.title || "Embedded PDF"; |
|||
let forcePDFJS = (typeof opt.forcePDFJS === "boolean") ? opt.forcePDFJS : false; |
|||
let omitInlineStyles = (typeof opt.omitInlineStyles === "boolean") ? opt.omitInlineStyles : false; |
|||
let PDFJS_URL = opt.PDFJS_URL || false; |
|||
let targetNode = getTargetElement(selector); |
|||
let pdfOpenFragment = ""; |
|||
let customAttribute = opt.customAttribute || {}; |
|||
let fallbackHTML_default = "<p>This browser does not support inline PDFs. Please download the PDF to view it: [pdflink]</p>"; |
|||
|
|||
//Ensure URL is available. If not, exit now.
|
|||
if(typeof url !== "string"){ return embedError("URL is not valid"); } |
|||
|
|||
//If target element is specified but is not valid, exit without doing anything
|
|||
if(!targetNode){ return embedError("Target element cannot be determined"); } |
|||
|
|||
//page option overrides pdfOpenParams, if found
|
|||
if(page){ pdfOpenParams.page = page; } |
|||
|
|||
//Stringify optional Adobe params for opening document (as fragment identifier)
|
|||
pdfOpenFragment = buildURLFragmentString(pdfOpenParams); |
|||
|
|||
|
|||
// --== Do the dance: Embed attempt #1 ==--
|
|||
|
|||
//If the forcePDFJS option is invoked, skip everything else and embed as directed
|
|||
if(forcePDFJS && PDFJS_URL){ |
|||
return generatePDFObjectMarkup("pdfjs", targetNode, url, pdfOpenFragment, width, height, id, title, omitInlineStyles, customAttribute, PDFJS_URL); |
|||
} |
|||
|
|||
// --== Embed attempt #2 ==--
|
|||
|
|||
//Embed PDF if support is detected, or if this is a relatively modern browser
|
|||
if(supportsPDFs){ |
|||
return generatePDFObjectMarkup("iframe", targetNode, url, pdfOpenFragment, width, height, id, title, omitInlineStyles, customAttribute); |
|||
} |
|||
|
|||
// --== Embed attempt #3 ==--
|
|||
|
|||
//If everything else has failed and a PDFJS fallback is provided, try to use it
|
|||
if(PDFJS_URL){ |
|||
return generatePDFObjectMarkup("pdfjs", targetNode, url, pdfOpenFragment, width, height, id, title, omitInlineStyles, customAttribute, PDFJS_URL); |
|||
} |
|||
|
|||
// --== PDF embed not supported! Use fallback ==--
|
|||
|
|||
//Display the fallback link if available
|
|||
if(fallbackLink){ |
|||
|
|||
//If a custom fallback has been provided, handle it now
|
|||
if(typeof fallbackLink === "string"){ |
|||
|
|||
//Ensure [url] is set in custom fallback
|
|||
targetNode.innerHTML = fallbackLink.replace(/\[url\]/g, url); |
|||
|
|||
} else { |
|||
|
|||
//If the PDF is a base64 string, convert it to a downloadable link
|
|||
if(url.indexOf("data:application/pdf;base64") !== -1){ |
|||
|
|||
//Asynchronously append the link to the targetNode
|
|||
convertBase64ToDownloadableLink(url, "file.pdf", targetNode, fallbackHTML_default); |
|||
|
|||
} else { |
|||
|
|||
//Use default fallback link
|
|||
let link = "<a href='" + url + "'>Download PDF</a>"; |
|||
targetNode.innerHTML = fallbackHTML_default.replace(/\[pdflink\]/g, link); |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
return embedError("This browser does not support embedded PDFs"); |
|||
|
|||
}; |
|||
|
|||
return { |
|||
embed: function (a,b,c){ return embed(a,b,c); }, |
|||
pdfobjectversion: (function () { return pdfobjectversion; })(), |
|||
supportsPDFs: (function (){ return supportsPDFs; })() |
|||
}; |
|||
|
|||
})); |
|||
@ -0,0 +1,175 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> |
|||
<meta http-equiv="Pragma" content="no-cache" /> |
|||
<meta http-equiv="Expires" content="0" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/common.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/plugins/gridNavigation.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/index.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>编程体验</title> |
|||
</head> |
|||
<body> |
|||
<div class="ai-wrapper"> |
|||
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> |
|||
<div class="ai-header-wrapper"> |
|||
<div class="ai-header"> |
|||
<div class="header-btn header-home" onclick="history.go(-1); return false;"><span></span><p>首页</p></div> |
|||
<div class="header-title"> |
|||
<h2>AI编程机器人体验系统</h2> |
|||
</div> |
|||
<div class="header-btn header-login"><span></span><p>登录</p></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 编程体验 --> |
|||
<div class="page-content"> |
|||
<div id="tj_container" class="tj_container"> |
|||
<span id="tj_prev" class="page-list-btn tj_prev"></span> |
|||
<div class="tj_wrapper"> |
|||
<ul class="tj_gallery"> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>六轴机械臂</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>双足机器人1</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>双足机器人2</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>双足机器人3</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>四足机器狗</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>无人驾驶车</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>六轴机械臂2</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>四足机器狗2</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>无人驾驶车2</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>uLtraArm套装10</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<!-- <span></span> --> |
|||
</div> |
|||
<p>颜色识别分类11</p> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<span id="tj_next" class="page-list-btn tj_next"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="js/libs/flexible.js"></script> |
|||
<!-- 模块切换 --> |
|||
<script type="text/javascript" src="js/plugins/jquery.easing.1.3.js"></script> |
|||
<script type="text/javascript" src="js/plugins/jquery.gridnav.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function () { |
|||
$('#tj_container').gridnav({ |
|||
type: { |
|||
mode: 'sequpdown', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows |
|||
speed: 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows |
|||
easing: '', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows |
|||
factor: 50, // for seqfade, sequpdown, rows |
|||
reverse: false, // for sequpdown |
|||
}, |
|||
}) |
|||
// $('.tj_gallery li').on('click', function () { |
|||
// layer.open({ |
|||
// type: 2, // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外） |
|||
// title: '测试视频layer', |
|||
// area: ['12.5rem', '10rem'], |
|||
// // shade: 0.8, // 默认0.3 不想显示遮罩设置为0 |
|||
// // maxmin: true, //开启最大化最小化按钮 |
|||
// shadeClose: true, |
|||
// content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4' |
|||
// }) |
|||
// }) |
|||
}) |
|||
</script> |
|||
</html> |
|||
@ -0,0 +1,238 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> |
|||
<meta http-equiv="Pragma" content="no-cache" /> |
|||
<meta http-equiv="Expires" content="0" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/common.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/plugins/gridNavigation.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/index.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>场景演示</title> |
|||
</head> |
|||
<body> |
|||
<div class="ai-wrapper"> |
|||
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> |
|||
<div class="ai-header-wrapper"> |
|||
<div class="ai-header"> |
|||
<div class="header-btn header-home" onclick="history.go(-1); return false;"><span></span><p>首页</p></div> |
|||
<div class="header-title"> |
|||
<h2>AI编程机器人体验系统</h2> |
|||
</div> |
|||
<div class="header-btn header-login"><span></span><p>登录</p></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 编程体验 --> |
|||
<div class="page-content"> |
|||
<div id="tj_container" class="tj_container"> |
|||
<span id="tj_prev" class="page-list-btn tj_prev"></span> |
|||
<div class="tj_wrapper"> |
|||
<ul class="tj_gallery"> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类1</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装2</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类3</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装4</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类5</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装6</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类7</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装8</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类9</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装10</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类11</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装12</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类13</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装14</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类15</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装16</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类17</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装18</p> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<span id="tj_next" class="page-list-btn tj_next"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="js/libs/flexible.js"></script> |
|||
<!-- 模块切换 --> |
|||
<script type="text/javascript" src="js/plugins/jquery.easing.1.3.js"></script> |
|||
<script type="text/javascript" src="js/plugins/jquery.gridnav.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function () { |
|||
$('#tj_container').gridnav({ |
|||
type: { |
|||
mode: 'disperse', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows |
|||
speed: 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows |
|||
easing: '', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows |
|||
factor: 50, // for seqfade, sequpdown, rows |
|||
reverse: false, // for sequpdown |
|||
}, |
|||
}) |
|||
// $('.tj_gallery li').on('click', function () { |
|||
// layer.open({ |
|||
// type: 2, // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外） |
|||
// title: '测试视频layer', |
|||
// area: ['12.5rem', '10rem'], |
|||
// // shade: 0.8, // 默认0.3 不想显示遮罩设置为0 |
|||
// // maxmin: true, //开启最大化最小化按钮 |
|||
// shadeClose: true, |
|||
// content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4' |
|||
// }) |
|||
// }) |
|||
}) |
|||
</script> |
|||
</html> |
|||
@ -0,0 +1,238 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> |
|||
<meta http-equiv="Pragma" content="no-cache" /> |
|||
<meta http-equiv="Expires" content="0" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/reset.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/libs/animate.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/common.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/plugins/gridNavigation.css" /> |
|||
<link rel="stylesheet" type="text/css" href="css/index.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>实战竞赛</title> |
|||
</head> |
|||
<body> |
|||
<div class="ai-wrapper"> |
|||
<video class="ai-bg" src="./images/bg.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> |
|||
<div class="ai-header-wrapper"> |
|||
<div class="ai-header"> |
|||
<div class="header-btn header-home" onclick="history.go(-1); return false;"><span></span><p>首页</p></div> |
|||
<div class="header-title"> |
|||
<h2>AI编程机器人体验系统</h2> |
|||
</div> |
|||
<div class="header-btn header-login"><span></span><p>登录</p></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 实战竞赛 --> |
|||
<div class="page-content"> |
|||
<div id="tj_container" class="tj_container"> |
|||
<span id="tj_prev" class="page-list-btn tj_prev"></span> |
|||
<div class="tj_wrapper"> |
|||
<ul class="tj_gallery"> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>全国大学生机器人大赛</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>全国青少年人工智能创新挑战赛</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>辽宁省青少年机器人竞赛</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>世界青少年机器人奥林匹克竞赛</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>2023世界机器人大赛</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>全国青少年人工智能创新挑战赛</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类7</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装8</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类9</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装10</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类11</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装12</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类13</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装14</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类15</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装16</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>颜色识别分类17</p> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="javascript:;"> |
|||
<div class="tj-list-img"> |
|||
<img src="images/img-bg.png" alt="" /> |
|||
<span></span> |
|||
</div> |
|||
<p>uLtraArm套装18</p> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<span id="tj_next" class="page-list-btn tj_next"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="js/libs/flexible.js"></script> |
|||
<!-- 模块切换 --> |
|||
<script type="text/javascript" src="js/plugins/jquery.easing.1.3.js"></script> |
|||
<script type="text/javascript" src="js/plugins/jquery.gridnav.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function () { |
|||
$('#tj_container').gridnav({ |
|||
type: { |
|||
mode: 'rows', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows |
|||
speed: 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows |
|||
easing: '', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows |
|||
factor: 50, // for seqfade, sequpdown, rows |
|||
reverse: false, // for sequpdown |
|||
}, |
|||
}) |
|||
// $('.tj_gallery li').on('click', function () { |
|||
// layer.open({ |
|||
// type: 2, // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外） |
|||
// title: '测试视频layer', |
|||
// area: ['12.5rem', '10rem'], |
|||
// // shade: 0.8, // 默认0.3 不想显示遮罩设置为0 |
|||
// // maxmin: true, //开启最大化最小化按钮 |
|||
// shadeClose: true, |
|||
// content: '/media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4' |
|||
// }) |
|||
// }) |
|||
}) |
|||
</script> |
|||
</html> |
|||
@ -0,0 +1,332 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh-CN"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|||
<meta |
|||
http-equiv="Cache-Control" |
|||
content="no-cache, no-store, must-revalidate" |
|||
/> |
|||
<meta http-equiv="Pragma" content="no-cache" /> |
|||
<meta http-equiv="Expires" content="0" /> |
|||
<!-- <link rel="shortcut icon" type="image/x-icon" href="images/logo.png"> --> |
|||
<link rel="stylesheet" type="text/css" href="./css/libs/reset.css" /> |
|||
<!-- <link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css"> |
|||
<link rel="stylesheet" type="text/css" href="./css/swiper.min.css"> --> |
|||
<!-- <link rel="stylesheet" type="text/css" href="./js/libs/layui/css/layui.css" media="all"> --> |
|||
<link rel="stylesheet" type="text/css" href="./css/libs/animate.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="./css/common.css" /> |
|||
<link rel="stylesheet" type="text/css" href="./css/style.css" /> |
|||
<!--[if lt IE 9]> |
|||
<script src="js/html5shiv.js"></script> |
|||
<script src="js/respond.min.js"></script> |
|||
<![endif]--> |
|||
<title>首页</title> |
|||
</head> |
|||
|
|||
<!-- <div class="box_pdf"> |
|||
<a |
|||
href="/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf" |
|||
>编程学习 看pdf open</a |
|||
> |
|||
</div> --> |
|||
<!-- https://animate.style/ --> |
|||
<body> |
|||
<div class="contanier"> |
|||
<div class="return">返回</div> |
|||
<div class="flex-container"> |
|||
<ul class="flex-left"> |
|||
<li class="flex-item animate__animated animate__backInLeft"> |
|||
<a href="javascript:;" alt="">编程系统</a> |
|||
<img src="/images/browsers/chrome.png" alt="" /> |
|||
</li> |
|||
<li class="flex-item animate__animated animate__backInLeft"> |
|||
<a style="color: yellow;" href="scene_presentation.html" alt="">场景演示</a> |
|||
<img src="/images/browsers/iexplore.png" alt="" /> |
|||
</li> |
|||
<li class="flex-item animate__animated animate__backInLeft"> |
|||
<a style="color: yellow;" onclick="showPDF2()">编程学习</a> |
|||
<img src="/images/browsers/safari.png" alt="" /> |
|||
</li> |
|||
</ul> |
|||
<div class="flex-middle">中间机器人图</div> |
|||
<ul class="flex-right"> |
|||
<li class="flex-item animate__animated animate__fadeInTopRight"> |
|||
<img src="/images/browsers/iexplore.png" alt="" /> |
|||
<a href="javascript:;" alt="">实战竞赛</a> |
|||
</li> |
|||
<li class="flex-item animate__animated animate__fadeInTopRight"> |
|||
<img src="/images/browsers/chrome.png" alt="" /> |
|||
<a href="javascript:;" alt="">作品展示</a> |
|||
</li> |
|||
<li class="flex-item flex-item-link animate__animated animate__fadeInTopRight"> |
|||
<img src="/images/browsers/safari.png" alt="" /> |
|||
<!-- ai_chat.html --> |
|||
<a style="color: yellow;" href="javascript:;" alt="">AI数字人</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div id="my-pdf"></div> |
|||
|
|||
|
|||
<!-- 静态图片 --> |
|||
<img src="./images/33e2e72d9a0c855f036b4cb55448f44af67a0635.webp" alt="静态webp"> |
|||
<img src="./images/azpx0-52d5m.webp" alt="动态webp"> |
|||
|
|||
<!-- <picture> |
|||
<source media="(min-width:650px)" srcset="./images/azpx0-52d5m.webp"> |
|||
<source media="(min-width:465px)" srcset="https://static.jyshare.com/libs/images/code-icon-script.png"> |
|||
<img src="./images/azpx0-52d5m.webp" style="width:auto;"> |
|||
</picture> --> |
|||
|
|||
<!-- 动态图片 --> |
|||
<!-- <video autoplay loop muted playsinline> |
|||
<source src="./images/azpx0-52d5m.webp" type="image/webp"> |
|||
Your browser does not support the video tag. |
|||
</video> --> |
|||
|
|||
<!-- 菜单3D效果 --> |
|||
<!-- <div class="show-nav"> |
|||
<ul id="showcase"> |
|||
<li class="menu-item a">编程系统</li> |
|||
<li class="menu-item b">场景演示</li> |
|||
<li class="menu-item c">编程学习</li> |
|||
<li class="menu-item d">实战竞赛</li> |
|||
<li class="menu-item e">作品展示</li> |
|||
<li class="menu-item f">AI数字人</li> |
|||
</ul> |
|||
<div id="nav" class="noselect"> |
|||
<button class="left">←</button> |
|||
<button class="right">→</button> |
|||
</div> |
|||
</div> --> |
|||
|
|||
<div class="show-nav"> |
|||
<div class="container"> |
|||
<div class="carousel"> |
|||
<div class="item a">编程系统</div> |
|||
<div class="item b"><a href="scene_presentation.html" alt="">场景演示</a></div> |
|||
<div class="item c"><a onclick="showPDF2()">编程学习</a></div> |
|||
<div class="item d">实战竞赛</div> |
|||
<div class="item e">作品展示</div> |
|||
<div class="item f"><a href="ai_chat.html" alt="">AI数字人</a></div> |
|||
</div> |
|||
</div> |
|||
<div class="next">Next</div> |
|||
<div class="prev">Prev</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
<script type="text/javascript" src="/js/libs/jquery-3.7.1.min.js"></script> |
|||
<script type="text/javascript" src="/js/libs/flexible.js"></script> |
|||
<!-- 弹出框 --> |
|||
<script type="text/javascript" src="/js/libs/layer/layer.js"></script> |
|||
<!-- pdf控件 --> |
|||
<script type="text/javascript" src="/js/plugins/pdfobject.js"></script> |
|||
<!-- 粒子插件2个 --> |
|||
<!-- <script type="text/javascript" src="/js/plugins/particles.min.js"></script> |
|||
<script type="text/javascript" src="/js/plugins/app.js"></script> --> |
|||
<!-- 菜单3D效果2个 --> |
|||
<script type="text/javascript" src="js/plugins/jquery.reflection.js"></script> |
|||
<script type="text/javascript" src="js/plugins/jquery.cloud9carousel.js"></script> |
|||
|
|||
<script type="text/javascript"> |
|||
function showPDF() { |
|||
var pdf = document.createElement('embed') |
|||
pdf.src = |
|||
'/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf' |
|||
pdf.type = 'application/pdf' |
|||
pdf.width = '100%' |
|||
pdf.height = 'calc(100vh)' |
|||
document.getElementById('pdf-container').appendChild(pdf) |
|||
} |
|||
|
|||
function showPDF2() { |
|||
PDFObject.embed( |
|||
'/media/pdf/AELOS PRO 3 使用手册V1.42-基于镜像1.0.4，软件版本2.0.0(含)以上.pdf', |
|||
'#my-pdf' |
|||
) |
|||
} |
|||
|
|||
$('.flex-item-link').on('click', function () { |
|||
$(this).find('img').addClass('active animate__animated animate__zoomInDown'); |
|||
// $(this).find('img').on('click', function () { |
|||
// const _this = $(this) |
|||
// setTimeout(function () { |
|||
// _this.removeClass('animate__zoomInDown').addClass('animate__animated animate__backOutRight') |
|||
// setTimeout(function(){ |
|||
// window.top.location.href = 'ai_chat.html'; |
|||
// return false; |
|||
// },1000) |
|||
// }, 1000) |
|||
// }) |
|||
|
|||
const _this = $(this) |
|||
setTimeout(function () { |
|||
_this.find('img').removeClass('animate__zoomInDown').addClass('animate__animated animate__backOutRight') |
|||
setTimeout(function(){ |
|||
window.top.location.href = 'ai_chat.html'; |
|||
return false; |
|||
},1000) |
|||
}, 2000) |
|||
}) |
|||
|
|||
$('.return').on('click', function () { |
|||
$('#my-pdf').removeClass('pdfobject-container') |
|||
$('#my-pdf').children().remove() |
|||
window.location.reload(); |
|||
}) |
|||
// 菜单切换 |
|||
var showcase = $('#showcase') |
|||
showcase.Cloud9Carousel({ |
|||
yOrigin: 52, |
|||
yRadius: 40, |
|||
itemClass: 'menu-item', |
|||
// mirror: { |
|||
// gap: 12, |
|||
// height: 0.2 |
|||
// }, |
|||
buttonLeft: $('#nav > .left'), |
|||
buttonRight: $('#nav > .right'), |
|||
autoPlay: 1, |
|||
bringToFront: true, |
|||
onLoaded: function () { |
|||
showcase.css('visibility', 'visible') |
|||
showcase.css('display', 'none') |
|||
showcase.fadeIn(1500) |
|||
}, |
|||
}) |
|||
|
|||
$('#nav > button').click(function (e) { |
|||
var b = $(e.target).addClass('down') |
|||
setTimeout(function () { |
|||
b.removeClass('down') |
|||
}, 80) |
|||
}) |
|||
|
|||
$(document).keydown(function (e) { |
|||
switch (e.keyCode) { |
|||
/* left arrow */ |
|||
case 37: |
|||
$('#nav > .left').click() |
|||
break |
|||
|
|||
/* right arrow */ |
|||
case 39: |
|||
$('#nav > .right').click() |
|||
} |
|||
}) |
|||
|
|||
|
|||
// 菜单3D效果 |
|||
var carousel = $(".carousel"), |
|||
items = $(".item"), // 轮播图的每一项 |
|||
itemCount = items.length, |
|||
currdeg = 0, |
|||
autoRotateInterval, |
|||
autoRotateEnabled = true; // 标记是否启用自动旋转 |
|||
rotationDuration = 2000; // 旋转时间，单位为毫秒 |
|||
|
|||
$(".next").on("click", { d: "n" }, btnRotate); |
|||
$(".prev").on("click", { d: "p" }, btnRotate); |
|||
|
|||
// 绑定点击事件 |
|||
items.on("click", function() { |
|||
var index = $(this).index(); // 获取被点击项的索引 |
|||
rotateToItem(index); // 旋转到指定项 |
|||
}); |
|||
|
|||
// 开始自动旋转 |
|||
function startAutoRotate() { |
|||
if (autoRotateInterval) { |
|||
clearInterval(autoRotateInterval); |
|||
} |
|||
|
|||
autoRotateInterval = setInterval(function() { |
|||
// 6个60 |
|||
// 4个90 |
|||
currdeg = currdeg - 60; // 向左旋转，每次 60 度 |
|||
updateTransform(); |
|||
}, rotationDuration); |
|||
} |
|||
|
|||
// 停止自动旋转 |
|||
function stopAutoRotate() { |
|||
clearInterval(autoRotateInterval); |
|||
} |
|||
|
|||
// 旋转到指定项 |
|||
function rotateToItem(index) { |
|||
var itemAngle = 360 / itemCount; // 计算每一项的角度 |
|||
var targetDeg = -index * itemAngle; // 计算目标角度 |
|||
var deltaDeg = targetDeg - currdeg; // 计算旋转的角度差 |
|||
|
|||
// 6个 如果旋转角度差大于 180 度，则选择顺时针旋转 |
|||
// 4个 90 |
|||
if (Math.abs(deltaDeg) > 180) { |
|||
deltaDeg = (deltaDeg > 0 ? deltaDeg - 360 : deltaDeg + 360); |
|||
} |
|||
|
|||
// 设置旋转的时间和缓动效果 |
|||
carousel.css({ |
|||
// transition: "transform " + (rotationDuration / 1000) + "s ease-out", |
|||
"-webkit-transform": "rotateY(" + (currdeg + deltaDeg) + "deg)", |
|||
"-moz-transform": "rotateY(" + (currdeg + deltaDeg) + "deg)", |
|||
"-o-transform": "rotateY(" + (currdeg + deltaDeg) + "deg)", |
|||
"transform": "rotateY(" + (currdeg + deltaDeg) + "deg)" |
|||
}); |
|||
|
|||
// 更新当前旋转角度 |
|||
currdeg += deltaDeg; |
|||
|
|||
// 触发旋转后停止自动旋转 |
|||
stopAutoRotate(); |
|||
|
|||
// 确保在旋转完成后继续自动旋转 |
|||
setTimeout(function() { |
|||
if (autoRotateEnabled) { |
|||
startAutoRotate(); |
|||
} |
|||
}, rotationDuration); // 旋转时间与自动旋转间隔匹配 |
|||
} |
|||
|
|||
// 更新 transform 样式 |
|||
function updateTransform() { |
|||
carousel.css({ |
|||
"-webkit-transform": "rotateY(" + currdeg + "deg)", |
|||
"-moz-transform": "rotateY(" + currdeg + "deg)", |
|||
"-o-transform": "rotateY(" + currdeg + "deg)", |
|||
"transform": "rotateY(" + currdeg + "deg)" |
|||
}); |
|||
} |
|||
|
|||
function btnRotate(e){ |
|||
// 6个60 |
|||
// 4个90 |
|||
if(e.data.d=="n"){ |
|||
currdeg = currdeg - 60; |
|||
} |
|||
if(e.data.d=="p"){ |
|||
currdeg = currdeg + 60; |
|||
} |
|||
|
|||
updateTransform() |
|||
|
|||
// 触发旋转后停止自动旋转 |
|||
stopAutoRotate(); |
|||
|
|||
// 确保在旋转完成后继续自动旋转 |
|||
setTimeout(function() { |
|||
if (autoRotateEnabled) { |
|||
startAutoRotate(); |
|||
} |
|||
}, rotationDuration); // 旋转时间与自动旋转间隔匹配 |
|||
} |
|||
|
|||
// 页面加载完成后开始自动旋转 |
|||
$(document).ready(function() { |
|||
startAutoRotate(); |
|||
}); |
|||
</script> |
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue