master

分支 (1)

管理

管理

master

fullpageDemo
/
index_bak.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>淘驰科技-人居环境空气治理专业技术服务商</title>
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/reset.css">
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/fullpage.css">
	<link rel="stylesheet" href="<?php  bloginfo('template_url'); ?>/css/base.css">
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/font-awesome.min.css">
	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/index.css">
	<script src='<?php bloginfo('template_url'); ?>/js/jquery-3.3.1.min.js'></script>
	<script src='<?php bloginfo('template_url'); ?>/js/fullpage.js'></script>
	<script src="<?php bloginfo('template_url'); ?>/js/easings.js"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/scrolloverflow.js"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/base.js"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/index.js"></script>
</head>
<body>
<div id="fullpage">
	<?php get_header(); ?>

	<div class="page page1 one">
		<div class="text-box">
			<h2 class="title animated transiti">
				人居环境空气治理专业技术服务商
			</h2>
			<p class="title-eng animated transiti">
				Air Purification technologies-sevices for domestic and commercial use
			</p>
		</div>

		<div class="slider">
			<ul class="clearfix">
				<li class="slider-item active">

				</li>

				<li class="slider-item">

				</li>

				<li class="slider-item">

				</li>
			</ul>
		</div>
	</div>

	<div class="page page2">
		<div class="top transiti">
			<div class="text-box">
				<h3 class="sub-title">专业技术</h3>
				<p class="title-eng">非对交替发生正负离子技术</p>
			</div>

			<div class="pic-list">
				<div class="pic-item">
					<a href="#" class="link-wrap"></a>
					<img src="<?php bloginfo('template_url'); ?>/images/1.png" alt="..." />
				</div>
				<div class="pic-item">
					<a href="#" class="link-wrap"></a>
					<img src="<?php bloginfo('template_url'); ?>/images/2.png" alt="..." />
				</div>
				<div class="pic-item">
					<a href="#" class="link-wrap"></a>
					<img src="<?php bloginfo('template_url'); ?>/images/3.png" alt="..." />
				</div>
			</div>
		</div>

		<div class="bottom">
			<h2 class="title animated">工程案例</h2>
		</div>
	</div>

	<div id="footer"  class="page">
		<div class="top">
			<div class="left">
				<h3 class="sub-title">非对称交替正负离子发生器</h3>
				<p>N-LZG12<span>型</span></p>
			</div>

			<div class="middle">
				<img src="<?php bloginfo('template_url'); ?>/images/video.png" alt="..." />
			</div>

			<div class="right">
				<a href="#" class="btn">了解更多</a>
			</div>
		</div>

		<?php get_footer(); ?>
	</div>
</div>
</body>
<script>
  $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourPage'],
    slidesColor: ['#f00', '#0f0', '#00f', 'back'],
    navigation: true,
    navigationColor: 'red',
    showActiveTooltip: true,
    slidesNavigation: true,
    autoScrolling: false,
    loopBottom: false,
    sectionSelector: '.page',
    slideSelector: '.word',
    verticalCentered: false,
    onLeave: function(a, b){
      console.log() // 当前页面下表
      console.log() // 下一页面下表


    },
    afterLoad: function(a, b){
      console.log() // 滚动结束后打印当前Page锚点
      console.log() // 滚动结束后打印当前Page下表

      if(b > 1){
        $('#header').addClass('a').find('.down-menu').addClass('bg').prevObject.find('.logo').find('svg:first-child + svg').addClass('active').prev().removeClass('active')
				$('#header').find('.min-menu-ico').addClass('a')
      } else {

        $('#header').removeClass('a').find('.down-menu').removeClass('bg').prevObject.find('.logo').find('svg:first-child').addClass('active').next().removeClass('active')
        $('#header').find('.min-menu-ico').removeClass('a')
      }
    },
    afterRender: function() {

    },
    afterResize: function(a, b){

    },
    afterSlideLoad: function(a, b){
      console.log() // Slide滚动结束后打印当前Slide锚点
      console.log() // Slide滚动结束后打印当前Slide下表
    },
    onSlideLeave: function(a, b) {

    }
  })
</script>
</html>