Skip to content

html / bdideal

Go to a project
Commit 760dd947 by hank
Options

兼容ie10

parent c6045877
Showing with 39 additions and 53 deletions
html/dynamic.html
......@@ -332,7 +332,7 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 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/4.0.2/js/swiper.min.js"></script>
<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>
</body>
......@@ -340,7 +340,7 @@
$(document).ready(function() {
function createHtml(data) {
var html = '';
data.forEach(item => {
data.forEach(function (item) {
html +=
'<div class="swiper-slide">' +
'<div class="item"> ' +
......@@ -362,15 +362,14 @@
});
return html;
}
console.log(createHtml(ideal.dynamicList));
window.mySwiper = new Swiper('#swiper1', {
modules: {},
slidesPerView: 'auto',
slidesPerColumn: 2,
on: {
transitionEnd: function(swiper) {
onTransitionEnd: function(swiper) {
// alert('过渡结束');
computeMasking(this);
}
// console.log(swiper)
computeMasking(swiper);
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
......@@ -388,20 +387,16 @@
}
update();
$('#slidePrev').click(function() {
mySwiper.slidePrev(200, true, function(e) {
mySwiper.slidePrev( function(e) {
console.log(e);
alert('slidePrev');
});
},200);
});
$('#slideNext').click(function() {
mySwiper.slideNext(200, true, function(e) {
mySwiper.slideNext(function(e) {
console.log(e);
alert('slideNext');
});
});
mySwiper.$wrapperEl.transitionEnd(function(e) {
console.log(mySwiper.activeIndex);
// alert('swiper自带transitionEnd不会触发，这是自定义的');
},200);
});
function tab(container) {
$('.menu-item').click(function(e) {
......@@ -432,7 +427,7 @@
});
});
function computeMasking(swiper) {
var getTranslate = swiper.getTranslate();
var getTranslate = swiper.getWrapperTranslate();
var totalWidth = $('.swiper-wrapper').width();
var viewWidth = 860;
if (getTranslate / 400 <= 0) {
......
html/products.html
......@@ -410,20 +410,18 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/2.7.0/idangerous.swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script src="../js/partticles.js"></script>
</body>
<script>
$(document).ready(function() {
function createHtml(data) {
var html = '';
data.forEach(item => {
data.forEach(function (item) {
html +=
'<div class="swiper-slide">' +
'<div class="item"> ' +
......@@ -439,7 +437,7 @@
'<ul class="tag-list">' +
(function(a) {
var li = '';
a.forEach(ele => {
a.forEach(function (ele) {
li += '<li>' + ele + '</li>';
});
return li;
......@@ -449,15 +447,15 @@
});
return html;
}
console.log(createHtml(ideal.produtsList));
// Swiper.modules = Swiper.modules || {};
window.mySwiper = new Swiper('#swiper1', {
modules: {},
slidesPerView: 'auto',
slidesPerColumn: 2,
on: {
transitionEnd: function(swiper) {
onTransitionEnd: function(swiper) {
// alert('过渡结束');
computeMasking(this);
}
// console.log(swiper)
computeMasking(swiper);
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
......@@ -475,20 +473,16 @@
}
update();
$('#slidePrev').click(function() {
mySwiper.slidePrev(200, true, function(e) {
mySwiper.slidePrev( function(e) {
console.log(e);
alert('slidePrev');
});
},200);
});
$('#slideNext').click(function() {
mySwiper.slideNext(200, true, function(e) {
mySwiper.slideNext(function(e) {
console.log(e);
alert('slideNext');
});
});
mySwiper.$wrapperEl.transitionEnd(function(e) {
console.log(mySwiper.activeIndex);
// alert('swiper自带transitionEnd不会触发，这是自定义的');
},200);
});
function tab(container) {
$('.menu-item').click(function(e) {
......@@ -519,7 +513,7 @@
});
});
function computeMasking(swiper) {
var getTranslate = swiper.getTranslate();
var getTranslate = swiper.getWrapperTranslate();
var totalWidth = $('.swiper-wrapper').width();
var viewWidth = 860;
if (getTranslate / 400 <= 0) {
......@@ -538,5 +532,6 @@
}
computeMasking(mySwiper);
});
</script>
</script>
</html>
html/solution.html
......@@ -28,8 +28,8 @@
<link rel="stylesheet" href="../style/solution.css">
<!-- <script src="../js/less.min.js"></script>
<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>
<!-- <script src="https://cdn.bootcss.com/babel-polyfill/7.2.5/polyfill.min.js"></script> -->
</head>
<body>
......@@ -332,7 +332,7 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 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/4.0.2/js/swiper.min.js"></script>
<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>
</body>
......@@ -340,7 +340,7 @@
$(document).ready(function() {
function createHtml(data) {
var html = '';
data.forEach(item => {
data.forEach(function (item) {
html +=
'<div class="swiper-slide">' +
'<div class="item"> ' +
......@@ -356,7 +356,7 @@
'<ul class="tag-list">' +
(function(a) {
var li = '';
a.forEach(ele => {
a.forEach(function (ele) {
li += '<li>' + ele + '</li>';
});
return li;
......@@ -366,15 +366,15 @@
});
return html;
}
console.log(createHtml(ideal.produtsList));
// Swiper.modules = Swiper.modules || {};
window.mySwiper = new Swiper('#swiper1', {
modules: {},
slidesPerView: 'auto',
slidesPerColumn: 2,
on: {
transitionEnd: function(swiper) {
onTransitionEnd: function(swiper) {
// alert('过渡结束');
computeMasking(this);
}
// console.log(swiper)
computeMasking(swiper);
}
// spaceBetween: 30,
// direction: 'horizontal', // 垂直切换选项
......@@ -392,20 +392,16 @@
}
update();
$('#slidePrev').click(function() {
mySwiper.slidePrev(200, true, function(e) {
mySwiper.slidePrev( function(e) {
console.log(e);
alert('slidePrev');
});
},200);
});
$('#slideNext').click(function() {
mySwiper.slideNext(200, true, function(e) {
mySwiper.slideNext(function(e) {
console.log(e);
alert('slideNext');
});
});
mySwiper.$wrapperEl.transitionEnd(function(e) {
console.log(mySwiper.activeIndex);
// alert('swiper自带transitionEnd不会触发，这是自定义的');
},200);
});
function tab(container) {
$('.menu-item').click(function(e) {
......@@ -436,7 +432,7 @@
});
});
function computeMasking(swiper) {
var getTranslate = swiper.getTranslate();
var getTranslate = swiper.getWrapperTranslate();
var totalWidth = $('.swiper-wrapper').width();
var viewWidth = 860;
if (getTranslate / 400 <= 0) {
......
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