webfront / zhenwei · 提交

转到一个项目

作者 乔爽
提交 11ca00f30576fe1ed8d22f1753dcf5f730b952ba 1 个父辈 2dafb705

update

内嵌 并排对比
正在显示 27 个修改的文件 包含 1523 行增加 和 160 行删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css">
<link rel="stylesheet" type="text/css" href="css/banner.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
<script src="js/base.js"></script>
<style>
.banner{
width: 7.5rem;
height: 100%;
position: relative;
}
.banner_pic{
width: 7.5rem;
height:100%;
display: flex;
}
.banner_pic img{
width: 100%;
height: 100%
}
.swiper-pagination-bullet{
background-color: #7ECEF4;
}
.swiper-pagination-bullet-active{
background-color: #ffffff;
}
/*按钮之间的间隔*/
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
margin: 0 0.6rem;
}
</style>
</head>
<body>
<div class="banner">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide banner_pic">
<img src="images/banner.png">
<div class="btn_button">点击进入 天津汽车零部件展网站>></div>
</div>
<div class="swiper-slide banner_pic">
<img src="images/banner.png">
<div class="btn_button">点击进入 工业装配及自动化展网站>></div>
</div>
<div class="swiper-slide banner_pic">
<img src="images/banner.png">
<div class="btn_button">点击进入 天津汽车零部件展网站>></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
$('.btn_button').click(function () {
console.log(111)
window.location.href = "index.html";
})
var swiper = new Swiper('.swiper-container',{
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
loop: true, // 循环模式选项
pagination: {
el: '.swiper-pagination',
},
});
</script>
</html>
... ...
body,html{
width:100%;
height:100%;
}
.banner{
height:100%;
}
body{
background-color: #F4F5F9;
}
*{
margin: 0;
padding: 0;
}
.btn_button{
width: 100%;
font-size: 0.26rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,255,255,1);
line-height:79px;
text-align: center;
position: absolute;
bottom: 0.8rem;
}
... ...
... ... @@ -15,10 +15,31 @@ body{
}
.head{
width: 7.5rem;
height: 0.88rem;
background:rgba(201,201,201,1);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.2rem;
}
.head_new{
font-size: 0.3rem;
color: rgba(68,68,68,1);
font-weight: bold;
}
.head_pic{
width: 7.5rem;
height: 2.18rem;
display: flex;
margin-top: 0.88rem;
}
.head img{
.head_pic img{
width: 100%;
height: 100%;
}
... ...
... ... @@ -15,10 +15,31 @@ body{
}
.head{
width: 7.5rem;
height: 0.88rem;
background:rgba(201,201,201,1);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.2rem;
}
.head_new{
font-size: 0.3rem;
color: rgba(68,68,68,1);
font-weight: bold;
}
.head_pic{
width: 7.5rem;
height: 2.9rem;
display: flex;
margin-top: 0.88rem;
}
.head img{
.head_pic img{
width: 100%;
height: 100%;
}
... ...
... ... @@ -18,6 +18,10 @@ body{
background:linear-gradient(-35deg,rgba(134,31,84,0.8),rgba(15,75,156,0.8));
display: flex;
}
.head img{
width: 100%;
height: 100%;
}
.menu{
width: 6.86rem;
display: flex;
... ... @@ -45,6 +49,11 @@ body{
height: 0.7rem;
background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1));
border-radius:50%;
display: flex;
}
.menu_item_top img{
width: 100%;
height: 100%;
}
.menu_item_bottom{
margin-top: 0.1rem;
... ... @@ -56,17 +65,28 @@ body{
.middle{
width: 7.5rem;
height: 1.96rem;
opacity: 0.35;
background:linear-gradient(35deg,rgba(134,31,84,0.9),rgba(15,75,156,0.9));
margin-top: 0.23rem;
display: flex;
position: relative;
align-items: center;
}
.middle img{
width: 100%;
height: 100%;
}
.middle_text{
width: 100%;
font-size: 0.32rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,255,255,1);
line-height: 0.29rem;
position: absolute;
text-align: center;
}
.new{
width: 1.56rem;
height: 0.5rem;
font-size: 0.27rem;
display: flex;
align-items: center;
... ... @@ -75,13 +95,13 @@ body{
}
.new_text{
margin-left: 0.1rem;
}
.new_underline{
width: 1.56rem;
height:2px;
background:linear-gradient(-35deg,rgba(134,31,84,1),rgba(15,75,156,1));
margin-top: 0.2rem;
margin-top: 0.1rem;
}
.bottom{
display: flex;
... ...
... ... @@ -60,17 +60,104 @@ body{
/*-webkit-text-fill-color:transparent;*/
}
.item_color:before{
content: "";
width: 1.52rem;
height: 0.02rem;
background:linear-gradient(-85deg,rgba(110,15,119,1),rgba(3,24,165,1));
-webkit-background-clip:text;
/*-webkit-background-clip:text;*/
-webkit-text-fill-color:transparent;
position: absolute;
bottom: 0;
}
.bottom_sub{
margin-top: 0.51rem;
width: 6.16rem;
height: 0.91rem;
background:linear-gradient(-85deg,rgba(110,15,119,0.9),rgba(3,24,165,0.9));
border:1px solid rgba(112,112,112,1);
border-radius: 0.08rem;
font-size: 0.33rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,255,255,1);
line-height: 0.91rem;
text-align: center;
}
.bottom_t{
font-size: 0.26rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(128,128,128,1);
line-height: 0.32rem;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.2rem;
}
.bottom_t_item{
display: flex;
align-items: center;
margin-top: 0.51rem;
}
.bottom_t_item span{
margin-left: 0.2rem;
}
/*注册输入框*/
.bottom_small{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 0.4rem;
}
.bottom_small_left{
width: 3.34rem;
height: 0.9rem;
border:1px solid rgba(112,112,112,1);
border-radius: 0.08rem;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 0.2rem;
}
.bottom_small_left input{
width: 2.2rem;
height: 0.6rem;
box-sizing: border-box;
padding: 0 0.2rem;
outline: none;
border: none;
background: transparent;
}
.bottom_small_left input::placeholder{
color: #B3B3B3;
}
.bottom_small_right{
width: 2.64rem;
height: 0.9rem;
background:linear-gradient(-85deg,rgba(91,51,16,0.9),rgba(243,192,96,0.9));
border-radius: 0.08rem;
font-size: 0.28rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,255,255,1);
line-height: 0.9rem;
text-align: center;
}
.bottom_text{
margin-top: 0.32rem;
font-size: 0.26rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(128,128,128,1);
line-height: 0.26rem;
text-align: center;
}
.bottom{
display: flex;
flex-flow: column;
... ...
body{
background-color: #F4F5F9;
}
*{
margin: 0;
padding: 0;
}
.container{
width: 7.5rem;
line-height: 1;
display: flex;
flex-flow: column;
align-items: center;
}
/*头部*/
.head{
width: 7.5rem;
height: 0.88rem;
background:rgba(201,201,201,1);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.2rem;
}
.head_new{
font-size: 0.3rem;
color: rgba(68,68,68,1);
font-weight: bold;
}
.items{
margin-top: 0.88rem;
margin-bottom: 1rem;
}
.item{
width: 7.3rem;
height: 2rem;
display: flex;
background:rgba(255,255,255,1);
box-shadow:0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.22);
margin-top: 0.1rem;
position: relative;
}
.item:first-child{
margin-top: 0.21rem;
}
.item_left{
width: 1.8rem;
height: 1.75rem;
display: flex;
border-radius: 0.1rem;
margin: 0.13rem 0 0.13rem 0.1rem;
}
.item_left img{
width: 100%;
height: 100%;
border-radius: 0.1rem;
}
.item_mid{
width: 4rem;
height: 1.6rem;
display: flex;
flex-flow: column;
margin: 0.2rem;
}
.item_mid_big{
height: 1rem;
font-size: 0.3rem;
font-weight: bold;
line-height: 0.42rem;
box-sizing: border-box;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.item_mid_small{
height: 0.9rem;
font-size: 0.22rem;
color: #333333;
line-height: 0.38rem;
box-sizing: border-box;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-top: 0.1rem;
}
.item_right{
width: 0.9rem;
height: 2rem;
background: #EA474B;
border-radius: 0.02rem;
position: absolute;
right: 0;
font-size: 0.22rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,255,255,1);
line-height: 0.38rem;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.color_gray{
background-color: #e5e5e5;
}
/*底部菜单栏*/
.bottom_menu{
width: 7.5rem;
height: 0.88rem;
display: flex;
align-items: center;
justify-content: space-around;
background-color: #ffffff;
position: fixed;
bottom: 0;
}
.bottom_menu_index{
display: flex;
flex-flow: column;
align-items: center;
color: #666666;
}
.bottom_menu_index_text{
font-size: 0.22rem;
color: #666666;
}
... ...
.pagingUl{
float:right;
padding:0;
margin:0;
list-style: none;
}
.pagingUl li{
float: left;
width: 30px;
height: 30px;
list-style: 30px;
text-align: center;
}
.pagingUl li a{
text-decoration: none;
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 28px;
padding: 0;
background: #fafafa;
color: #666;
font-size: 12px;
border: 1px solid #ddd;
}
.prv, .next {
width: 30px;
height: 30px;
float: left;
text-align: center;
line-height: 30px;
border: 1px solid #ddd;
cursor: pointer;
}
.first, .last {
width: 30px;
height: 30px;
font-size: 12px;
text-align: center;
line-height: 30px;
border: 1px solid #ddd;
cursor: pointer;
}
\ No newline at end of file
... ...
... ... @@ -148,6 +148,11 @@ body{
height: 0.7rem;
background:linear-gradient(0deg,rgba(0,87,182,1),rgba(0,141,209,1));
border-radius:50%;
display: flex;
}
.menu_item_top img{
width: 100%;
height: 100%;
}
.menu_item_bottom{
margin-top: 0.1rem;
... ... @@ -159,15 +164,25 @@ body{
.middle{
width: 7.5rem;
height: 1.96rem;
opacity: 0.35;
background:linear-gradient(35deg,rgba(134,31,84,0.9),rgba(15,75,156,0.9));
margin-top: 0.23rem;
display: flex;
position: relative;
align-items: center;
}
.middle img{
width: 100%;
height: 100%;
}
.middle_text{
width: 100%;
font-size: 0.32rem;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,255,255,1);
line-height: 0.29rem;
position: absolute;
text-align: center;
}
.new{
width: 1.56rem;
font-size: 0.27rem;
... ...
/**
* Swiper 4.4.6
* Most modern mobile touch slider and framework with hardware accelerated transitions
* http://www.idangero.us/swiper/
*
* Copyright 2014-2018 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: December 19, 2018
*/
.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height,-webkit-transform;transition-property:height,-webkit-transform;-o-transition-property:transform,height;transition-property:transform,height;transition-property:transform,height,-webkit-transform}.swiper-container-3d{-webkit-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-wp8-horizontal,.swiper-container-wp8-horizontal>.swiper-wrapper{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-container-wp8-vertical,.swiper-container-wp8-vertical>.swiper-wrapper{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s opacity;-o-transition:.3s opacity;transition:.3s opacity;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(.66);-ms-transform:scale(.66);transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(.33);-ms-transform:scale(.33);transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:.2s top,.2s -webkit-transform;transition:.2s top,.2s -webkit-transform;-o-transition:.2s transform,.2s top;transition:.2s transform,.2s top;transition:.2s transform,.2s top,.2s -webkit-transform}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s left,.2s -webkit-transform;transition:.2s left,.2s -webkit-transform;-o-transition:.2s transform,.2s left;transition:.2s transform,.2s left;transition:.2s transform,.2s left,.2s -webkit-transform}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:.2s right,.2s -webkit-transform;transition:.2s right,.2s -webkit-transform;-o-transition:.2s transform,.2s right;transition:.2s transform,.2s right;transition:.2s transform,.2s right,.2s -webkit-transform}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;-ms-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-progressbar.swiper-pagination-white{background:rgba(255,255,255,.25)}.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-pagination-progressbar.swiper-pagination-black{background:rgba(0,0,0,.25)}.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill{background:#000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:'';width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-coverflow .swiper-wrapper{-ms-perspective:1200px}
\ No newline at end of file
... ...
... ... @@ -15,10 +15,31 @@ body{
}
.head{
width: 7.5rem;
height: 0.88rem;
background:rgba(201,201,201,1);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 0.2rem;
}
.head_new{
font-size: 0.3rem;
color: rgba(68,68,68,1);
font-weight: bold;
}
.head_pic{
margin-top: 0.88rem;
width: 7.5rem;
height: 2.18rem;
display: flex;
}
.head img{
.head_pic img{
width: 100%;
height: 100%;
}
... ...
... ... @@ -126,6 +126,11 @@ body{
overflow: hidden;
}
.func_page{
width: 4.5rem;
display: flex;
margin-bottom: 1.3rem;
}
/*底部菜单栏*/
.bottom_menu{
... ...
... ... @@ -6,16 +6,42 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css">
<link rel="stylesheet" type="text/css" href="css/dlhd.css">
<link rel="stylesheet" type="text/css" href="css/dropload.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<style>
.icon-zuo{
color: #959595;
font-size: 0.38rem;
}
.icon-iconfont-edu12{
color: #959595;
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<!--头部图片-->
<!--头部信息-->
<div class="head">
<!--左图标-->
<div class="iconfont icon-zuo">
</div>
<!--导览活动-->
<div class="head_new">
导览活动
</div>
<!--右菜单-->
<div>
</div>
</div>
<!--头部图片-->
<div class="head_pic">
<img src="images/666.png">
</div>
<!--顶部内容-->
... ...
... ... @@ -6,14 +6,40 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css">
<link rel="stylesheet" type="text/css" href="css/gyzh.css">
<script src="js/base.js"></script>
<style>
.icon-zuo{
color: #959595;
font-size: 0.38rem;
}
.icon-iconfont-edu12{
color: #959595;
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<!--头部图片-->
<!--头部信息-->
<div class="head">
<!--左图标-->
<div class="iconfont icon-zuo">
</div>
<!--关于展位-->
<div class="head_new">
关于展位
</div>
<!--右菜单-->
<div>
</div>
</div>
<!--头部图片-->
<div class="head_pic">
<img src="images/333.png">
</div>
<!--顶部信息-->
... ...
... ... @@ -9,18 +9,23 @@
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/base.js"></script>
<style>
.icon-diqiu{
font-size: 0.35rem;
}
</style>
</head>
<body>
<div class="container">
<!--头部-->
<div class="head">
<img src="">
<img src="images/index.png">
</div>
<!--菜单-->
<div class="menu">
<div class="menu_top">
<!--关于展会-->
<div class="menu_item">
<div class="menu_item item_1">
<div class="menu_item_top">
<img src="">
</div>
... ... @@ -28,81 +33,82 @@
关于展会
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--展品范围-->
<div class="menu_item item_2">
<div class="menu_item_top">
<img src="">
<img src="#">
</div>
<div class="menu_item_bottom">
关于展会
展品范围
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--展览活动-->
<div class="menu_item item_3">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
展览活动
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<div class="menu_item item_4">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
参展申请
</div>
</div>
</div>
<div class="menu_bottom">
<!--关于展会-->
<div class="menu_item">
<!--新闻报道-->
<div class="menu_item item_5">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
新闻报道
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--论坛活动-->
<div class="menu_item item_6">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
论坛活动
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--商旅服务-->
<div class="menu_item item_7">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
商旅服务
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--参观登记-->
<div class="menu_item item_8">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
参观登记
</div>
</div>
</div>
</div>
<!--中部图片-->
<div class="middle">
<img src="">
<img src="images/index_2.png">
<div class="middle_text">2019汽车产业装备与智能制造峰会>></div>
</div>
<!--最新咨询-->
<!--最新资讯-->
<div class="new">
<div class="iconfont icon-diqiu"></div>
<div class="new_text">最新咨询</div>
<div class="new_text">最新资讯</div>
</div>
<!--下划线-->
<div class="new_underline"></div>
... ... @@ -133,7 +139,7 @@
<!--底部菜单-->
<div class="bottom_menu">
<div class="bottom_menu_index">
<div class="bottom_menu_index index">
<!--上图标-->
<div class="iconfont icon-zhuye2"></div>
<!--下文字-->
... ... @@ -141,7 +147,7 @@
首页
</div>
</div>
<div class="bottom_menu_index">
<div class="bottom_menu_index tel">
<!--上图标-->
<div class="iconfont icon-dianhua-copy"></div>
<!--下文字-->
... ... @@ -149,7 +155,7 @@
电话咨询
</div>
</div>
<div class="bottom_menu_index">
<div class="bottom_menu_index exhibition">
<!--上图标-->
<div class="iconfont icon-user-address"></div>
<!--下文字-->
... ... @@ -157,7 +163,7 @@
网上展厅
</div>
</div>
<div class="bottom_menu_index">
<div class="bottom_menu_index personal">
<!--上图标-->
<div class="iconfont icon-gerenzhongxin"></div>
<!--下文字-->
... ... @@ -170,4 +176,45 @@
</body>
<script src="js/jquery.min.js"></script>
<script>
//底部四个按钮
$('.index').click(function () {
window.location.href = "index.html"
})
$('.tel').click(function () {
window.location.href = "index.html"
})
$('.exhibition').click(function () {
window.location.href = "wszt.html"
})
$('.personal').click(function () {
window.location.href = "index.html"
})
//中部八个按钮
$('.item_1').click(function () {
window.location.href = "gyzh.html"
})
$('.item_2').click(function () {
window.location.href = "zpfw.html"
})
$('.item_3').click(function () {
window.location.href = "dlhd.html"
})
$('.item_4').click(function () {
window.location.href = "czsq.html"
})
$('.item_5').click(function () {
window.location.href = "xwbd.html"
})
$('.item_6').click(function () {
window.location.href = "lthd.html"
})
$('.item_7').click(function () {
window.location.href = "slfw_2.html"
})
$('.item_8').click(function () {
window.location.href = "cgdj.html"
})
</script>
</html>
... ...
/* 一个简单的分页，每次点击重渲染
******by wuati*****
*/
(function ($) {
//默认参数 (放在插件外面，避免每次调用插件都调用一次，节省内存)
var defaults = {
//id : '#paging',//id
leng: 3,//总页数
activeClass: 'page-active' ,//active类
firstPage: '首页',//
lastPage: '末页',
prv: '«',
next: '»',
clickBack:function(){
}
};
var opts,myOptions;
//扩展
$.fn.extend({
//插件名称
page: function (options) {
//覆盖默认参数
myOptions = options
opts = $.extend(defaults, options);
console.log(opts,998,this)
//主函数
return this.each(function () {
//激活事件
var obj = $(this);
var str1 = '';
var str = '';
var l = opts.leng;
if (l > 1&&l < 10) {
str1 = '<li><a href="javascript:" class="'+ opts.activeClass +'">1</a></li>';
for (i = 2; i < l + 1; i++) {
str += '<li><a href="javascript:">' + i + '</a></li>';
}
}else if(l > 9){
str1 = '<li><a href="javascript:" class="'+ opts.activeClass +'">1</a></li>';
for (i = 2; i < 10; i++) {
str += '<li><a href="javascript:">' + i + '</a></li>';
}
//str += '<li><a href="javascript:">...</a></li>'
} else {
str1 = '<li><a href="javascript:" class="'+ opts.activeClass +'">1</a></li>';
}
// obj.html('<div class="next" style="float:right">' + opts.next + '</div><div class="last" style="float:right">' + opts.lastPage + '</div><ul class="pagingUl">' + str1 + str + '</ul><div class="first" style="float:right">' + opts.firstPage + '</div><div class="prv" style="float:right">' + opts.prv + '</div>');
obj.html('<div class="first" style="float:right">' + opts.firstPage + '</div><div class="prv" style="float:right">' + opts.prv + '</div><ul class="pagingUl">' + str1 + str + '</ul><div class="next" style="float:right">' + opts.next + '</div><div class="last" style="float:right">' + opts.lastPage + '</div>');
obj.on('click', '.next', function () {
var pageshow = parseInt($('.' + opts.activeClass).html());
if(pageshow==l){
return false;
}
if(pageshow == l) {
}else if(pageshow > l-5&&pageshow < l){
$('.' + opts.activeClass).removeClass(opts.activeClass).parent().next().find('a').addClass(opts.activeClass);
}else if(pageshow > 0&&pageshow < 6){
$('.' + opts.activeClass).removeClass(opts.activeClass).parent().next().find('a').addClass(opts.activeClass);
}else {
$('.' + opts.activeClass).removeClass(opts.activeClass).parent().next().find('a').addClass(opts.activeClass);
fpageShow();
}
opts.clickBack(pageshow+1)
});
obj.on('click', '.prv', function () {
var pageshow = parseInt($('.' + opts.activeClass).html());
if (pageshow == 1) {
return false;
}else if(pageshow > l-5&&pageshow < l+1){
$('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
//this.fpageBranch(pageshow-1);
}else if(pageshow > 1&&pageshow < 6){
$('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
//this.fpageBranch(pageshow-1);
}else {
$('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
//this.fpageBranch(pageshow-1);
fpageShow();
}
opts.clickBack(pageshow-1)
});
obj.on('click', '.first', function(){
var pageshow = 1;
var nowshow = parseInt($('.' + opts.activeClass).html());
if(nowshow==1){
return false;
}
$('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
fpagePrv(0);
opts.clickBack(pageshow)
})
obj.on('click', '.last', function(){
var pageshow = l;
var nowshow = parseInt($('.' + opts.activeClass).html());
if(nowshow==l){
return false;
}
if(l>9){
$('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
fpageNext(8);
}else{
$('.' + opts.activeClass).removeClass(opts.activeClass).parent().prev().find('a').addClass(opts.activeClass);
fpageNext(l-1);
}
opts.clickBack(pageshow)
})
obj.on('click', 'li', function(){
var $this = $(this);
var pageshow = parseInt($this.find('a').html());
var nowshow = parseInt($('.' + opts.activeClass).html());
console.log(l,256)
if(pageshow==nowshow){
return false;
}
if(l>9){
console.log(1234567,pageshow,l)
if(pageshow > l-5&&pageshow < l+1){
$('.' + opts.activeClass).removeClass(opts.activeClass);
$this.find('a').addClass(opts.activeClass);
fpageNext(8-(l-pageshow));
}else if(pageshow > 0&&pageshow < 5){
$('.' + opts.activeClass).removeClass(opts.activeClass);
$this.find('a').addClass(opts.activeClass);
fpagePrv(pageshow-1);
}else{
$('.' + opts.activeClass).removeClass(opts.activeClass);
$this.find('a').addClass(opts.activeClass);
fpageShow();
}
}else{
console.log(123456)
$('.' + opts.activeClass).removeClass(opts.activeClass);
$this.find('a').addClass(opts.activeClass);
}
opts.clickBack(pageshow)
})
function fpageShow(){
var pageshow = parseInt($('.' + opts.activeClass).html());
var pageStart = pageshow - 4;
var pageEnd = pageshow + 5;
var str1 = '';
for(i=0;i<9;i++){
str1 += '<li><a href="javascript:" class="">' + (pageStart+i) + '</a></li>'
}
obj.find('ul').html(str1);
obj.find('ul li').eq(4).find('a').addClass(opts.activeClass);
}
function fpagePrv(prv){
var str1 = '';
if(l>8){
for(i=0;i<9;i++){
str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>'
}
}else{
for(i=0;i<l;i++){
str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>'
}
}
obj.find('ul').html(str1);
obj.find('ul li').eq(prv).find('a').addClass(opts.activeClass);
}
function fpageNext(next){
var str1 = '';
if(l>8){
for(i=l-8;i<l+1;i++){
str1 += '<li><a href="javascript:" class="">' + i + '</a></li>'
}
obj.find('ul').html(str1);
obj.find('ul li').eq(next).find('a').addClass(opts.activeClass);
}else{
for(i=0;i<l;i++){
str1 += '<li><a href="javascript:" class="">' + (i+1) + '</a></li>'
}
obj.find('ul').html(str1);
obj.find('ul li').eq(next).find('a').addClass(opts.activeClass);
}
}
});
},
setLength: function(newLength){
myOptions.leng = newLength
$(this).html('')
$(this).unbind()
$(this).page(myOptions)
}
})
})(jQuery);
... ...
此 diff 太大无法显示。
... ... @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_hkazqqzd2pg.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_ucda0dtgz1.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<script src="js/base.js"></script>
... ... @@ -20,6 +20,13 @@
font-size: 0.5rem;
color: #B3B3B3;
}
.icon-yanzhengma{
font-size: 0.5rem;
color: #B3B3B3;
}
.margin_item{
margin-top: 0.35rem;
}
</style>
</head>
... ... @@ -43,8 +50,9 @@
</div>
</div>
<!--输入框-->
<div class="bottom">
<!--登录输入框-->
<div class="bottom" style="display: none">
<div class="bottom_item">
<div class="iconfont icon-Fill"></div>
<input type="text" placeholder="请输入手机号">
... ... @@ -53,8 +61,62 @@
<div class="iconfont icon-mima"></div>
<input type="text" placeholder="请输入密码">
</div>
<!--登录框-->
<div class="bottom_sub">
立即登录
</div>
<!--记住密码 立即注册-->
<div class="bottom_t">
<div class="bottom_t_item">
<input type="checkbox"> <span>记住密码</span>
</div>
<div class="bottom_t_item">
<div>忘记密码？立即注册</div>
</div>
</div>
</div>
<!--注册输入框-->
<div class="bottom" style="display: flex">
<div class="bottom_item ">
<div class="iconfont icon-Fill"></div>
<input type="text" placeholder="请输入手机号">
</div>
<!--输入验证码-->
<div class="bottom_small margin_item">
<!--验证码输入框-->
<div class="bottom_small_left">
<div class="iconfont icon-yanzhengma"></div>
<input type="text" placeholder="输入验证码">
</div>
<!--获取验证码框-->
<div class="bottom_small_right">
获取验证码
</div>
</div>
<div class="bottom_item margin_item">
<div class="iconfont icon-mima"></div>
<input type="text" placeholder="请输入密码">
</div>
<!--登录框-->
<div class="bottom_sub margin_item">
立即注册
</div>
<!--记住密码 立即注册-->
<div class="bottom_text">
已有账号，立即登录
</div>
</div>
</div>
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>论坛活动</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css">
<link rel="stylesheet" type="text/css" href="css/xwbd.css">
<link rel="stylesheet" type="text/css" href="css/dropload.css">
<script src="js/base.js"></script>
<style>
.icon-zuo{
color: #959595;
font-size: 0.38rem;
}
.icon-iconfont-edu12{
color: #959595;
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<!--头部信息-->
<div class="head">
<!--左图标-->
<div class="iconfont icon-zuo">
</div>
<!--论坛活动-->
<div class="head_new">
论坛活动
</div>
<!--右菜单-->
<div class="iconfont icon-iconfont-edu12">
</div>
</div>
<!--条目信息-->
<div class="items">
<div class="items_box">
<div class="item">
<!--左边-->
<div class="item_left">
<img src="images/10.png">
</div>
<!--中部-->
<div class="item_mid">
<p class="item_mid_big">
智能时代"云"发展"新模式"驻
占天津
</p>
<p class="item_mid_small">
前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
</p>
</div>
<!--右边-->
<div class="item_right ">
<p>12月</p>
<p>25日</p>
<p>星期二</p>
</div>
</div>
<div class="item">
<!--左边-->
<div class="item_left">
<img src="images/10.png">
</div>
<!--中部-->
<div class="item_mid">
<p class="item_mid_big">
智能时代"云"发展"新模式"驻
占天津
</p>
<p class="item_mid_small">
前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
</p>
</div>
<!--右边-->
<div class="item_right color_gray">
<p>12月</p>
<p>25日</p>
<p>星期二</p>
</div>
</div>
</div>
</div>
<!--底部菜单-->
<div class="bottom_menu">
<div class="bottom_menu_index">
<!--上图标-->
<div class="iconfont icon-zhuye2"></div>
<!--下文字-->
<div class="bottom_menu_index_text">
首页
</div>
</div>
<div class="bottom_menu_index">
<!--上图标-->
<div class="iconfont icon-dianhua-copy"></div>
<!--下文字-->
<div class="bottom_menu_index_text">
电话咨询
</div>
</div>
<div class="bottom_menu_index">
<!--上图标-->
<div class="iconfont icon-user-address"></div>
<!--下文字-->
<div class="bottom_menu_index_text">
网上展厅
</div>
</div>
<div class="bottom_menu_index">
<!--上图标-->
<div class="iconfont icon-gerenzhongxin"></div>
<!--下文字-->
<div class="bottom_menu_index_text">
个人中心
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/dropload.min.js"></script>
<script>
$('.item').click(function () {
window.location.href = "nrxq.html";
})
//菜单功能
$(document).ready(function () {
// 页数
var page = 1;
// 每次循环展示10个
var size = 10;
$('.items').dropload({
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
},
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
var s = "";
var show="";
var list_compressor="";
var list_answer="";
$.ajax({
type: 'GET',
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
dataType: 'json',
success: function(data){
console.log(data);
var arrLen = data.length;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result +='<div class="item">\n' +
' <!--左边-->\n' +
' <div class="item_left">\n' +
' <img src="images/10.png">\n' +
' </div>\n' +
' <!--中部-->\n' +
' <div class="item_mid">\n' +
' <p class="item_mid_big">\n' +
'\n' +
' 智能时代"云"发展"新模式"驻\n' +
' 占天津\n' +
'\n' +
' </p>\n' +
' <p class="item_mid_small">\n' +
' 前几日，百度云在上海召开了主题为“Inception引领智能变革”的2018 ......\n' +
' </p>\n' +
' </div>\n' +
' <!--右边-->\n' +
' <div class="item_right color_gray">\n' +
'\n' +
' <p>12月</p>\n' +
' <p>25日</p>\n' +
' <p>星期二</p>\n' +
' </div>\n' +
' </div>'
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.items_box').append(result);
// 每次数据插入，必须重置
me.resetload();
},500);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
},
threshold : 50
});
})
</script>
</html>
... ...
... ... @@ -35,7 +35,7 @@
内容详情
</div>
<!--右菜单-->
<div class="iconfont icon-iconfont-edu12">
<div >
</div>
... ...
... ... @@ -64,7 +64,7 @@
<div class="menu">
<div class="menu_top">
<!--关于展会-->
<div class="menu_item">
<div class="menu_item item_1">
<div class="menu_item_top">
<img src="">
</div>
... ... @@ -72,76 +72,78 @@
关于展会
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--展品范围-->
<div class="menu_item item_2">
<div class="menu_item_top">
<img src="">
<img src="#">
</div>
<div class="menu_item_bottom">
关于展会
展品范围
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--展览活动-->
<div class="menu_item item_3">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
展览活动
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<div class="menu_item item_4">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
参展申请
</div>
</div>
</div>
<div class="menu_bottom">
<!--关于展会-->
<div class="menu_item">
<!--新闻报道-->
<div class="menu_item item_5">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
新闻报道
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--论坛活动-->
<div class="menu_item item_6">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
论坛活动
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--商旅服务-->
<div class="menu_item item_7">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
商旅服务
</div>
</div>
<!--关于展会-->
<div class="menu_item">
<!--参观登记-->
<div class="menu_item item_8">
<div class="menu_item_top">
<img src="">
</div>
<div class="menu_item_bottom">
关于展会
参观登记
</div>
</div>
</div>
</div>
<!--中部图片-->
<div class="middle">
<img src="">
<img src="images/index_2.png">
<div class="middle_text">2019汽车产业装备与智能制造峰会>></div>
</div>
<!--最新咨询-->
<div class="new">
... ... @@ -211,7 +213,46 @@
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
//底部四个按钮
$('.index').click(function () {
window.location.href = "index.html"
})
$('.tel').click(function () {
window.location.href = "index.html"
})
$('.exhibition').click(function () {
window.location.href = "wszt.html"
})
$('.personal').click(function () {
window.location.href = "index.html"
})
//中部八个按钮
$('.item_1').click(function () {
window.location.href = "gyzh.html"
})
$('.item_2').click(function () {
window.location.href = "zpfw.html"
})
$('.item_3').click(function () {
window.location.href = "dlhd.html"
})
$('.item_4').click(function () {
window.location.href = "czsq.html"
})
$('.item_5').click(function () {
window.location.href = "xwbd.html"
})
$('.item_6').click(function () {
window.location.href = "lthd.html"
})
$('.item_7').click(function () {
window.location.href = "slfw_2.html"
})
$('.item_8').click(function () {
window.location.href = "cgdj.html"
})
</script>
</body>
</html>
... ...
... ... @@ -10,7 +10,7 @@
<link rel="stylesheet" type="text/css" href="css/xwbd.css">
<link rel="stylesheet" type="text/css" href="css/dropload.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<style>
.icon-zuo{
color: #959595;
... ... @@ -137,9 +137,13 @@
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/dropload.min.js"></script>
<script>
$('.item').click(function () {
window.location.href = "nrxq.html";
})
//菜单功能
$(document).ready(function () {
... ...
... ... @@ -6,14 +6,40 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_jxegrvbhrr.css">
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_wamnx6np1vc.css">
<link rel="stylesheet" type="text/css" href="css/zpfw.css">
<script src="js/base.js"></script>
<style>
.icon-zuo{
color: #959595;
font-size: 0.38rem;
}
.icon-iconfont-edu12{
color: #959595;
font-size: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<!--头部图片-->
<!--头部信息-->
<div class="head">
<!--左图标-->
<div class="iconfont icon-zuo">
</div>
<!--展品范围-->
<div class="head_new">
展品范围
</div>
<!--右菜单-->
<div>
</div>
</div>
<!--头部图片-->
<div class="head_pic">
<img src="images/555.png">
</div>
<!--中部内容-->
... ...
... ... @@ -10,6 +10,7 @@
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_2is4wniwevg.css">
<link rel="stylesheet" type="text/css" href="css/zsml.css">
<link rel="stylesheet" type="text/css" href="css/dropload.css">
<link rel="stylesheet" type="text/css" href="css/page.css">
<script src="js/base.js"></script>
<script src="js/jquery.min.js"></script>
<style>
... ... @@ -25,7 +26,41 @@
color: #ffffff;
}
.items_box{
margin-bottom: 1rem;
margin-bottom: 0.4rem;
}
.pageTest{
width: 4.5rem;
height: 0.5rem;
display: flex;
}
.activP{
background-color: #367fa9!important;
color: #fff!important;
}
.prv,.next{
width: 0.8rem;
font-size: 0.16rem;
border: none;
}
.last,.first{
width: 0.5rem;
border: none;
}
.pagingUl li{
width: 0.5rem;
height: 0.5rem;
display: flex;
}
.pagingUl li a{
border: none;
background-color: transparent;
}
.prv{
margin-left: 0.2rem;
}
.last{
margin-left: 0.2rem;
}
</style>
</head>
... ... @@ -74,8 +109,147 @@
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
<div class="item">
<!--头部图片-->
<div class="item_top">
<img src="images/12.png">
</div>
<!--下划线-->
<div class="item_underline"></div>
<!--底部公司-->
<div class="item_bottom">
北京惟鑫航达科技有限公司
</div>
</div>
</div>
</div>
<!--分页功能-->
<div class="func_page">
<div class="pageTest">
<!--<div class="first"></div>-->
</div>
</div>
... ... @@ -121,95 +295,108 @@
</body>
<script src="js/dropload.min.js"></script>
<script src="js/page.js"></script>
<script>
//分页功能
$('.pageTest').page({
leng: 3,//分页总数
activeClass: 'activP' , //active 类样式定义
firstPage: '首页',//
lastPage: '末页',
prv: '上一页',
next: '下一页',
//下拉加载功能
$(document).ready(function () {
// 页数
var page = 2;
// 每次循环展示10个
var size = 1;
$('.items_box').dropload({
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
},
loadDownFn : function(me){
page++;
// 拼接HTML
var result = '';
var s = "";
var show="";
var list_compressor="";
var list_answer="";
$.ajax({
type: 'GET',
url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
dataType: 'json',
success: function(data){
console.log(data);
var arrLen = data.length;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result +='<div class="item">\n' +
' <!--头部图片-->\n' +
' <div class="item_top">\n' +
' <img src="images/12.png">\n' +
' </div>\n' +
' <!--下划线-->\n' +
' <div class="item_underline"></div>\n' +
' <!--底部公司-->\n' +
' <div class="item_bottom">\n' +
' 北京惟鑫航达科技有限公司\n' +
' </div>\n' +
' </div>'
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
clickBack:function(page){
console.log(page)
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.items').append(result);
// 每次数据插入，必须重置
me.resetload();
},500);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
},
threshold : 50
});
})
//下拉加载功能
// $(document).ready(function () {
//
//
// // 页数
// var page = 2;
// // 每次循环展示10个
// var size = 1;
// $('.items_box').dropload({
// scrollArea : window,
// domUp : {
// domClass : 'dropload-up',
// domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
// domUpdate : '<div class="dropload-update">↑释放更新</div>',
// domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
// },
// domDown : {
// domClass : 'dropload-down',
// domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
// domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
// domNoData : '<div class="dropload-noData">暂无数据</div>'
// },
// loadDownFn : function(me){
// page++;
// // 拼接HTML
// var result = '';
// var s = "";
// var show="";
// var list_compressor="";
// var list_answer="";
// $.ajax({
// type: 'GET',
// url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
// dataType: 'json',
// success: function(data){
// console.log(data);
// var arrLen = data.length;
// if(arrLen > 0){
// for(var i=0; i<arrLen; i++){
// result +='<div class="item">\n' +
// ' <!--头部图片-->\n' +
// ' <div class="item_top">\n' +
// ' <img src="images/12.png">\n' +
// ' </div>\n' +
// ' <!--下划线-->\n' +
// ' <div class="item_underline"></div>\n' +
// ' <!--底部公司-->\n' +
// ' <div class="item_bottom">\n' +
// ' 北京惟鑫航达科技有限公司\n' +
// ' </div>\n' +
// ' </div>'
//
//
//
//
// }
//
// // 如果没有数据
// }else{
// // 锁定
// me.lock();
// // 无数据
// me.noData();
// }
// // 为了测试，延迟1秒加载
// setTimeout(function(){
// // 插入数据到页面，放到最后面
// $('.items').append(result);
// // 每次数据插入，必须重置
// me.resetload();
// },500);
// },
// error: function(xhr, type){
// alert('Ajax error!');
// // 即使加载出错，也得重置
// me.resetload();
// }
// });
// },
// threshold : 50
// });
//
// })
</script>
</html>
... ...