service-platform
/
web-test


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>中科在线</title>
  <!-- layui -->
  <link rel="stylesheet" href="static/home/lib/layui/css/layui.css">
  <link rel="stylesheet" href="static/home/css/lib.css">
  <link rel="stylesheet" href="static/home/css/road.css">
  <link rel="stylesheet" href="static/home/css/index.css">
  <style>
    .canvas-stats {
      display: none;
    }
    #a{
      width: 100%;
      height: 30px;
      position: absolute;
      right: 0;
      text-align: right;
      border-bottom: 1px solid #ccc;
      line-height: 30px;
    }
    #a:hover{
      cursor: pointer;
    }
    .floating{
      width: 280px;
      height: 150px;
      background: #fff;
      border-radius: 10px;
    }
    .floatingInfo{
      padding: 0 17px;
      font-size: 34px;
      position: absolute;
      top: 30px;
      font-family: cursive;
      -webkit-text-stroke: 1px #76bdfe;
      color: transparent;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .floatingInfo:hover{
      cursor: pointer;
      color: #76bdfe;
    }
  </style>
</head>

<body>
  <div class="header">
    <a href="" style="display: none;">
      <div class="home-btn"></div>
    </a>
    <img class='image' src="static/images/logo.png" alt="">
    <p class='title'>中科在线</p>
    <!-- <p class='notice' >通知</p> -->
  </div>
  <img class="sci-wheel" src="static/home/images/sci.gif" alt="">
  <!-- 导航 -->
  <div class="center">
    <a class="list fn_1 moveUpDownFla1" target="_blank" href="market/index">
      <p>科技超市</p>
    </a>
    <a class="list fn_2 moveUpDownFla2" target="_blank" href="hallList/index">
      <p>直播大厅</p>
    </a>
    <a class="list fn_3 moveUpDownFla1" target="_blank" href="dynamic/index">
      <p>动态监测</p>
    </a>
    <a class="list fn_4 moveUpDownFla2" target="_blank" href="live/service">
      <p>创新服务</p>
    </a>
    <a class="list fn_5 moveUpDownFla2" target="_blank" href="technical/index">
      <p>技术交流</p>
    </a>
  </div>
  <!-- 浮窗 -->
  <div id="floatingDiv" style="position:absolute;left:50px;top:60px;z-index: 9999;">
    <div id="a" onClick="javascript:this.parentNode.style.display='none';">关闭窗口</div>
    <!-- <img src="01.jpg" border="0" /> -->
    <div class='floating' onclick="noticeBtn()">
<p id="floatingid" class='floatingInfo'></p>
    </div>
  </div>
  <!--流星-->
  <div class="liuxing liuxing1 liuxingFla"></div>
  <div class="liuxing liuxing2 liuxingFla2"></div>
  <div class="liuxing liuxing3 liuxingFla3"></div>
  <div class="liuxing liuxing4 liuxingFla4"></div>
  <div id="canvas-container-1" class="canvas-container">
    <canvas id="canvas-1"></canvas>
  </div>
  <script src="static/home/js/stats.min.js"></script>
  <script src="static/home/js/three.min.js"></script>
  <script src="static/js/jquery-1.8.3.min.js"></script>
  <script>
    window.onload = function () {
      $.ajax({
        url:'/api/market/notice',
        type:"GET",
        contentType:'application/json',
        success:function(res){
          // console.log(res);
          if(res.errcode =='0') {
            if(res.data.length>0) {
              var head = res.data[0];
              $('#floatingid').text(head.title)
            }
          }

        },
        error:function (e) {
          console.error(e)
        }
      })
    }
    function ThreeJSCanvas(CANVAS_ID) {

      var SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
      var SCREEN_WIDTH = SCREEN_HEIGHT;
      var SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
      var canvas, container;

      var container, loader, stats;
      var renderer, camera, scene;
      var raycaster, controls;

      var ANIMATION_FRAME_LENGTH = 30,
        INTERACT_DISTANCE = 2.5;
      var objetArray = [],
        animationQueue = [];

      var color1 = [0 / 255, 110 / 255, 255 / 255],
        color2 = [0 / 255, 255 / 255, 140 / 255];

      var bitmap = [];
      var BITMAP_SKIP = 1;

      var fov = 90;
      var cameraPos = [0, 0, 30];
      var cameraLookAt = [0, 0, 0];
      var viewHeight = 2 * Math.tan(THREE.Math.degToRad(fov / 2)) * cameraPos[2],
        viewWidth = viewHeight * SCREEN_ASPECT_RATIO;
      var mouse = new THREE.Vector3(10000, 10000, -1),
        mouseScaled = new THREE.Vector3(10000, 10000, -1);

      var frame = 0;

      function init() {

        // Global Variables
        container = document.getElementById("canvas-container-" + CANVAS_ID);
        canvas = document.getElementById("canvas-" + CANVAS_ID);
        canvas.addEventListener('mousemove', onDocumentMouseMove, false);

        loader = new THREE.JSONLoader();
        stats = new Stats();
        stats.domElement.classList.add("canvas-stats");
        stats.domElement.id = "canvas-stats-" + CANVAS_ID;

        /* If you are familiar with python and opencv
           you can use this python script to generate custom bitmaps 
           --------------------
           https://git.io/vdBAu 
           --------------------
        */
        var data = '#000000000000000000011110000000000000000000' +
          '#000000000000000011111111110000000000000000' +
          '#000000000000001111111111111100000000000000' +
          '#000000000000011111111111111110000000000000' +
          '#000000000000111111111111111111000000000000' +
          '#000000000001111111111111111111100000000000' +
          '#000000000011111111111111111111110000000000' +
          '#000000000011111111111111111111110000000000' +
          '#000000000111111111111111111111111000000000' +
          '#000000000111111111111111111111111000000000' +
          '#000000001111111111111111111111111100000000' +
          '#000000001111111111111111111111111100000000' +
          '#000000001111111111111111111111111100000000' +
          '#000000001111111111111111111111111100000000' +
          '#000000001111111111111111111111111100000000' +
          '#000000000111111111111111111111111000000000' +
          '#000000000111111111111111111111111000000000' +
          '#000000000111111111111111111111111000000000' +
          '#000000000011111111111111111111110000000000' +
          '#000000000011111111111111111111110000000000' +
          '#000000000001111111111111111111100000000000' +
          '#000000000001111111111111111111100000000000' +
          '#000000000000111111111111111111000000000000' +
          '#000000000000111111111111111110000000000000' +
          '#000000000000011111111111111110000000000000' +
          '#000000000000001111111111111100000000000000' +
          '#000000000000001111111111111100000000000000' +
          '#000000000000001111111111111000000000000000' +
          '#000000000000000111111111111000000000000000' +
          '#000000000000000111111111111000000000000000' +
          '#000000000000000111111111111000000000000000' +
          '#000000000000000111111111111000000000000000' +
          '#000000000000000011111111110000000000000000' +
          '#000000000000000010000000010000000000000000' +
          '#000000000000000011111111110000000000000000' +
          '#000000000000000010000000010000000000000000' +
          '#000000000000000011111111110000000000000000' +
          '#000000000000000010000000010000000000000000' +
          '#000000000000000011111111110000000000000000' +
          '#000000000000000000100001000000000000000000' +
          '#000000000000000000110011000000000000000000' +
          '#000000000000000000011110000000000000000000';

        for (var i = 0; i < data.length; i++) {
          if (data[i] == '#') {
            bitmap.push([]);
          } else {
            bitmap[bitmap.length - 1].push(data[i] - '0');
          }
        }

        container.appendChild(stats.domElement);

        // Renderer
        renderer = new THREE.WebGLRenderer({
          alpha: true,
          antialias: true,
          canvas: canvas,
        });
        renderer.setClearColor(0x212121, 0);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

        // Camera and Controls
        camera = new THREE.PerspectiveCamera(fov, SCREEN_ASPECT_RATIO, 0.1, 1000);
        // camera = new THREE.OrthographicCamera(-viewWidth, viewWidth, viewHeight, -viewHeight, 1, 300);
        camera.position.set(cameraPos[0], cameraPos[1], cameraPos[2]);
        camera.lookAt(new THREE.Vector3(cameraLookAt[0], cameraLookAt[1], cameraLookAt[2]));
        raycaster = new THREE.Raycaster();

        // controls = new THREE.OrbitControls(camera);
        // controls.rotateSpeed = 2.0;
        // controls.zoomSpeed = 2.0;
        // controls.enableZoom = true;
        // controls.enablePan = true;
        // controls.dampingFactor = 0.2;
        // controls.addEventListener('change', render);

        //Scene
        scene = new THREE.Scene();


        //Lights

        // Making Object Array
        var xOffset = -bitmap[0].length / (BITMAP_SKIP * 2);
        var yOffset = bitmap.length / (BITMAP_SKIP * 2);
        for (var i = 0; i < bitmap.length; i += BITMAP_SKIP) {
          for (var j = 0; j < bitmap[i].length; j += BITMAP_SKIP) {
            if (bitmap[i][j] == 1) {
              planeGeometry = new THREE.PlaneGeometry(1, 1);
              var circleGeometry = new THREE.CircleGeometry(1, 5);
              var frac = i / bitmap.length;
              // Materials
              planeMaterial = new THREE.MeshBasicMaterial({
                color: new THREE.Color(
                  color1[0] * frac + color2[0] * (1 - frac),
                  color1[1] * frac + color2[1] * (1 - frac),
                  color1[2] * frac + color2[2] * (1 - frac)
                ),
                transparent: true,
                opacity: THREE.Math.randFloat(0.4, 0.6),
                side: THREE.DoubleSide
              });

              var circleMaterial = new THREE.MeshBasicMaterial({
                color: new THREE.Color(1, 1, 1),
                transparent: true,
                opacity: THREE.Math.randFloat(0.8, 1),
                side: THREE.DoubleSide
              });

              // Mesh
              planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
              planeMesh.position.set(xOffset + j / BITMAP_SKIP, yOffset - i / BITMAP_SKIP, 0);
              var randWidth = THREE.Math.randFloat(0.6, 1.2);
              var randHeight = randWidth
              planeMesh.scale.set(randWidth, randHeight, 1);
              scene.add(planeMesh);
              objetArray.push([planeMesh, false]);


              circleMesh = new THREE.Mesh(circleGeometry, circleMaterial);
              circleMesh.position.set(xOffset + j / BITMAP_SKIP + THREE.Math.randFloat(-0.5, 0.5), yOffset - i / BITMAP_SKIP + THREE.Math.randFloat(-0.5, 0.5), 0.1);
              var randRadius = THREE.Math.randFloat(0.05, 0.1);
              circleMesh.scale.set(randRadius, randRadius, 1);
              scene.add(circleMesh);
              objetArray.push([circleMesh, false]);
            }

          }
        }


        //Geometry 

        // Materials


        // Mesh


        // Helpers

        //Add Stuff to Scene


      }

      function animate() {

        requestAnimationFrame(animate);
        render();
        stats.update();
        // controls.update();
        frame++;
      }

      function render() {

        while (animationQueue.length > 0) {
          var obj_index = animationQueue[0][0];
          var ani_frame = animationQueue[0][1];
          if (ani_frame > ANIMATION_FRAME_LENGTH) {
            objetArray[obj_index][1] = false;
            animationQueue.shift();
          } else {
            break;
          }
        }

        for (var i = 0; i < objetArray.length; i++) {
          var obj = objetArray[i][0];
          var isAnimating = objetArray[i][1];
          if (isAnimating == false) {
            var px = obj.position.x;
            var py = obj.position.y;
            var dist = Math.sqrt(Math.pow(px - mouseScaled.x, 2) + Math.pow(py - mouseScaled.y, 2));
            if (dist < INTERACT_DISTANCE) {
              var startPosVector = obj.position.clone();
              var mouseRepelVector = new THREE.Vector3().subVectors(startPosVector, mouseScaled).multiplyScalar(THREE.Math.randFloat(INTERACT_DISTANCE + 0.5, INTERACT_DISTANCE + 2) - dist);
              var endPosVector = new THREE.Vector3().addVectors(startPosVector, mouseRepelVector);
              animationQueue.push([i, 0, startPosVector, endPosVector]);
              objetArray[i][1] = true;
            }
          }
        }

        for (var i = 0; i < animationQueue.length; i++) {
          var obj = objetArray[animationQueue[i][0]][0];
          var ani_frame = animationQueue[i][1];
          var startPosVector = animationQueue[i][2];
          var endPosVector = animationQueue[i][3];
          var curPosVector = new THREE.Vector3();
          var frac = 1 - Math.abs(ani_frame - (ANIMATION_FRAME_LENGTH / 2)) / (ANIMATION_FRAME_LENGTH / 2);
          frac = easeOutQuad(frac);
          curPosVector.lerpVectors(startPosVector, endPosVector, frac);

          obj.position.x = curPosVector.x;
          obj.position.y = curPosVector.y;
          obj.position.z = curPosVector.z;
          animationQueue[i][1] += 1;
        }

        mouse = new THREE.Vector3(10000, 10000, -2);
        mouseScaled = new THREE.Vector3(10000, 10000, -2);

        renderer.render(scene, camera);
      }

      function onWindowResize() {
        SCREEN_HEIGHT = Math.min(window.innerWidth, window.innerHeight);
        SCREEN_WIDTH = SCREEN_HEIGHT;
        SCREEN_ASPECT_RATIO = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.aspect = SCREEN_ASPECT_RATIO;
        camera.updateProjectionMatrix();
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        console.log(SCREEN_WIDTH + "x" + SCREEN_HEIGHT)
      }

      function onDocumentMouseMove(event) {

        var rect = canvas.getBoundingClientRect();

        mouse.x = event.clientX - rect.left;
        mouse.y = event.clientY - rect.top;

        mouseScaled.x = mouse.x * viewWidth / SCREEN_WIDTH - viewWidth / 2;
        mouseScaled.y = -mouse.y * viewHeight / SCREEN_HEIGHT + viewHeight / 2;

      }

      function sigmoid(t) {
        return 1 / (1 + Math.pow(Math.E, -t));
      }

      // no easing, no acceleration
      function linear(t) {
        return t;
      }
      // accelerating from zero velocity
      function easeInQuad(t) {
        return t * t;
      }
      // decelerating to zero velocity
      function easeOutQuad(t) {
        return t * (2 - t);
      }
      // acceleration until halfway, then deceleration
      function easeInOutQuad(t) {
        return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
      }
      // accelerating from zero velocity 
      function easeInCubic(t) {
        return t * t * t;
      }
      // decelerating to zero velocity 
      function easeOutCubic(t) {
        return (--t) * t * t + 1;
      }
      // acceleration until halfway, then deceleration 
      function easeInOutCubic(t) {
        return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
      }
      // accelerating from zero velocity 
      function easeInQuart(t) {
        return t * t * t * t;
      }
      // decelerating to zero velocity 
      function easeOutQuart(t) {
        return 1 - (--t) * t * t * t;
      }
      // acceleration until halfway, then deceleration
      function easeInOutQuart(t) {
        return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
      }
      // accelerating from zero velocity
      function easeInQuint(t) {
        return t * t * t * t * t;
      }
      // decelerating to zero velocity
      function easeOutQuint(t) {
        return 1 + (--t) * t * t * t * t;
      }
      // acceleration until halfway, then deceleration 
      function easeInOutQuint(t) {
        return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
      }

      //Event Handlers
      window.addEventListener("resize", onWindowResize);


      init();
      animate();

    }

    ThreeJSCanvas(1);
  </script>
  <script>
    function noticeBtn() {
      window.location.href="../platlive/notice/index"
      }
  </script>
  <script>
    var xin = true,
        yin = true;
      var step = 2;
      var delay = 10;
      var $obj;
      $(function () {
        $obj = $('#floatingDiv');
        var time = window.setInterval('move()', delay);
        $obj.mouseover(function () {
          clearInterval(time);
        });
        $obj.mouseout(function () {
          time = window.setInterval('move()', delay);
        });
      });

      function move() {
        var left = $obj.offset().left;
        // console.log(left);
        var top = $obj.offset().top;
        var L = (T = 0); //左边界和顶部边界
        var R = $(window).width() - $obj.width(); // 右边界
        var B = $(window).height() - $obj.height(); //下边界

        //难点:怎样判断广告的4个边框有没有超出可视化范围!
        if (left < L) {
          xin = true; // 水平向右移动
        }
        if (left > R) {
          xin = false;
        }
        if (top < T) {
          yin = true;
        }
        if (top > B) {
          yin = false;
        }
        //根据有没有超出范围来确定广告的移动方向
        left += step * (xin == true ? 1 : -1);
        top += step * (yin == true ? 1 : -1);
        // 给div 元素重新定位
        $obj.offset({
          top: top,
          left: left,
        });
      }

  </script>
</body>
<!-- layui -->
<script type="text/javascript" src="static/home/lib/layui/layui.all.js"></script>

</html>