Skip to content

html / bdideal

Go to a project
Commit 959f93f8 by hank
Options

bug

parent 095584bc
Showing with 123 additions and 41 deletions
html/solution.html
......@@ -13,12 +13,9 @@
<!-- 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）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
......@@ -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) {
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,9 +440,9 @@
item.proName +
'</div>' +
'<ul class="tag-list">' +
(function(a) {
(function (a) {
var li = '';
a.forEach(function (ele) {
a.forEach(function (ele) {
li += '<li>' + ele + '</li>';
});
return li;
......@@ -366,15 +452,16 @@
});
return html;
}
// Swiper.modules = Swiper.modules || {};
window.mySwiper = new Swiper('#swiper1', {
modules: {},
slidesPerView: 'auto',
slidesPerColumn: 2,
onTransitionEnd: function(swiper) {
// alert('过渡结束');
// console.log(swiper)
computeMasking(swiper);
onTransitionEnd: function (swiper) {
// alert('过渡结束');
// console.log(swiper)
computeMasking(swiper);
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
......@@ -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,7 +524,8 @@
}
}
computeMasking(mySwiper);
});
}
});
</script>
</html>
\ No newline at end of file
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