稳定版
This commit is contained in:
appexplore
parent
51c0952f67
commit
27dae489b9
|
|
@ -0,0 +1,420 @@
|
|||
/*********************************/
|
||||
/* Author : Cavethemes
|
||||
/* Contact : cavethemes@gmail.com
|
||||
---------------------------------
|
||||
----- CONTENTS
|
||||
---------------------------------
|
||||
| 1. CSS RESET
|
||||
| 2. BASIC CSS
|
||||
| 3. ANIMATED ELEMENTS
|
||||
| a. WATER WAVES
|
||||
| b. SUBMARINE
|
||||
| c. SUBMARINE FAN
|
||||
| d. SUBMARINE HEAD LIGHT
|
||||
| e. BUBBLES
|
||||
| 4. ANIMATION KEYFRAMES
|
||||
| 5. MEDIA QUERIES
|
||||
| 6. LOADING CSS
|
||||
|
|
||||
----------------------------------
|
||||
/*********************************/
|
||||
|
||||
|
||||
/***************************/
|
||||
/****- 1. CSS RESET -******/
|
||||
/*************************/
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
box-sizing: 0;
|
||||
}
|
||||
|
||||
/***************************/
|
||||
/****- 2. BASIC CSS -******/
|
||||
/*************************/
|
||||
|
||||
body{
|
||||
background: #617492;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.error{
|
||||
padding: 0px;
|
||||
margin-top: 60px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.error h1{
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: #8699b7;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
font-size: 3em;
|
||||
opacity: 1;
|
||||
}
|
||||
.error p{
|
||||
text-align: center;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: #8699b7;
|
||||
padding: 15px;
|
||||
}
|
||||
#submarine_container{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
fill:red;
|
||||
|
||||
}
|
||||
#waves{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
#canvas{
|
||||
-webkit-transform: translate(400px,260px);
|
||||
-ms-transform: translate(400px,260px);
|
||||
transform: translate(400px,260px);
|
||||
|
||||
}
|
||||
|
||||
#bubble_group{
|
||||
-webkit-transform: translate(-450px,-150px);
|
||||
-ms-transform: translate(-450px,-150px);
|
||||
transform: translate(-450px,-150px);
|
||||
}
|
||||
|
||||
#svg_container{
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
.navigation{
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
z-index: 9999;
|
||||
position: absolute;
|
||||
top: 185px;
|
||||
}
|
||||
.navigation ul{
|
||||
list-style: none;
|
||||
width: 260px;
|
||||
margin: 0 auto;
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
background: #5a6c89;
|
||||
}
|
||||
.navigation ul li{
|
||||
display: inline;
|
||||
|
||||
}
|
||||
.navigation ul li a{
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: #8699b7;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 1em;
|
||||
padding: 5px 10px 5px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.navigation ul li a:hover{
|
||||
box-shadow: 0 0 1px rgba(0,0,0,0.1) inset;
|
||||
transition: background linear .5s;
|
||||
border-radius: 10px;
|
||||
background: #526583;
|
||||
}
|
||||
|
||||
|
||||
/*only for IE*/
|
||||
.submarine_bg_ie{
|
||||
width: 700px;
|
||||
margin-left: 35%;
|
||||
padding-top: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submarine_waves_ie{
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
}
|
||||
.submarine_bg_ie img{
|
||||
-ms-interpolation-mode: bicubic;
|
||||
interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
/***********************************/
|
||||
/****- 3. ANIMATED ELEMENTS -******/
|
||||
/*********************************/
|
||||
|
||||
|
||||
/*---- 3. a. WATER WAVES ----*/
|
||||
|
||||
#wave_top{
|
||||
-webkit-animation: waves 3s linear infinite;
|
||||
animation: waves 3s linear infinite;
|
||||
}
|
||||
#wave_bottom{
|
||||
-webkit-animation: waves 6s linear infinite;
|
||||
animation: waves 6s linear infinite;
|
||||
}
|
||||
|
||||
/*---- 3. b. SUBMARINE ----*/
|
||||
|
||||
#Submarine{
|
||||
|
||||
-webkit-animation: submarine 4000ms linear infinite;
|
||||
|
||||
animation: submarine 4000ms linear infinite;
|
||||
}
|
||||
|
||||
/*---- 3. c. SUBMARINE FAN ----*/
|
||||
|
||||
#fan{
|
||||
-webkit-animation: spin 900ms linear infinite;
|
||||
animation: spin 900ms linear infinite;
|
||||
-webkit-transform-origin: 34px 34px;
|
||||
-ms-transform-origin: 34px 34px;
|
||||
transform-origin: 34px 34px;
|
||||
}
|
||||
|
||||
/*---- 3. d. SUBMARINE HEAD LIGHT ----*/
|
||||
|
||||
#head_light{
|
||||
-webkit-transform-origin: 500px 200px;
|
||||
-ms-transform-origin: 500px 200px;
|
||||
transform-origin: 500px 200px;
|
||||
-webkit-animation: headlight 4000ms linear infinite;
|
||||
animation: headlight 4000ms linear infinite;
|
||||
}
|
||||
|
||||
.lights{
|
||||
-webkit-animation: lights 2s ease-in infinite;
|
||||
animation: lights 2s ease-in infinite;
|
||||
}
|
||||
|
||||
/*---- 3. e. BUBBLES ----*/
|
||||
|
||||
#bubble_small{
|
||||
-webkit-animation: bubble_s 2s linear infinite;
|
||||
animation: bubble_s 2s linear infinite;
|
||||
}
|
||||
#bubble_medium{
|
||||
-webkit-animation: bubble_m 2s linear infinite;
|
||||
animation: bubble_m 2s linear infinite;
|
||||
}
|
||||
#bubble_large{
|
||||
-webkit-animation: bubble_l 2s linear infinite;
|
||||
animation: bubble_l 2s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
/*don't worry its for IE*/
|
||||
.submarine_bg_ie img{
|
||||
|
||||
-webkit-animation: submarine 4000ms linear infinite;
|
||||
|
||||
animation: submarine 4000ms linear infinite;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/****- 4. ANIMATION KEYFRAMES -******/
|
||||
/***********************************/
|
||||
|
||||
@-webkit-keyframes spin{
|
||||
100%{
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin{
|
||||
100%{
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes headlight{
|
||||
50%{
|
||||
-webkit-transform: rotate(15deg);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes headlight{
|
||||
50%{
|
||||
-webkit-transform: rotate(15deg);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes submarine{
|
||||
50%{
|
||||
-webkit-transform: rotate(5deg);
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes submarine{
|
||||
50%{
|
||||
-webkit-transform: rotate(5deg);
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes waves{
|
||||
50%{
|
||||
-webkit-transform: translateY(18px);
|
||||
transform: translateY(18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes waves{
|
||||
50%{
|
||||
-webkit-transform: translateY(18px);
|
||||
transform: translateY(18px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bubble_s{
|
||||
40%{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubble_s{
|
||||
40%{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bubble_m{
|
||||
60%{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes bubble_m{
|
||||
60%{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes bubble_l{
|
||||
100%{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes bubble_l{
|
||||
100%{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes lights{
|
||||
50%{
|
||||
fill: white;
|
||||
-webkit-transition: fill ease-in-out .5s;
|
||||
transition: fill ease-in-out .5s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lights{
|
||||
50%{
|
||||
fill: white;
|
||||
-webkit-transition: fill ease-in-out .5s;
|
||||
transition: fill ease-in-out .5s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************************************/
|
||||
/****- 5. MEDIA QUERIES -******/
|
||||
/***********************************/
|
||||
|
||||
@media (max-width: 1200px){
|
||||
.submarine_bg_ie{
|
||||
width: 500px;
|
||||
margin-right: 33%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 800px){
|
||||
.submarine_bg_ie{
|
||||
width: 260px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.error h1{
|
||||
font-size: 2em;
|
||||
}
|
||||
.navigation{
|
||||
top: 160px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 480px){
|
||||
.error h1{
|
||||
font-size: 1.8em;
|
||||
}
|
||||
.error p{
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.navigation{
|
||||
top: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************************************/
|
||||
/****- 6. LOADING CSS ---******/
|
||||
/***********************************/
|
||||
|
||||
.spinner {
|
||||
margin: 300px auto 0;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
|
||||
animation: bouncedelay 1.4s infinite ease-in-out;
|
||||
/* Prevent first frame from flickering when animation starts */
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.spinner .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0.0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.0);
|
||||
-webkit-transform: scale(0.0);
|
||||
} 40% {
|
||||
transform: scale(1.0);
|
||||
-webkit-transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
//##################################//
|
||||
// Author : Cavethemes //
|
||||
// Contact : cavethemes@gmail.com //
|
||||
//##################################//
|
||||
|
||||
//---------------------------//
|
||||
// INTERNET EXPLORER CODE //
|
||||
//---------------------------//
|
||||
// It replaces svg with a png image for IE browsers.
|
||||
|
||||
function IE() {
|
||||
"use strict";
|
||||
var ms_ie = false;
|
||||
var ua = window.navigator.userAgent;
|
||||
var old_ie = ua.indexOf('MSIE ');
|
||||
var new_ie = ua.indexOf('Trident/');
|
||||
|
||||
if ((old_ie > -1) || (new_ie > -1)) {
|
||||
ms_ie = true;
|
||||
}
|
||||
|
||||
if (ms_ie) {
|
||||
$('svg').css('display','none');
|
||||
$('body').append("<div class='submarine_bg_ie' ><img src='img/png/submarine.png' width='100%' /></div> <div class='submarine_waves_ie' ><img src='img/png/waves.png' width='100%' /></div>");
|
||||
}
|
||||
}
|
||||
|
||||
//---------------------------//
|
||||
// LOADING PAGE CODE //
|
||||
//---------------------------//
|
||||
// It shows the loading animation for 3 seconds, before starting of the page/
|
||||
|
||||
$('.spinner').css('display','block');
|
||||
$(function(){
|
||||
$('svg').css('opacity','0');
|
||||
$('nav').css('opacity','0');
|
||||
$('.error').css('opacity','0');
|
||||
|
||||
setTimeout(function(){
|
||||
$('nav').css('opacity','1');
|
||||
$('svg').css('opacity','1');
|
||||
$('.error').css('opacity','1');
|
||||
$('.spinner').css('display','none');
|
||||
IE();
|
||||
}, 3000);
|
||||
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,413 @@
|
|||
*{ margin: 0; padding: 0; font-family: "微软雅黑"}
|
||||
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 14px; font-weight: normal;}
|
||||
img { border-style: none;}
|
||||
li{ list-style: none; float: left}
|
||||
a{ text-decoration: none}
|
||||
body {
|
||||
background-image: url(../img/01.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/*百度搜索*/
|
||||
.baidu{
|
||||
float: left;
|
||||
margin: 8px 0;
|
||||
margin-left: 100px;
|
||||
}
|
||||
.baidu form{
|
||||
position: relative
|
||||
}
|
||||
#Select{
|
||||
float: left;
|
||||
border: 1px solid #ccc
|
||||
}
|
||||
|
||||
.Select-box{
|
||||
text-align: center;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.Select-box ul{
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
top: 0px;
|
||||
z-index: 9999;
|
||||
background: #FFF;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
overflow: hidden
|
||||
}
|
||||
.Select-box li{
|
||||
width: 60px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
color: #484848;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.Select-box li:hover{
|
||||
background: #3385ff;
|
||||
color: #FFF;
|
||||
}
|
||||
.Select-box .this_s{
|
||||
color: #317ef3;
|
||||
}
|
||||
.Select-box .this_s:hover{
|
||||
background: #FFF;
|
||||
color: #317ef3;
|
||||
}
|
||||
|
||||
.qingkong{
|
||||
position: absolute;
|
||||
right: 95px;
|
||||
top: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 18px;
|
||||
line-height: 16px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
}
|
||||
.qingkong:hover{
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
.qingkong:active{
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
.content{
|
||||
width: 1100px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top:25%;
|
||||
}
|
||||
.qingkong{
|
||||
right: 115px;
|
||||
top: 15px;
|
||||
}
|
||||
/*内容区域*/
|
||||
.body{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
.bg-2{
|
||||
padding-top: 60px;
|
||||
}
|
||||
.content{
|
||||
width: 1100px;
|
||||
overflow: hidden;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
|
||||
.nav-list{
|
||||
width: 1100px;
|
||||
}
|
||||
|
||||
/*优秀网站推荐*/
|
||||
|
||||
/*小分栏*/
|
||||
.mix-content{
|
||||
width: 1120px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-tips{
|
||||
font-size: 12px;
|
||||
color: #959595;
|
||||
float: left;
|
||||
}
|
||||
.right-tips{
|
||||
font-size: 12px;
|
||||
color: #959595;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.tit-style2{
|
||||
margin-top: 35px;
|
||||
padding: 0 50px;
|
||||
padding-top: 30px;
|
||||
line-height: 40px;
|
||||
border-top: 2px solid #FFF;
|
||||
border-bottom: 2px solid #FFF;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
.min-tit{
|
||||
font-size: 15px;
|
||||
color: #959595;
|
||||
}
|
||||
|
||||
/*-----------------------------简洁版样式定义- 开始---------------------------------------------------*/
|
||||
|
||||
.baidu-2{
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
margin: 0 auto;
|
||||
background: none;
|
||||
padding-top: 90px;
|
||||
z-index: 1;
|
||||
}
|
||||
.baidu-2 form{
|
||||
width: 520px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.baidu-2 input{
|
||||
padding: 13px 8px;
|
||||
opacity: 0.9;
|
||||
font-size: 15px;
|
||||
}
|
||||
#Select-2{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.Select-box-2{
|
||||
text-align: center;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.Select-box-2 ul{
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 9999;
|
||||
background: rgba(255,255,255,0.9);
|
||||
border: none;
|
||||
overflow: hidden
|
||||
}
|
||||
.Select-box-2 li{
|
||||
width: 60px;
|
||||
line-height: 46px;
|
||||
font-size: 15px;
|
||||
color: #484848;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
}
|
||||
.Select-box-2 li:hover{
|
||||
background: #3385ff;
|
||||
color: #FFF;
|
||||
}
|
||||
.Select-box-2 .this_s{
|
||||
color: #317ef3;
|
||||
width: 80px;
|
||||
}
|
||||
.Select-box-2 .this_s:hover{
|
||||
background: none;
|
||||
color: #317ef3;
|
||||
}
|
||||
|
||||
#kw-2 {
|
||||
width: 413px;
|
||||
outline: 0;
|
||||
border: 1px solid #ccc;
|
||||
background: rgba(255,255,255,0.2);
|
||||
color: #000000;
|
||||
padding-left: 8px;
|
||||
font-weight: bold;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#su-2{
|
||||
width: 90px;
|
||||
background: blue;
|
||||
|
||||
border-top: #3385ff 1px solid;
|
||||
border-bottom: 1px solid #2d78f4;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
/*去轮廓阴影*/
|
||||
outline: none;
|
||||
height: 48px;
|
||||
border: none;
|
||||
}
|
||||
#su-2:hover{
|
||||
background: blue;
|
||||
border-bottom: 1px solid blue;
|
||||
}
|
||||
#su-2:active{
|
||||
background: blue;
|
||||
box-shadow: inset 1px 1px 3px blue;
|
||||
-webkit-box-shadow: inset 1px 1px 3px blue;
|
||||
}
|
||||
|
||||
|
||||
.jianjie{
|
||||
width: 1170px;
|
||||
z-index: 1;
|
||||
}
|
||||
.jj-list{
|
||||
width: 350px;
|
||||
margin-right: 25px;
|
||||
float: left;
|
||||
margin-bottom: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
.jj-list-tit{
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
color: #ffffff;
|
||||
padding-left: 4px;
|
||||
z-index: 1;
|
||||
}
|
||||
.jj-list-con{
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
.jj-list-con li{
|
||||
width: 110px;
|
||||
margin: 3px 3px;
|
||||
}
|
||||
.link-3{
|
||||
display: block;
|
||||
background: rgba(0,0,0,.35);
|
||||
color: #FFF;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
padding: 4px 0;
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s;
|
||||
z-index: 1;
|
||||
}
|
||||
.link-3:hover{
|
||||
background: rgba(0,0,0,.45);
|
||||
font-size: 15px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 2%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.footer1{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*-----------------------------简洁版样式定义- 结束---------------------------------------------------*/
|
||||
|
||||
|
||||
div#baidu {
|
||||
width: 80px;
|
||||
/* height: 50px; */
|
||||
height: 1.2rem;
|
||||
/* background-color: #fff; */
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.baidu-2 form {
|
||||
max-width: 520px;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 1.2rem;
|
||||
padding: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.in5 {
|
||||
width: calc(100% - 160px);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div#qingkong {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
line-height: 14px;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
input#su-2 {
|
||||
width: 79px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#kw-2 {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
ul.keylist {
|
||||
width: calc(80% - 0px) !important;
|
||||
}
|
||||
/*整个表单宽度*/
|
||||
.baidu-2 form{
|
||||
|
||||
}
|
||||
div.in5 {
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
input#su-2{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.keylist {
|
||||
max-width: 360px;
|
||||
width: calc(80% - 160px);
|
||||
box-sizing: border-box;
|
||||
z-index: 52;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
ul.keylist {
|
||||
outline: 0;
|
||||
background: #fff;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
}
|
||||
ul.keylist li {
|
||||
float: none;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
.keylist li:hover{
|
||||
background-color:#f1f1f1;
|
||||
}
|
||||
.keylist li.active{
|
||||
background-color:#f1f1f1;
|
||||
}
|
||||
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.z_m_i {
|
||||
padding: 10px 20px 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.jj-list-con li{
|
||||
position: relative;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.jj-list-con li:hover .i_r_remove{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
@media screen and (max-width:768px) {
|
||||
*{
|
||||
margin:0;padding: 0;
|
||||
}
|
||||
|
||||
html,body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
/*内容样式，使用flex布局*/
|
||||
.content{
|
||||
width: 15rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
/*height: 46rem;*/
|
||||
position: absolute;
|
||||
top:26%;
|
||||
}
|
||||
/*搜索框总体样式*/
|
||||
.baidu{
|
||||
position: relative;
|
||||
width: 14rem;
|
||||
height: 2.6rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.baidu-2{
|
||||
height: 2.6rem;
|
||||
}
|
||||
|
||||
/*取消多级搜索，只保留百度*/
|
||||
#Select-2{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.Select-box-2{
|
||||
display: none;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.Select-box-2 li{
|
||||
background-color: yellow;
|
||||
display: none;
|
||||
float: none;
|
||||
}
|
||||
/*输入框样式*/
|
||||
#kw-2{
|
||||
width: 10rem;
|
||||
height: 1.2rem;
|
||||
border:0;
|
||||
position: absolute;
|
||||
padding-left: 10px;
|
||||
}
|
||||
/*搜索框样式*/
|
||||
#su-2 {
|
||||
width: 3rem;
|
||||
text-align: center;
|
||||
line-height: 0rem;
|
||||
position: absolute;
|
||||
background-color: blue;
|
||||
border-color: blue;
|
||||
right: 1rem;
|
||||
border-radius: 0;
|
||||
height: 1.2rem;
|
||||
}
|
||||
#su-2:hover{
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
#su-2:avtive{
|
||||
background-color: blue;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*content下的所有div宽度*/
|
||||
.content div{
|
||||
width: 100%;
|
||||
}
|
||||
/*每个选择框的宽度*/
|
||||
.content li{
|
||||
width: 4.69rem;
|
||||
}
|
||||
/*放弃content外的footer*/
|
||||
.footer{
|
||||
display: none;
|
||||
}
|
||||
/*移动端使用的footer*/
|
||||
.footer1{
|
||||
display: block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
bottom: 0;
|
||||
color:white;
|
||||
}
|
||||
|
||||
input[type="button"], input[type="submit"], input[type="reset"] {
|
||||
|
||||
-webkit-appearance: none;
|
||||
|
||||
}
|
||||
|
||||
textarea { -webkit-appearance: none;}
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
|
|
@ -0,0 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>简约导航</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
||||
<meta content="telephone=no,email=no" name="format-detection">
|
||||
<meta content="yes" name="apple-mobile-web-app-capable">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<meta name="apple-touch-fullscreen" content="yes" />
|
||||
<meta name="keywords" content="网址导航" />
|
||||
<meta name="description" content="一个简单美观可自定义的网址导航" />
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/yidong.css" />
|
||||
<!-- 本项目开源地址：https://github.com/appexplore/jianavi 请勿完全抄袭源码，请勿声明自己是原创 -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- 搜索栏start -->
|
||||
<div class="baidu baidu-2">
|
||||
<form name="f" action="https://www.baidu.com/s" target="_blank">
|
||||
<div class="Select-box-2" id="baidu">
|
||||
<ul>
|
||||
<li class="this_s">百 度</li>
|
||||
<li class="miji_s">多 吉</li>
|
||||
<li class="bing_s">必 应</li>
|
||||
<li class="google_s">谷 歌</li>
|
||||
<li class="baidu_s">百 度</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="in5">
|
||||
<input name="wd" id="kw-2" maxlength="100" autocomplete="off" type="text">
|
||||
<div class="qingkong" id="qingkong" title="清空">x</div>
|
||||
</div>
|
||||
<input value="搜 索" id="su-2" type="submit">
|
||||
</form>
|
||||
<ul class="keylist"></ul>
|
||||
</div>
|
||||
<!-- 搜索栏end -->
|
||||
|
||||
<!-- 内容start -->
|
||||
<div class="body">
|
||||
<div class="content">
|
||||
<div class="jianjie">
|
||||
<div class="jj-list">
|
||||
<div class="jj-list-tit">学习 · 生活</div>
|
||||
<ul class="jj-list-con">
|
||||
<li><a href="https://www.taobao.com/" class="link-3" target="_blank" rel="nofollow">淘宝</a></li>
|
||||
<li><a href="https://www.jd.com/" class="link-3" target="_blank" rel="nofollow">京东</a></li>
|
||||
<li><a href="http://123.sogou.com/shwz/yinhang.html" class="link-3" target="_blank"
|
||||
rel="nofollow">银行</a></li>
|
||||
<li><a href="https://www.amap.com/" class="link-3" target="_blank" rel="nofollow">地图</a></li>
|
||||
<li><a href="https://translate.google.cn/" class="link-3" target="_blank" rel="nofollow">翻译</a>
|
||||
</li>
|
||||
<li><a href="https://hao.qq.com/qita/youxiang.html" class="link-3" target="_blank"
|
||||
rel="nofollow">邮箱</a></li>
|
||||
<li><a href="https://www.runoob.com/" class="link-3" target="_blank" rel="nofollow">菜鸟教程</a>
|
||||
</li>
|
||||
<li><a href="https://study.163.com/" class="link-3" target="_blank" rel="nofollow">云课堂</a></li>
|
||||
<li><a href="https://www.icourse163.org/" class="link-3" target="_blank" rel="nofollow">MOOC</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jj-list">
|
||||
<div class="jj-list-tit">常用 · 社区</div>
|
||||
<ul class="jj-list-con">
|
||||
<li><a href="https://wx.qq.com/" class="link-3" target="_blank" rel="nofollow">微信</a></li>
|
||||
<li><a href="https://weibo.com/" class="link-3" target="_blank" rel="nofollow">微博</a></li>
|
||||
<li><a href="https://www.zhihu.com/" class="link-3" target="_blank" rel="nofollow">知乎</a></li>
|
||||
<li><a href="https://tieba.baidu.com/" class="link-3" target="_blank" rel="nofollow">贴吧</a></li>
|
||||
<li><a href="http://www.soomal.com/" class="link-3" target="_blank" rel="nofollow">Soomal</a>
|
||||
</li>
|
||||
<li><a href="https://topbook.cc/overview" class="link-3" target="_blank"
|
||||
rel="nofollow">Topbook</a></li>
|
||||
<li><a href="https://github.com/" class="link-3" target="_blank" rel="nofollow">GitHub</a></li>
|
||||
<li><a href="https://www.douban.com/" class="link-3" target="_blank" rel="nofollow">豆瓣</a></li>
|
||||
<li><a href="https://www.v2ex.com/" class="link-3" target="_blank" rel="nofollow">V2EX</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jj-list">
|
||||
<div class="jj-list-tit">影音 · 娱乐</div>
|
||||
<ul class="jj-list-con">
|
||||
<li><a href="https://www.iqiyi.com/" class="link-3" target="_blank" rel="nofollow">爱奇艺</a></li>
|
||||
<li><a href="https://v.qq.com/" class="link-3" target="_blank" rel="nofollow">腾讯视频</a></li>
|
||||
<li><a href="https://www.bilibili.com/" class="link-3" target="_blank" rel="nofollow">哔哩哔哩</a>
|
||||
</li>
|
||||
<li><a href="https://www.mgtv.com/" class="link-3" target="_blank" rel="nofollow">芒果TV</a></li>
|
||||
<li><a href="https://www.youku.com/" class="link-3" target="_blank" rel="nofollow">优酷</a></li>
|
||||
<li><a href="https://music.163.com/" class="link-3" target="_blank" rel="nofollow">音乐</a></li>
|
||||
<li><a href="https://dianying.fm/" class="link-3" target="_blank" rel="nofollow">电影FM</a></li>
|
||||
<li><a href="http://www.rrys2019.com/" class="link-3" target="_blank" rel="nofollow">人人影视</a>
|
||||
</li>
|
||||
<li><a href="https://qinmei.video/" class="link-3" target="_blank" rel="nofollow">Qinmei</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jj-list">
|
||||
<div class="jj-list-tit">发现 · 世界</div>
|
||||
<ul class="jj-list-con">
|
||||
<li><a href="https://news.ifeng.com/" class="link-3" target="_blank" rel="nofollow">凤凰资讯</a>
|
||||
</li>
|
||||
<li><a href="https://ef.zhiweidata.com/#!/index" class="link-3" target="_blank"
|
||||
rel="nofollow">知微事见</a></li>
|
||||
<li><a href="https://sspai.com/" class="link-3" target="_blank" rel="nofollow">少数派</a></li>
|
||||
<li><a href="https://jikipedia.com/" class="link-3" target="_blank" rel="nofollow">小鸡词典</a></li>
|
||||
<li><a href="https://jandan.net/" class="link-3" target="_blank" rel="nofollow">煎蛋</a></li>
|
||||
<li><a href="https://youquhome.com/" class="link-3" target="_blank" rel="nofollow">有趣网址</a></li>
|
||||
<li><a href="https://site.nihaowang.com/" class="link-3" target="_blank" rel="nofollow">外网导航</a>
|
||||
</li>
|
||||
<li><a href="https://houxu.app/" class="link-3" target="_blank" rel="nofollow">后续</a></li>
|
||||
<li><a href="https://ac.scmor.com/" class="link-3" target="_blank" rel="nofollow">思谋学术</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jj-list">
|
||||
<div class="jj-list-tit">在线 · 工具</div>
|
||||
<ul class="jj-list-con">
|
||||
<li><a href="http://xiuxiu.web.meitu.com/" class="link-3" target="_blank"
|
||||
rel="nofollow">在线修图</a></li>
|
||||
<li><a href="https://cowtransfer.com/" class="link-3" target="_blank" rel="nofollow">收发文件</a>
|
||||
</li>
|
||||
<li><a href="https://cli.im/" class="link-3" target="_blank" rel="nofollow">二维码</a></li>
|
||||
<li><a href="http://mail.bccto.me/?lang=cn" class="link-3" target="_blank"
|
||||
rel="nofollow">临时邮箱</a></li>
|
||||
<li><a href="https://www.materialtools.com/" class="link-3" target="_blank"
|
||||
rel="nofollow">临时短信</a></li>
|
||||
<li><a href="https://convertio.co/zh/" class="link-3" target="_blank" rel="nofollow">格式转换</a>
|
||||
</li>
|
||||
<li><a href="http://www.hiwenku.com/" class="link-3" target="_blank" rel="nofollow">文档下载</a>
|
||||
</li>
|
||||
<li><a href="https://weibomiaopai.com/" class="link-3" target="_blank" rel="nofollow">视频下载</a>
|
||||
</li>
|
||||
<li><a href="http://www.musictool.top" class="link-3" target="_blank" rel="nofollow">音乐下载</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jj-list">
|
||||
<div class="jj-list-tit">搜索 · 资源</div>
|
||||
<ul class="jj-list-con">
|
||||
<li><a href="https://www.cupfox.com/" class="link-3" target="_blank" rel="nofollow">茶杯狐</a></li>
|
||||
<li><a href="https://www.dy2018.com/" class="link-3" target="_blank" rel="nofollow">电影天堂</a></li>
|
||||
<li><a href="https://www.coolist.net/" class="link-3" target="_blank" rel="nofollow">酷软清单</a>
|
||||
</li>
|
||||
<li><a href="https://minapp.com/" class="link-3" target="_blank" rel="nofollow">知晓程序</a></li>
|
||||
<li><a href="https://zhengbanxianmian.com/" class="link-3" target="_blank"
|
||||
rel="nofollow">软件限免</a></li>
|
||||
<li><a href="https://www.portablesoft.org/" class="link-3" target="_blank"
|
||||
rel="nofollow">便携软件</a></li>
|
||||
<li><a href="https://www.jiumodiary.com/" class="link-3" target="_blank" rel="nofollow">电子书</a>
|
||||
</li>
|
||||
<li><a href="https://pan.appts.cn/" class="link-3" target="_blank" rel="nofollow">常用软件</a>
|
||||
</li>
|
||||
<li><a href="http://www.zimuku.la/" class="link-3" target="_blank" rel="nofollow">字幕库</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容end -->
|
||||
|
||||
<!-- 底部版权start -->
|
||||
<!-- 开源不易，请勿去除下方版权信息 -->
|
||||
<!-- 如果您想修改下方版权信息，请打赏并留言您的网址 >> https://afdian.net/@appts -->
|
||||
|
||||
<div class="footer1">Copyright © 2020
|
||||
<a href="https://www.appts.cn/" style="color:#ffffff;" target="_blank" rel="nofollow">软件探索 </a>
|
||||
<a href="https://afdian.net/p/15771a3c764711ea99de52540025c377" style="color:#ffffff;" target="_blank"
|
||||
rel="nofollow">打赏 </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">Copyright © 2020
|
||||
<a href="https://www.appts.cn/" style="color:#ffffff;" target="_blank" rel="nofollow">软件探索 </a>
|
||||
<a href="https://afdian.net/p/15771a3c764711ea99de52540025c377" style="color:#ffffff;" target="_blank"
|
||||
rel="nofollow">打赏 </a>
|
||||
</div>
|
||||
<!-- 底部版权end -->
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="js/jquery.js"></script>
|
||||
<script type="text/javascript" src="js/js.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,330 @@
|
|||
$(function () {
|
||||
// $('body').height($('body')[0].clientHeight);
|
||||
initpage();
|
||||
$(window).resize(function () {
|
||||
initpage();
|
||||
})
|
||||
|
||||
function initpage() {
|
||||
var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
|
||||
var _html = document.getElementsByTagName('html')[0];
|
||||
view_width > 640 ? _html.style.fontSize = 640 / 16 + 'px' : _html.style.fontSize = view_width / 16 + 'px';
|
||||
}
|
||||
});
|
||||
|
||||
var sllTop;
|
||||
var divsTop = 330;/*document.getElementsByClassName('content')[0].offsetTop; 获取当前对象到其上级层顶部的距离*/
|
||||
window.onscroll = function () {
|
||||
var onBtn = document.getElementById('top-box');
|
||||
sllTop = document.documentElement.scrollTop || document.body.scrollTop;//如果浏览器不支持第一个事件则选择第二
|
||||
|
||||
if (sllTop >= 40) {
|
||||
$('.header-con').css('padding', '0');
|
||||
$('.logo img').css({ 'width': '50', 'margin-top': '5px', 'margin-left': '10px' });
|
||||
} else {
|
||||
$('.header-con').css('padding', '10px 0');
|
||||
$('.logo img').css({ 'width': '60', 'margin-top': '0px', 'margin-left': '0px' });
|
||||
}
|
||||
|
||||
if (sllTop > 240) {
|
||||
$('#tbox2').css('display', 'block')
|
||||
} else {
|
||||
$('#tbox2').css('display', 'none');
|
||||
}
|
||||
if (sllTop >= divsTop) {
|
||||
$('.left-list').css('position', 'fixed');
|
||||
} else {
|
||||
$('.left-list').css('position', '');
|
||||
}
|
||||
tlistTop();
|
||||
|
||||
};
|
||||
|
||||
$(function () {
|
||||
$(".taoba").click(function (event) {
|
||||
var i = $(this).index();
|
||||
var id = $('.dingwei')[i];
|
||||
$("html,body").animate({ scrollTop: $(id).offset().top - 80 }, 800);
|
||||
});
|
||||
|
||||
|
||||
$(".list-text").click(function (event) {
|
||||
var i2 = $(this).index();
|
||||
var id2 = $('.sethome-con')[i2];
|
||||
$("html,body").animate({ scrollTop: $(id2).offset().top - 80 }, 800);
|
||||
});
|
||||
});
|
||||
|
||||
function tlistTop() {
|
||||
var sethome_conHeight;
|
||||
var tihsHeight;
|
||||
var list_text = document.getElementsByClassName('fa-caret-right');
|
||||
if (list_text.length === 0) {
|
||||
return false; //如果匹配到0个元素，则将函数返回，不继续执行
|
||||
}
|
||||
arr1 = []; //存储元素的top距离页面顶部的高度
|
||||
for (var i = 0; i <= 4; i++) {
|
||||
thisHeight = document.getElementsByClassName('sethome-con')[i].offsetTop + divsTop - 80;
|
||||
arr1.push(thisHeight); //将循环获取到的值添加到数组里面
|
||||
}
|
||||
|
||||
if (sllTop >= arr1[0]) {
|
||||
list_text[0].style.opacity = 1;
|
||||
list_text[1].style.opacity = 0;
|
||||
list_text[2].style.opacity = 0;
|
||||
list_text[3].style.opacity = 0;
|
||||
list_text[4].style.opacity = 0;
|
||||
} if (sllTop >= arr1[1]) {
|
||||
list_text[0].style.opacity = 0;
|
||||
list_text[1].style.opacity = 1;
|
||||
list_text[2].style.opacity = 0;
|
||||
list_text[3].style.opacity = 0;
|
||||
list_text[4].style.opacity = 0;
|
||||
} if (sllTop >= arr1[2]) {
|
||||
list_text[0].style.opacity = 0;
|
||||
list_text[1].style.opacity = 0;
|
||||
list_text[2].style.opacity = 1;
|
||||
list_text[3].style.opacity = 0;
|
||||
list_text[4].style.opacity = 0;
|
||||
} if (sllTop >= arr1[3]) {
|
||||
list_text[0].style.opacity = 0;
|
||||
list_text[1].style.opacity = 0;
|
||||
list_text[2].style.opacity = 0;
|
||||
list_text[3].style.opacity = 1;
|
||||
list_text[4].style.opacity = 0;
|
||||
} if (sllTop >= arr1[4]) {
|
||||
list_text[0].style.opacity = 0;
|
||||
list_text[1].style.opacity = 0;
|
||||
list_text[2].style.opacity = 0;
|
||||
list_text[3].style.opacity = 0;
|
||||
list_text[4].style.opacity = 1;
|
||||
}
|
||||
}
|
||||
|
||||
$('#gotop').click(function () {
|
||||
$('body,html').animate({
|
||||
scrollTop: 0
|
||||
},
|
||||
800);//点击回到顶部按钮，缓懂回到顶部,数字越小越快
|
||||
})
|
||||
|
||||
|
||||
/*选择搜索引擎*/
|
||||
$('.Select-box ul').hover(function () {
|
||||
$(this).css('height', 'auto')
|
||||
}, function () {
|
||||
$(this).css('height', '40px')
|
||||
});
|
||||
$('.Select-box-2 ul').hover(function () {
|
||||
$(this).css('height', 'auto')
|
||||
}, function () {
|
||||
$(this).css('height', '47px')
|
||||
});
|
||||
|
||||
$('.Select-box-2 li').click(function () {
|
||||
var _tihs = $(this).attr('class');
|
||||
var _html = $(this).html();
|
||||
var _name = 'wd';
|
||||
if (_tihs == 'this_s') {
|
||||
return "";
|
||||
}
|
||||
if (_tihs == 'baidu_s') {
|
||||
_tihs = 'https://www.baidu.com/s';
|
||||
_name = 'wd';
|
||||
} else if (_tihs == 'google_s') {
|
||||
_tihs = 'https://www.google.com/search';
|
||||
_name = 'q';
|
||||
} else if (_tihs == 'bing_s') {
|
||||
_tihs = 'https://www.bing.com/search';
|
||||
_name = 'q';
|
||||
} else if (_tihs == 'miji_s') {
|
||||
_tihs = 'https://www.dogedoge.com/results';
|
||||
_name = 'q';
|
||||
} else {
|
||||
_tihs = 'https://www.baidu.com/s';
|
||||
_name = 'wd';
|
||||
}
|
||||
$('.baidu form').attr('action', _tihs);
|
||||
$('.this_s').html(_html);
|
||||
$('#kw-2').attr('name', _name);
|
||||
$('.Select-box-2 ul').css('height', '48px');
|
||||
|
||||
setCookie("_search_", _html + "_nln_" + _tihs + "_nln_" + _name);
|
||||
});
|
||||
|
||||
function _search_() {
|
||||
var aCookie = document.cookie.split(";");
|
||||
|
||||
for (var i = 0; i < aCookie.length; i++) {
|
||||
var aCrumb = aCookie[i].split("=");
|
||||
if (aCrumb[0].toString().trim() == 'order_list') {
|
||||
continue;
|
||||
}
|
||||
var name = unescape(aCrumb[0].trim());
|
||||
|
||||
if (aCrumb[0].toString().trim().indexOf("_search_") > -1) {
|
||||
|
||||
var link = getCookie(name).split("_nln_");
|
||||
|
||||
$('.baidu form').attr('action', link[1]);
|
||||
$('.this_s').html(link[0]);
|
||||
$('#kw-2').attr('name', link[2]);
|
||||
$('.Select-box-2 ul').css('height', '48px');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
_search_();
|
||||
|
||||
//清空输入框内容
|
||||
$('.qingkong').click(function () {
|
||||
cls();
|
||||
$(this).css('display', 'none')
|
||||
});
|
||||
function cls() {
|
||||
var sum = 0;
|
||||
var t = document.getElementsByTagName("INPUT");
|
||||
for (var i = 0; i < t.length; i++) {
|
||||
if (t[i].type == 'text') {
|
||||
++sum;
|
||||
t[i].value = "";//清空
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//清空输入框按钮的显示和隐藏
|
||||
function if_btn() {
|
||||
var btn_obj = document.getElementById("kw") || document.getElementById("kw-2");
|
||||
var cls_btn = document.getElementById("qingkong");
|
||||
var btn_obj_val;
|
||||
var times;
|
||||
//当元素获得焦点时
|
||||
if (btn_obj == '' || btn_obj == null) {
|
||||
return false; //如果没有找到这个元素，则将函数返回，不继续执行
|
||||
}
|
||||
btn_obj.onfocus = function () {
|
||||
times = setInterval(function () {
|
||||
btn_obj_val = btn_obj.value;
|
||||
if (btn_obj_val != 0) {
|
||||
cls_btn.style.display = "block";
|
||||
} else {
|
||||
cls_btn.style.display = "none";
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
//元素失去焦点时
|
||||
btn_obj.onblur = function () {
|
||||
clearInterval(times);
|
||||
}
|
||||
|
||||
}
|
||||
if_btn();
|
||||
|
||||
$('.muban li').click(function () {
|
||||
_index = $(this).index();
|
||||
$(this).addClass('shaw').siblings().removeClass('shaw');
|
||||
$('.muban-list ul').eq(_index).fadeIn(250).siblings().fadeOut(0);
|
||||
});
|
||||
$('.ruanjian-tab li').click(function () {
|
||||
_index = $(this).index();
|
||||
$(this).addClass('shaw').siblings().removeClass('shaw');
|
||||
$('.ruanjian-list ul').eq(_index).fadeIn(250).siblings().fadeOut(0);
|
||||
});
|
||||
|
||||
$('.list-link-4').hover(function () {
|
||||
//获取当前元素的title内容，赋值给_thisTit
|
||||
var _thisTit = $(this).attr('data-title');
|
||||
//tips提示内容为_thisTit（即等于当前鼠标滑过元素的title内容），吸附对象为当前鼠标滑过对象
|
||||
if (_thisTit != "") { //判断条件，当前元素的data-title不等于空才执行下面的代码
|
||||
layer.tips(_thisTit, this, {
|
||||
tips: [1, '#1E9FFF'],
|
||||
time: 99999,
|
||||
});
|
||||
}
|
||||
|
||||
}, function () {
|
||||
$('.layui-layer-tips').css('display', 'none')
|
||||
});
|
||||
|
||||
var btn = $("#kw-2"), oUl = $(".keylist")[0];
|
||||
|
||||
$("#qingkong").click(function () {
|
||||
oUl.style.display = 'none';
|
||||
})
|
||||
|
||||
// 搜索联想
|
||||
btn.keyup(function (e) {
|
||||
if (e.keyCode == 13 || e.keyCode == 40 || e.keyCode == 38) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
var value = this.value;
|
||||
if (value) {
|
||||
var oScript = document.createElement('script');
|
||||
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=aa'
|
||||
document.body.appendChild(oScript);
|
||||
oScript.remove();
|
||||
} else if (value == 0) {
|
||||
oUl.style.display = 'none';
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
// 控制搜索时显示联想内容的数量
|
||||
function aa(data) {
|
||||
//console.log(data);
|
||||
oUl.style.display = 'block';
|
||||
var list = data.s;
|
||||
var str = '';
|
||||
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
// 最多显示8行
|
||||
if (i < 8) {
|
||||
str += '<li>' + list[i] + '</li>';
|
||||
}
|
||||
|
||||
}
|
||||
oUl.innerHTML = str;
|
||||
}
|
||||
|
||||
$(".keylist").on('click', 'li', function () {
|
||||
var value = $(this).text();
|
||||
btn.val(value);
|
||||
$('#su-2').click();
|
||||
oUl.style.display = 'none';
|
||||
});
|
||||
|
||||
//利用键盘控制选择搜索联想词
|
||||
$(document).keydown(function (e) {
|
||||
|
||||
if (e.keyCode == 13 && oUl.style.display == 'block') {
|
||||
btn.val($(".keylist li.active").html().trim());
|
||||
$('#su-2').click();
|
||||
oUl.style.display = 'none';
|
||||
//alert('你按下了Enter');
|
||||
} else if (e && e.keyCode == 40 && oUl.style.display == 'block') { //下
|
||||
//active
|
||||
if ($(".keylist li.active").length > 0) {
|
||||
var k1 = $(".keylist li.active")
|
||||
k1.next().addClass("active");
|
||||
k1.removeClass("active");
|
||||
} else {
|
||||
var k0 = $($(".keylist li")[0]);
|
||||
k0.addClass("active");
|
||||
}
|
||||
} else if (e && e.keyCode == 38 && oUl.style.display == 'block') { // 上
|
||||
|
||||
var k1 = $(".keylist li.active")
|
||||
k1.prev().addClass("active");
|
||||
k1.removeClass("active");
|
||||
} else {
|
||||
//btn.keyup();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue