基于jQuery实现首页悬浮框

墨蓝 2023-01-23 03:53 251阅读 0赞

基于jQuery实现首页悬浮框，如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

1，在页面中引入jQuery.bay-window.js，jQuery.bay-window.js的代码如下：

!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.stop().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);

2，接口获取悬浮框相关的数据

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页面引入相关html代码

<template v-if="piaoc != null">
                <template v-if="piaoc.is_open_float_win == '1'">
                    <div class="automv" :style="'display: block;height:'+piaoc.open_float_height+';width:'+piaoc.open_float_width">
                        <span>×</span>
                        <a :href="piaoc.open_float_url">
                            <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" style="display: none;"></div>
                </template>
            </template>

4，相关悬浮框的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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20221004/ea1fd3687b2c4c409c46d52d044bbfca.png

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序 movable-view组件应用：可拖动悬浮框_返回首页

> 1. movable-view组件具体内容可参考官网：[微信官方文档][Link 1] > > 2. demo参考：[https://github.com/C

╰+攻爆jí腚メ/ 2023年06月04日 11:56/ 0 赞/ 102 阅读

相关基于jQuery实现首页悬浮框

基于jQuery实现首页悬浮框，如下图所示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

墨蓝/ 2023年01月23日 03:53/ 0 赞/ 252 阅读

相关 iOS 首页滚动改变搜索框

效果如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

浅浅的花香味﹌/ 2022年12月20日 03:06/ 0 赞/ 286 阅读

相关基于jquery实现穿梭框效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

水深无声/ 2022年12月16日 13:06/ 0 赞/ 207 阅读

相关自定义Dialog悬浮实现登录框

之前看好多登录框都以为是一个Activity，然后登录成功后start另一个Activity，原来利用悬浮对话框也可以实现。原理如下：在主活动main与

港控/mmm°/ 2022年09月19日 01:28/ 0 赞/ 289 阅读

相关悬浮框

<%@ page language="java" import="java.util.\" pageEncoding="UTF-8"%> <% String path

比眉伴天荒/ 2022年08月11日 16:32/ 0 赞/ 223 阅读

相关 jquery实现鼠标悬浮显示图片

实现鼠标悬浮显示图片图片跟随鼠标 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

桃扇骨/ 2022年06月04日 05:50/ 0 赞/ 410 阅读

相关悬浮框的实现

悬浮框的实现需要鼠标移上和移出两个事件，本例是基于vue做的： <div @mouseover="overShow(bossJobInfo.postDescripti

分手后的思念是犯贱/ 2022年05月22日 12:15/ 0 赞/ 345 阅读

相关 echart-悬浮框-初探

今天有一个需求是这样的柱状图：当鼠标移到 x轴线上显示弹框内容一　　　　当鼠标移到柱状图上显示弹框内容二 ![1074458-2019071217482

怼烎@/ 2021年11月22日 14:28/ 0 赞/ 404 阅读

相关 JQuery实现悬浮层

JQuery实现悬浮层 1、HTML代码 <div id="fudong" style="border:1px solid 454545; width:50px;

秒速五厘米/ 2021年09月15日 10:52/ 0 赞/ 388 阅读