jQuery如何實(shí)現(xiàn)首頁(yè)懸浮框

這篇“jQuery如何實(shí)現(xiàn)首頁(yè)懸浮框”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“jQuery如何實(shí)現(xiàn)首頁(yè)懸浮框”文章吧。

基于jQuery實(shí)現(xiàn)首頁(yè)懸浮框，如下圖所示

1、在頁(yè)面中引入jQuery.bay-window.js，jQuery.bay-window.js的代碼如下：

!function($){
  /**
   * Description: jquery飄窗插件，可自適應(yīng)瀏覽器寬高的變化
   * Author: ddqre12345
   * CreateTime: 2017.5.3
   * param: args={startL:default, startT:default, angle:-Math.PI/4, speed: 125}
   * 參數(shù)說(shuō)名: startL飄窗初始時(shí)距離左邊的距離, startT飄窗初始化距離頂部的距離, angle飄窗初始運(yùn)動(dòng)方向, speed運(yùn)動(dòng)速度(px/s)
   */
  $.fn.autoMove = function(args){
    //先定義一些工具函數(shù)判斷邊距
    function isTop(pos, w_w, w_h, d_w, d_h){//飄窗到達(dá)上邊距
      return (pos.top<=0) ? true : false;
    }
    function isBottom(pos, w_w, w_h, d_w, d_h){//飄窗到達(dá)下邊距
      return (pos.top>=(w_h-d_h)) ? true : false;
    }
    function isLeft(pos, w_w, w_h, d_w, d_h){//飄窗到達(dá)左邊距
      return (pos.left<=0) ? true : false;
    }
    function isRight(pos, w_w, w_h, d_w, d_h){//飄窗到達(dá)右邊距
      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;
      //位置及參數(shù)的初始化
      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']};//飄窗位置對(duì)象
      var that = $(this);
      var angle= setobj.angle;
      var time = 10;//控制飄窗運(yùn)動(dòng)效果，值越小越細(xì)膩
      var step = setobj.speed * (time/1000);//計(jì)算運(yùn)動(dòng)步長(zhǎng)
      var decoration = {x:step*Math.cos(angle), y:step*Math.sin(angle)};//計(jì)算二維上的運(yùn)動(dòng)增量
      var mvtid;
      $(window).on('resize', function(){//窗口大小變動(dòng)時(shí)重新設(shè)置運(yùn)動(dòng)相關(guān)參數(shù)
          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.stop().animate({left:position.left, top:position.top}, time);//改用jquery動(dòng)畫函數(shù)使其更加平滑
        mvtid = setTimeout(move, time);//遞歸調(diào)用，使飄窗連續(xù)運(yùn)動(dòng)
      }
      move();//觸發(fā)動(dòng)作
      that.on('mouseenter', function(){ clearTimeout(mvtid) });//添加鼠標(biāo)事件
      that.on('mouseleave', function(){ move() });
    });
  }; //end plugin definition
}(jQuery);

2、接口獲取懸浮框相關(guān)的數(shù)據(jù)

http("POST", "/School/detail", {"id":s_id}, function (e) {
     
        vm.piaoc = e.data;
        vm.$nextTick(function () {
            $('.automv').autoMove({angle:-Math.PI/4, speed:50});
            $("body").on("click",".automv span",function(){
                $(this).parent().find("a").removeAttr("href");
                $(this).parent().hide();
            })
        })
    })

3、html頁(yè)面引入相關(guān)html代碼

<template v-if="piaoc != null">
      <template v-if="piaoc.is_open_float_win == '1'">
                <div class="automv" :>
                    <span>×</span>
                    <a :href="piaoc.open_float_url" rel="external nofollow" >
                        <template v-if="piaoc.open_float_image">
                            <img :src="piaoc.open_float_image_name+'!y'" alt="">
                        </template>
                        <template v-else>
                            <img src="../image/piaochuang.jpg" alt="">
                        </template>
                    </a>
                </div>
            </template>
            <template v-else>
                <div class="automv" ></div>
      </template>
</template>

4、相關(guān)懸浮框的css

.automv{
    width: 200px;
    height: 150px;
    z-index: 1032;
    position: relative;
}
.automv a{
    display: block;
    width: 100%;
    height: 100%;
}
.automv a img{
    width: 100%;
    height: 100%;
}
.automv span{
    position: absolute;
    right: 3px;
    top: 3px;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}
.automv:hover span{
    color: #fc87a3;
}

以上就是關(guān)于“jQuery如何實(shí)現(xiàn)首頁(yè)懸浮框”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。