Skip to content

html / bdideal

Go to a project
Commit 959f93f8 by hank
Options

bug

parent 095584bc
Showing with 265 additions and 115 deletions
html/products.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
......@@ -11,15 +12,9 @@
<link rel="icon" href="/img/favicon.ico" />
<!-- Bootstrap -->
<link rel="stylesheet" href="../style/common.css" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.css" /> -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" />
<link rel="stylesheet" href="../style/animate.min.css" />
......@@ -34,9 +29,9 @@
<script src="https://cdn.bootcss.com/less.js/1.0.41/less-1.0.41.min.js"></script> -->
<script src="../js/swiper.animate1.0.3.min.js"></script>
<script src="../js/tools.js"></script>
</head>
</head>
<body>
<body>
<div class="main-container">
<div class="navbar-container">
<div class="navbar navbar-inverse ">
......@@ -44,20 +39,13 @@
<nav role="navigation">
<div class="container">
<div class="nav navbar-header">
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse"
aria-label="Expand and Collapse Menu"
>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"
aria-label="Expand and Collapse Menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"
><img src="../img/LOGOsmall2.png" alt=""
/></a>
<a class="navbar-brand" href="index.html"><img src="../img/LOGOsmall2.png" alt="" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
......@@ -81,34 +69,21 @@
</nav>
</div>
</div>
<div
id="banner"
class=""
style="height: 552px;
<div id="banner" class="" style="height: 552px;
visibility: visible;
animation-delay: 0.3s;
animation-duration: 0.3s;"
>
animation-duration: 0.3s;">
<div class="container relative">
<div class="word-box">
<p class="line1"></p>
<p
class="btworden animated bounceInRight"
style="animation-delay: 1s;"
>
<p class="btworden animated bounceInRight" style="animation-delay: 1s;">
顶尖的数据分析能力
</p>
<p
class="btword animated bounceInRight "
style="animation-delay: 0.7s;"
>
<p class="btword animated bounceInRight " style="animation-delay: 0.7s;">
智慧城市可视化管控平台
</p>
<p
class="conword animated bounceInRight"
style="animation-delay: 02s;"
>
<p class="conword animated bounceInRight" style="animation-delay: 02s;">
<li>
· 基于 SAAS 互联网平台化服务，持续升级，无需下载安装。 ·
完美兼容大屏、TV、PC、PAD、手机各类终端，随时使用。
......@@ -151,7 +126,7 @@
</div>
</div>
<div class="earth">
<img class="earth-bg" src="../img/earth2.png" alt="" />
<img class="earth-bg" src="../img/earth1.png" alt="" />
<!-- animated rotateIn infinite -->
<img src="../img/earthselect.png" class="select " alt="" />
<div class="ctr-container">
......@@ -175,12 +150,13 @@
</div>
<div class="list">
<div class="text-right ctr">
<span class="spanbtn" id="slidePrev"> < </span>
<span class="spanbtn" id="slideNext"> > </span>
<span class="spanbtn" id="slidePrev">
< </span> <span class="spanbtn" id="slideNext"> >
</span>
</div>
<div id="dashuju" class="list-item">
<div class="swiper-container swiper1" id="swiper1">
<div class="swiper-wrapper">
<div class="swiper-wrapper" style="width: 2000px;">
<!-- <div class="swiper-slide" data-swiper-column="0" data-swiper-row="0">
<div class="item">
......@@ -355,10 +331,7 @@
</div>
</div>
</div>
<div
id="footer"
style="background: rgb(46, 46, 46); font-size: 16px; color: #fff;"
>
<div id="footer" style="background: rgb(46, 46, 46); font-size: 16px; color: #fff;">
<div class="container">
<div class="row footer-content">
<div class="col-xs-12 col-sm-12 col-md-4">
......@@ -393,15 +366,12 @@
</div>
</div>
</div>
<div
class="copyright text-center"
style="height: 50px;
<div class="copyright text-center" style="height: 50px;
line-height: 50px;
text-align: center;
font-size: 12px;
color: #fff;
background: #212121;"
>
background: #212121;">
@2018 all copyrights reserved by bdideal.com
</div>
</div>
......@@ -411,21 +381,128 @@
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<!--[if lte IE 9]>
<script src="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.css">
<![endif]-->
<script src="../js/banner.js"></script>
<script src="../js/tools.js"></script>
<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js
"></script>
</body>
<script>
$(document).ready(function() {
</body>
<script>
$(document).ready(function () {
$('.earth .left-btn').mouseenter(function () {
$('.earth .earth-bg').attr('src', '../img/earth1.png');
$('.earth .select').css({
'-ms-transform-origin': '53% 50%',
'-webkit-transform-origin': '53% 50%',
'transform-origin': '53% 50%',
'transform': 'rotate(0deg)',
'-ms-transform': 'rotate(0deg)'
});
});
$('.earth .right-btn').mouseenter(function () {
$('.earth .earth-bg').attr('src', '../img/earth2.png');
$('.earth .select').css({
'transform': 'rotate(180deg)',
'-ms-transform': 'rotate(180deg)'
});
});
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
function createSlider(swiper, data) {
var html = '';
swiper.removeAllSlides(); //移除全部
data.forEach(function (item) {
var html = '';
html =
'<div class="item"> ' +
'<a href="./productDetail.html?id=' + item.id + '"> ' +
'<div class="img-container">' +
'<img src="' +
item.imagesUrl +
'" alt="">' +
'</div>' +
'<div class="item-title"> ' +
item.proName +
'</div>' +
'<ul class="tag-list">' +
(function (a) {
var li = '';
a.forEach(function (ele) {
li += '<li>' + ele + '</li>';
});
return li;
})(item.tags) +
'</ul>' +
'</a></div>';
swiper.appendSlide(html, 'swiper-slide', 'div');
});
function tab(container) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
update();
mySwiper.slideTo(0, 1000, false);
mySwiper.swipeTo(0, 1000, false);
});
}
tab();
}
window.mySwiper = new Swiper('#swiper1', {
slidesPerView: 'auto',
slidesPerColumn: 2,
cssWidthAndHeight: true,
onTransitionEnd: function (swiper) {
// alert('过渡结束');
// console.log(swiper)
computeMasking(swiper);
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
// loop: true, // 循环模式选项
// autoplay: 1500,
// paginationClickable: true,
// // 如果需要分页器
// pagination: '.swiper-pagination'
});
createSlider(mySwiper, ideal.produtsList);
$('#swiper1 .swiper-wrapper')
$('#slidePrev').click(function () {
mySwiper.swipePrev();
});
$('#slideNext').click(function () {
mySwiper.swipeNext();
});
function tab(container) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
mySwiper.swipeTo(0, 1000, false);
});
}
tab();
} else {
function createHtml(data) {
var html = '';
data.forEach(function (item) {
html +=
'<div class="swiper-slide">' +
'<div class="item"> ' +
'<a href="./productDetail.html?id='+ item.id+'"> ' +
'<a href="./productDetail.html?id=' + item.id + '"> ' +
'<div class="img-container">' +
'<img src="' +
item.imagesUrl +
......@@ -435,7 +512,7 @@
item.proName +
'</div>' +
'<ul class="tag-list">' +
(function(a) {
(function (a) {
var li = '';
a.forEach(function (ele) {
li += '<li>' + ele + '</li>';
......@@ -447,12 +524,13 @@
});
return html;
}
// Swiper.modules = Swiper.modules || {};
window.mySwiper = new Swiper('#swiper1', {
modules: {},
slidesPerView: 'auto',
slidesPerColumn: 2,
onTransitionEnd: function(swiper) {
onTransitionEnd: function (swiper) {
// alert('过渡结束');
// console.log(swiper)
computeMasking(swiper);
......@@ -465,27 +543,28 @@
// // 如果需要分页器
// pagination: '.swiper-pagination'
});
update();
function update(html) {
$('#swiper1')
.children()
.html(html ? html : createHtml(ideal.produtsList));
mySwiper.update(true);
}
update();
$('#slidePrev').click(function() {
mySwiper.slidePrev( function(e) {
$('#slidePrev').click(function () {
mySwiper.slidePrev(function (e) {
console.log(e);
alert('slidePrev');
},200);
}, 200);
});
$('#slideNext').click(function() {
mySwiper.slideNext(function(e) {
$('#slideNext').click(function () {
mySwiper.slideNext(function (e) {
console.log(e);
alert('slideNext');
},200);
}, 200);
});
function tab(container) {
$('.menu-item').click(function(e) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
......@@ -497,21 +576,7 @@
});
}
tab();
$('.earth .left-btn').mousemove(function() {
$('.earth .earth-bg').attr('src', '../img/earth1.png');
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(0deg)'
});
});
$('.earth .right-btn').mousemove(function() {
$('.earth .earth-bg').attr('src', '../img/earth2.png');
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(180deg)'
});
});
function computeMasking(swiper) {
var getTranslate = swiper.getWrapperTranslate();
var totalWidth = $('.swiper-wrapper').width();
......@@ -531,7 +596,10 @@
}
}
computeMasking(mySwiper);
}
});
</script>
</script>
</script>
</html>
\ No newline at end of file
html/solution.html
......@@ -13,10 +13,7 @@
<!-- Bootstrap -->
<link rel="stylesheet" href="../style/common.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" />
<link rel="stylesheet" href="../style/animate.min.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
......@@ -51,8 +48,8 @@
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a id="nav-index" href="./index.html">首页</a></li>
<li ><a id="nav-about" href="./about.html">关于我们</a></li>
<li >
<li><a id="nav-about" href="./about.html">关于我们</a></li>
<li>
<a id="nav-products" href="./products.html">我们的产品</a>
</li>
<li class="link-active">
......@@ -102,8 +99,9 @@
</div>
<div class="list">
<div class="text-right ctr">
<span class="spanbtn" id="slidePrev"> < </span>
<span class="spanbtn" id="slideNext"> > </span>
<span class="spanbtn" id="slidePrev">
< </span> <span class="spanbtn" id="slideNext"> >
</span>
</div>
<div id="dashuju" class="list-item">
<div class="swiper-container swiper1" id="swiper1">
......@@ -335,16 +333,104 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="../js/masonry-docs.min.js"></script>
<script src="../js/banner.js"></script>
<!--[if lte IE 9]>
<script src="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.css">
<![endif]-->
</body>
<script>
$(document).ready(function() {
$(document).ready(function () {
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
function createSlider(swiper, data) {
var html = '';
swiper.removeAllSlides(); //移除全部
data.forEach(function (item) {
var html = '';
html =
'<div class="item"> ' +
'<a href="./productDetail.html?id=' + item.id + '"> ' +
'<div class="img-container">' +
'<img src="' +
item.imagesUrl +
'" alt="">' +
'</div>' +
'<div class="item-title"> ' +
item.proName +
'</div>' +
'<ul class="tag-list">' +
(function (a) {
var li = '';
a.forEach(function (ele) {
li += '<li>' + ele + '</li>';
});
return li;
})(item.tags) +
'</ul>' +
'</a></div>';
swiper.appendSlide(html, 'swiper-slide', 'div');
});
function tab(container) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
update();
mySwiper.slideTo(0, 1000, false);
mySwiper.swipeTo(0, 1000, false);
});
}
tab();
}
window.mySwiper = new Swiper('#swiper1', {
slidesPerView: 'auto',
slidesPerColumn: 2,
cssWidthAndHeight: true,
onTransitionEnd: function (swiper) {
// alert('过渡结束');
// console.log(swiper)
computeMasking(swiper);
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
// loop: true, // 循环模式选项
// autoplay: 1500,
// paginationClickable: true,
// // 如果需要分页器
// pagination: '.swiper-pagination'
});
createSlider(mySwiper, ideal.produtsList);
$('#swiper1 .swiper-wrapper')
$('#slidePrev').click(function () {
mySwiper.swipePrev();
});
$('#slideNext').click(function () {
mySwiper.swipeNext();
});
function tab(container) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
.removeClass('active');
$(this).addClass('active');
var index = $(this).index();
mySwiper.swipeTo(0, 1000, false);
});
}
tab();
} else {
function createHtml(data) {
var html = '';
data.forEach(function (item) {
html +=
'<div class="swiper-slide">' +
'<div class="item"> ' +
'<a href="./productDetail.html?id='+ item.id+'"> ' +
'<a href="./productDetail.html?id=' + item.id + '"> ' +
'<div class="img-container">' +
'<img src="' +
item.imagesUrl +
......@@ -354,7 +440,7 @@
item.proName +
'</div>' +
'<ul class="tag-list">' +
(function(a) {
(function (a) {
var li = '';
a.forEach(function (ele) {
li += '<li>' + ele + '</li>';
......@@ -366,12 +452,13 @@
});
return html;
}
// Swiper.modules = Swiper.modules || {};
window.mySwiper = new Swiper('#swiper1', {
modules: {},
slidesPerView: 'auto',
slidesPerColumn: 2,
onTransitionEnd: function(swiper) {
onTransitionEnd: function (swiper) {
// alert('过渡结束');
// console.log(swiper)
computeMasking(swiper);
......@@ -384,27 +471,28 @@
// // 如果需要分页器
// pagination: '.swiper-pagination'
});
update();
function update(html) {
$('#swiper1')
.children()
.html(html ? html : createHtml(ideal.produtsList));
mySwiper.update(true);
}
update();
$('#slidePrev').click(function() {
mySwiper.slidePrev( function(e) {
$('#slidePrev').click(function () {
mySwiper.slidePrev(function (e) {
console.log(e);
alert('slidePrev');
},200);
}, 200);
});
$('#slideNext').click(function() {
mySwiper.slideNext(function(e) {
$('#slideNext').click(function () {
mySwiper.slideNext(function (e) {
console.log(e);
alert('slideNext');
},200);
}, 200);
});
function tab(container) {
$('.menu-item').click(function(e) {
$('.menu-item').click(function (e) {
$(this)
.parent()
.children()
......@@ -416,21 +504,7 @@
});
}
tab();
$('.earth .left-btn').mousemove(function() {
$('.earth .earth-bg').attr('src', '../img/earth1.png');
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(0deg)'
});
});
$('.earth .right-btn').mousemove(function() {
$('.earth .earth-bg').attr('src', '../img/earth2.png');
$('.earth .select').css({
'transform-origin': '53% 50%',
transform: 'rotate(180deg)'
});
});
function computeMasking(swiper) {
var getTranslate = swiper.getWrapperTranslate();
var totalWidth = $('.swiper-wrapper').width();
......@@ -450,6 +524,7 @@
}
}
computeMasking(mySwiper);
}
});
</script>
......
style/solution.css
......@@ -75,12 +75,15 @@ ul {
}
.bg-10 {
background: #E4E5E8 url('/img/bg10.png') top center no-repeat !important;
background-size: cover !important;
}
.bg-11 {
background: #E4E5E8 url('/img/bg11.png') top center no-repeat !important;
background-size: cover !important;
}
.bg-12 {
background: #E4E5E8 url('/img/bg12.png') top center no-repeat !important;
background-size: cover !important;
}
.main-container {
background: #E4E5E8 url('/img/bg5.png') top center no-repeat;
......
style/solution.less
......@@ -85,12 +85,15 @@ ul {
}
.bg-10 {
background: #E4E5E8 url('/img/bg10.png') top center no-repeat !important;
background-size: cover !important;
}
.bg-11 {
background: #E4E5E8 url('/img/bg11.png') top center no-repeat !important;
background-size: cover !important;
}
.bg-12 {
background: #E4E5E8 url('/img/bg12.png') top center no-repeat !important;
background-size: cover !important;
}
.main-container {
background: #E4E5E8 url('/img/bg5.png') top center no-repeat;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment