更新

public/home.html

@@ -13,16 +13,42 @@
     .canvas-stats {
       display: none;
     }
-    .notice{
-      color:#fff;
-      display: block;
-      padding: 0 80px;
+    #a{
+      width: 100%;
+      height: 30px;
+      position: absolute;
+      right: 0;
       text-align: right;
-      font-size: 20px;
+      border-bottom: 1px solid #ccc;
+      line-height: 30px;
     }
-    .notice:hover{
+    #a:hover{
       cursor: pointer;
-      color: #0085d2;
+    }
+    .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>
@@ -34,9 +60,10 @@
     </a>
     <img class='image' src="static/images/logo.png" alt="">
     <p class='title'>中科在线</p>
-    <p class='notice' onclick="noticeBtn()">通知</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>
@@ -54,6 +81,14 @@
       <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>
@@ -72,11 +107,11 @@
         type:"GET",
         contentType:'application/json',
         success:function(res){
-          console.log(res);
+          // console.log(res);
           if(res.errcode =='0') {
             if(res.data.length>0) {
               var head = res.data[0];
-              $('.notice').text(head.title)
+              $('#floatingid').text(head.title)
             }
           }
 
@@ -443,6 +478,55 @@
       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>