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