按钮边缘判断 关于我们图片hover

html/dynamic.html

@@ -169,9 +169,116 @@
   <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() {
+     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="./dynamicDetail.html?id='+ item.id+'"> ' +
+            '<div class="img-container">' +
+            '<img src="' +
+            item.imagesUrl +
+            '" alt="">' +
+            '</div>' +
+            '<div class="item-title item-title2"> ' +
+            item.title +
+            '</div>' +
+            '<div class="bottom-word">' +
+                      '<span class="name">'+ item.type +'</span> '+ 
+                      '<span class="date"><img src="../img/time.png" alt="">'+ item.date +'</span> '+
+            ' </div>' +
+      
+            '</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,
+        onSlideChangeEnd: function (swiper) {
+          // alert('过渡结束');
+          // console.log(swiper)
+          change(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 change(swiper) {
+        var getTranslate = swiper.getWrapperTranslate('x');
+        var totalWidth = $('.swiper-wrapper').width();
+        var viewWidth = $('.list-item').width();
+        var leftBtn = $('#slidePrev');
+        var rightBtn = $('#slideNext');
+        // console.log(totalWidth,getTranslate, viewWidth)
+        if (getTranslate >= -100) {
+          leftBtn.css({ 'background': "none" });
+        }
+        else {
+          leftBtn.css({ 'background': "black" });
+        }
+
+        if (totalWidth + getTranslate - 200 <= viewWidth) {
+          rightBtn.css({ 'background': "none" });
+        }
+        else {
+          rightBtn.css({ 'background': "black" });
+        }
+      }
+      change(mySwiper)
+      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)  {
@@ -263,7 +370,23 @@
       function computeMasking(swiper) {
         var getTranslate = swiper.getWrapperTranslate();
         var totalWidth = $('.swiper-wrapper').width();
-        var viewWidth = 860;
+        var viewWidth = $('.list-item').width();
+        var leftBtn = $('#slidePrev');
+        var rightBtn = $('#slideNext');
+        // console.log(totalWidth,getTranslate, viewWidth)
+        if (getTranslate == 0) {
+          leftBtn.css({ 'background': "none" });
+        }
+        else {
+          leftBtn.css({ 'background': "black" });
+        }
+
+        if (totalWidth + getTranslate <= viewWidth) {
+          rightBtn.css({ 'background': "none" });
+        }
+        else {
+          rightBtn.css({ 'background': "black" });
+        }
         if (getTranslate / 400 <= 0) {
           console.log(totalWidth / 200, Math.abs(getTranslate / 400) + 4);
           $('.swiper-slide').removeClass('show-mask');
@@ -279,6 +402,7 @@
         }
       }
       computeMasking(mySwiper);
+     }
     });
 </script>
 

html/products.html

@@ -462,10 +462,10 @@
         slidesPerView: 'auto',
         slidesPerColumn: 2,
         cssWidthAndHeight: true,
-        onTransitionEnd: function (swiper) {
+        onSlideChangeEnd: function (swiper) {
           // alert('过渡结束');
           // console.log(swiper)
-          computeMasking(swiper);
+          change(swiper)
         }
         // spaceBetween: 30,
         // direction: 'horizontal', // 垂直切换选项
@@ -484,6 +484,28 @@
       $('#slideNext').click(function () {
         mySwiper.swipeNext();
       });
+      function change(swiper) {
+        var getTranslate = swiper.getWrapperTranslate('x');
+        var totalWidth = $('.swiper-wrapper').width();
+        var viewWidth = $('.list-item').width();
+        var leftBtn = $('#slidePrev');
+        var rightBtn = $('#slideNext');
+        // console.log(totalWidth,getTranslate, viewWidth)
+        if (getTranslate >= -100) {
+          leftBtn.css({ 'background': "none" });
+        }
+        else {
+          leftBtn.css({ 'background': "black" });
+        }
+
+        if (totalWidth + getTranslate - 200 <= viewWidth) {
+          rightBtn.css({ 'background': "none" });
+        }
+        else {
+          rightBtn.css({ 'background': "black" });
+        }
+      }
+      change(mySwiper)
       function tab(container) {
         $('.menu-item').click(function (e) {
           $(this)
@@ -579,9 +601,27 @@
       tab();
 
       function computeMasking(swiper) {
+
         var getTranslate = swiper.getWrapperTranslate();
         var totalWidth = $('.swiper-wrapper').width();
-        var viewWidth = 860;
+        var viewWidth = $('.list-item').width();
+        var leftBtn = $('#slidePrev');
+        var rightBtn = $('#slideNext');
+        // console.log(totalWidth,getTranslate, viewWidth)
+        if (getTranslate == 0) {
+          leftBtn.css({ 'background': "none" });
+        }
+        else {
+          leftBtn.css({ 'background': "black" });
+        }
+
+        if (totalWidth + getTranslate <= viewWidth) {
+          rightBtn.css({ 'background': "none" });
+        }
+        else {
+          rightBtn.css({ 'background': "black" });
+        }
+
         if (getTranslate / 400 <= 0) {
           console.log(totalWidth / 200, Math.abs(getTranslate / 400) + 4);
           $('.swiper-slide').removeClass('show-mask');

html/solution.html

@@ -333,7 +333,7 @@
   <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]>   
+  <!--[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">
 
@@ -341,6 +341,24 @@
 </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 = '';
@@ -389,10 +407,10 @@
         slidesPerView: 'auto',
         slidesPerColumn: 2,
         cssWidthAndHeight: true,
-        onTransitionEnd: function (swiper) {
+        onSlideChangeEnd: function (swiper) {
           // alert('过渡结束');
           // console.log(swiper)
-          computeMasking(swiper);
+          change(swiper)
         }
         // spaceBetween: 30,
         // direction: 'horizontal', // 垂直切换选项
@@ -411,6 +429,28 @@
       $('#slideNext').click(function () {
         mySwiper.swipeNext();
       });
+      function change(swiper) {
+        var getTranslate = swiper.getWrapperTranslate('x');
+        var totalWidth = $('.swiper-wrapper').width();
+        var viewWidth = $('.list-item').width();
+        var leftBtn = $('#slidePrev');
+        var rightBtn = $('#slideNext');
+        // console.log(totalWidth,getTranslate, viewWidth)
+        if (getTranslate >= -100) {
+          leftBtn.css({ 'background': "none" });
+        }
+        else {
+          leftBtn.css({ 'background': "black" });
+        }
+
+        if (totalWidth + getTranslate - 200 <= viewWidth) {
+          rightBtn.css({ 'background': "none" });
+        }
+        else {
+          rightBtn.css({ 'background': "black" });
+        }
+      }
+      change(mySwiper)
       function tab(container) {
         $('.menu-item').click(function (e) {
           $(this)
@@ -506,9 +546,27 @@
       tab();
 
       function computeMasking(swiper) {
+
         var getTranslate = swiper.getWrapperTranslate();
         var totalWidth = $('.swiper-wrapper').width();
-        var viewWidth = 860;
+        var viewWidth = $('.list-item').width();
+        var leftBtn = $('#slidePrev');
+        var rightBtn = $('#slideNext');
+        // console.log(totalWidth,getTranslate, viewWidth)
+        if (getTranslate == 0) {
+          leftBtn.css({ 'background': "none" });
+        }
+        else {
+          leftBtn.css({ 'background': "black" });
+        }
+
+        if (totalWidth + getTranslate <= viewWidth) {
+          rightBtn.css({ 'background': "none" });
+        }
+        else {
+          rightBtn.css({ 'background': "black" });
+        }
+
         if (getTranslate / 400 <= 0) {
           console.log(totalWidth / 200, Math.abs(getTranslate / 400) + 4);
           $('.swiper-slide').removeClass('show-mask');

style/about.css

@@ -196,6 +196,10 @@ ul {
   text-align: center;
   font-weight: bold;
   font-size: 14px;
+  transition: all 1s;
+}
+.our-products .our .bottom-container .item:hover {
+  background-size: 120%;
 }
 .our-products .our .bottom-container .item .title {
   padding-top: 50px;

style/about.less

@@ -210,6 +210,10 @@ ul {
         text-align: center;
         font-weight: bold;
         font-size: 14px;
+        transition: all 1s;
+        &:hover {
+          background-size: 120%;
+        }
         .title {
           padding-top: 50px;
           font-size: 24px;