备份

public/assets/index/css/style.css

@@ -74,6 +74,27 @@ body {
     color: #449942;
 }
 
+/* 漂浮窗 */
+.showy {
+    position: relative;
+    width:200px;
+    z-index: 99;
+}
+.bay-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    text-align: right;
+    width: 100%;
+    z-index: 100;
+}
+.bay-img {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    width:200px;
+}
+
 /*底部*/
 .Footer {
     background-color: #449942;

public/assets/index/js/jquery.bay-window.js

@@ -0,0 +1,72 @@
+!function($){
+  /**
+   * Description: jquery飘窗插件，可自适应浏览器宽高的变化
+   * Author: ddqre12345
+   * CreateTime: 2017.5.3
+   * param: args={startL:default, startT:default, angle:-Math.PI/4, speed: 125}
+   * 参数说名: startL飘窗初始时距离左边的距离, startT飘窗初始化距离顶部的距离, angle飘窗初始运动方向, speed运动速度(px/s)
+   */
+  $.fn.autoMove = function(args){
+    //先定义一些工具函数判断边距
+    function isTop(pos, w_w, w_h, d_w, d_h){//飘窗到达上边距
+      return (pos.top<=0) ? true : false;
+    }
+    function isBottom(pos, w_w, w_h, d_w, d_h){//飘窗到达下边距
+      return (pos.top>=(w_h-d_h)) ? true : false;
+    }
+    function isLeft(pos, w_w, w_h, d_w, d_h){//飘窗到达左边距
+      return (pos.left<=0) ? true : false;
+    }
+    function isRight(pos, w_w, w_h, d_w, d_h){//飘窗到达右边距
+      return (pos.left>=(w_w-d_w)) ? true : false;
+    }
+    return this.each(function(){
+      var w_w = parseInt($(window).width()),
+        w_h = parseInt($(window).height()),
+        d_w = parseInt($(this).width()),
+        d_h = parseInt($(this).height()),
+        d_l = (w_w-d_w)/2,
+        d_t = (w_h-d_h)/2,
+        max_l = w_w - d_w;
+      max_t = w_h - d_h;
+      //位置及参数的初始化
+      var setobj = $.extend({startL:d_l, startT:d_t, angle:Math.PI/4, speed:100}, args);
+      $(this).css({position: 'fixed', left: setobj['startL']+'px', top: setobj['startT']+'px'});
+      var position = {left: setobj['startL'], top: setobj['startT']};//飘窗位置对象
+      var that = $(this);
+      var angle= setobj.angle;
+      var time = 10;//控制飘窗运动效果，值越小越细腻
+      var step = setobj.speed * (time/1000);//计算运动步长
+      var decoration = {x:step*Math.cos(angle), y:step*Math.sin(angle)};//计算二维上的运动增量
+      var mvtid;
+      $(window).on('resize', function(){//窗口大小变动时重新设置运动相关参数
+          w_w = parseInt($(window).width());
+          w_h = parseInt($(window).height());
+          max_l = w_w - d_w;
+          max_t = w_h - d_h;
+      });
+      function move(){
+        position.left += decoration.x;
+        position.top  += decoration.y;
+        if(isLeft(position, w_w, w_h, d_w, d_h)||isRight(position, w_w, w_h, d_w, d_h)){
+          decoration.x = -1*decoration.x;
+        }
+        if(isRight(position, w_w, w_h, d_w, d_h)){
+          position.left = max_l;
+        }
+        if(isTop(position, w_w, w_h, d_w, d_h)||isBottom(position, w_w, w_h, d_w, d_h)){
+          decoration.y = -1*decoration.y;
+        }
+        if(isBottom(position, w_w, w_h, d_w, d_h)){
+          position.top = max_t;
+        }
+        //that.css({left:position.left, top:position.top});
+        that.animate({left:position.left, top:position.top}, time);//改用jquery动画函数使其更加平滑
+        mvtid = setTimeout(move, time);//递归调用，使飘窗连续运动
+      }
+      move();//触发动作
+      that.on('mouseenter', function(){ clearTimeout(mvtid) });//添加鼠标事件
+      that.on('mouseleave', function(){ move() });
+    });
+  }; //end plugin definition
+}(jQuery);

resources/views/layouts/header.blade.php

@@ -5,6 +5,13 @@
 {{--        <img src="/assets/index/images/wxImg.png" class="Rightfixed-pop">--}}
 {{--    </div>--}}
 {{--</div>--}}
+
+<!-- 漂浮窗 -->
+<div class="showy" id="bay">
+    <div class="bay-close" style="text-align:right;cursor:pointer;" id="close">关闭</div>
+    <img class="bay-img" src="/assets/index/images/showy.jpg" />
+</div>
+
 <!-- 头部 -->
 <div class="navTop">
     <div class="container">
@@ -86,6 +93,7 @@
 
 @push('script')
     <script type="text/javascript" src="{{ asset('assets/index/js/swiper.min.js') }}"></script>
+    <script type="text/javascript" src="{{ asset('assets/index/js/jquery.bay-window.js') }}"></script>
     <script type="text/javascript">
         // 新闻轮播
         var banner = new Swiper('.indexTopBig', {
@@ -96,5 +104,11 @@
             autoplayDisableOnInteraction: false,
 			loop: true
         });
+
+        //网站漂浮窗
+        $('#bay').autoMove({angle:-Math.PI/4, speed: 150});
+        $("#close").click(function() {
+            $("#bay").hide();
+        });
     </script>
 @endpush