电子站首页

直接使用代码

<nav id="nav" class="container">
  <div class="mask2"></div>
  <div class="col-xs-3">
    <div class="nav-bar">
      <img src="http://www.bootfastui.cn/img/2021/0328-6/line.png" width="30" class="nav-line" />
      <div class="nav-content">
        <img src="http://www.bootfastui.cn/img/2021/0328-6/arrow.png" class="arrow" />
        <ul>
          <li><a href="http://www.bootfastui.cn">产品</a></li>
          <li><a href="http://www.bootfastui.cn">应用</a></li>
          <li><a href="http://www.bootfastui.cn">新闻稿</a></li>
          <li><a href="http://www.bootfastui.cn">质量</a></li>
          <li><a href="http://www.bootfastui.cn">支持</a></li>
          <li><a href="http://www.bootfastui.cn">人才</a></li>
          <li><a href="http://www.bootfastui.cn">联络我们</a></li>
          
        </ul>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <a href="http://www.bootfastui.cn">
      <img src="http://www.bootfastui.cn/img/2021/0328-6/logo.png" width="160" class="logo" class="text-center" />
    </a>
  </div>
  <div class="col-xs-3">
    <div class="nav-search">
      <span class="glyphicon glyphicon-search"></span>
    </div>
  </div>
  <div class="clear"></div>
</nav>
<div class="clear"></div>
<div class="mask"></div>

<div class='search'
  style="position:fixed; top:55px;width:100%; z-index: 9999; background:#fff;padding:6px;display:none">
  <form class="form-inline" method="post" enctype="multipart/form-data" action="/m/search">
    <div class="col-xs-9">
      <input type="text" class="form-control" placeholder="关键词" name="keyword">
    </div>
    <div class="col-xs-2 "> <button type="submit" class="btn btn-default">搜寻</button></div>
  </form>
</div>
<script type="text/javascript">
  $(function () {
    //手机导航显示隐鲹操作
    var a = true;
    $('.nav-line').click(function () {
      a = !a;
      console.log(a)
      if (a) {
        $('.nav-content').hide();
      } else {
        $('.nav-content').show();
        $('.mask').show();
        $('.mask2').show();
      }
    })
    //搜索显示
    var b = true;
    $('.nav-search').click(function () {
      console.log(b)
      b = !b;
      console.log(b)
      if (b) {
        $('.search').hide();
      } else {
        $('.search').show();
      }
    })
    //单击页面导航区域以外可关闭导航操作
    $('.mask').click(function (e) {
      $('.nav-content').hide();
      $('.nav-content-blue').hide();
      $('.mask').hide();
      $('.mask2').hide();
      b = true;
      a = true;
      console.log(b)
    });
    //单击页面导航区域以外可关闭导航操作
    $('.mask2').click(function (e) {
      $('.nav-content').hide();
      $('.nav-content-blue').hide();
      $('.mask').hide();
      $('.mask2').hide();
      b = true;
      a = true;
      console.log(b)
    });
    //页面滚动关闭导航
    $(document).scroll(function (e) {
      $('.nav-content').hide();
      $('.nav-content-blue').hide();
      $('.mask').hide();
      $('.mask2').hide();
      a = true;
      b = true;
    });
    //轮播图手指滑动支持-----------------------------------------------------------
    // 获取手指在轮播图元素上的一个滑动方向（左右）
    // 获取界面上轮播图容器
    var $carousels = $('.carousel');
    var startX, endX;
    // 在滑动的一定范围内，才切换图片
    var offset = 50;
    // 注册滑动事件
    $carousels.on('touchstart', function (e) {
      // 手指触摸开始时记录一下手指所在的坐标x
      startX = e.originalEvent.touches[0].clientX;
    });
    $carousels.on('touchmove', function (e) {
      // 目的是：记录手指离开屏幕一瞬间的位置，用move事件重复赋值
      endX = e.originalEvent.touches[0].clientX;
    });
    $carousels.on('touchend', function (e) {
      //console.log(endX);
      //结束触摸一瞬间记录手指最后所在坐标x的位置 endX
      //比较endX与startX的大小，并获取每次运动的距离，当距离大于一定值时认为是有方向的变化
      var distance = Math.abs(startX - endX);
      if (distance > offset) {
        //说明有方向的变化
        //根据获得的方向判断是上一张还是下一张出现
        $(this).carousel(startX > endX ? 'next' : 'prev');
      }
    })
    //-------------------------------------------------------------------
  })
</script>
<div class="clear h10"></div>

<section id="carousel-example-generic" class="carousel slide " data-ride="carousel" style="width:100%">
  
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="/Public/images/banner1.jpg" alt="..." width='100%'>
    </div>
    <div class="item">
      <img src="/Public/images/banner1.jpg" alt="..." width='100%'>
    </div>
    <div class="item">
      <img src="/Public/images/banner1.jpg" alt="..." width='100%'>
    </div>
  </div>
</section>
<div class="clear"></div>
<section class="container pm">
  <div class="col-xs-4">
    <div class="com-item ">
      <a href="http://www.bootfastui.cn">
        <img src="http://www.bootfastui.cn/img/2021/0328-6/index_img1.png" class="img-responsive text-center" />
        <h5 class="text-center">创新产品</h5>
      </a>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="com-item ">
      <a href="http://www.bootfastui.cn">
        <img src="http://www.bootfastui.cn/img/2021/0328-6/index_img1.png" class="img-responsive text-center" />
        <h5 class="text-center">应用领域</h5>
      </a>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="com-item">
      <a href="http://www.bootfastui.cn">
        <img src="http://www.bootfastui.cn/img/2021/0328-6/index_img1.png" class="img-responsive text-center" />
        <h5 class="text-center">资源中心</h5>
      </a>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="com-item ">
      <a href="http://www.bootfastui.cn">
        <img src="http://www.bootfastui.cn/img/2021/0328-6/index_img1.png" class="img-responsive text-center" />
        <h5 class="text-center">新闻稿</h5>
      </a>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="com-item">
      <a href="http://www.bootfastui.cn">
        <img src="http://www.bootfastui.cn/img/2021/0328-6/index_img1.png" class="img-responsive text-center" />
        <h5 class="text-center">获得支持</h5>
      </a>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="com-item">
      <a href="http://www.bootfastui.cn">
        <img src="http://www.bootfastui.cn/img/2021/0328-6/index_img1.png" class="img-responsive text-center" />
        <h5 class="text-center">产品购买</h5>
      </a>
    </div>
  </div>
</section>

<section class="container pm">
  <h3 class="com-h3">新产品信息</h3>
  <div class="product-item">
    <a href="http://www.bootfastui.cn">
      <h5 style="width:100%">
        <div class="col-xs-2 pm">
          02-07
        </div>
        <div class="col-xs-10 s">
          <div class="sheng">赛米微尔推出SG8022B090系列电源用陶瓷气体放电管</div>
        </div>
      </h5>
    </a>
  </div>
  <div class="product-item">
    <a href="http://www.bootfastui.cn">
      <h5 style="width:100%">
        <div class="col-xs-2 pm">
          02-07
        </div>
        <div class="col-xs-10 s">
          <div class="sheng">SESMC24系列ESD静电抑制器在CAN总线收发器中的应用</div>
        </div>
      </h5>
    </a>
  </div>
  <br />
</section>

<div class="h150"></div>
<footer style="position:fixed;bottom:0;width:100%;">
  <div id="footer">
    <div class="col-xs-12">
      <p class="banquan">
        赛米微尔Semiware <br />电路保护解决方案综合服务商
      </p>
    </div>
    <div class="clear"></div>
  </div>
</footer>