jquery实现的一个网页飘窗小插件

最新推荐文章于 2021-07-12 18:59:46 发布

那年桃花盛开时节

最新推荐文章于 2021-07-12 18:59:46 发布

阅读量1.4w

点赞数

分类专栏： web前端文章标签： jquery插件 web前端

本文链接：https://blog.csdn.net/YZCSzhiYZTY/article/details/45271209

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

页面结构及测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <!-- 引入jquery脚本库，必须 -->
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <style type="text/css">
        /* 给飘窗添加一些基础样式，如宽度，高度和背景颜色等等 */
        .automv{width: 200px;height: 200px;background-color: blue;}
        </style>
    </head>
    <body>
        <!-- 飘窗元素 -->
        <div class="automv"></div>
        <script type="text/javascript">
        //定义插件
        !function($){
        /**
        * Description: jquery飘窗插件，可自适应浏览器宽高的变化
        * Author: YZCS
        * CreateTime: 2015-04-25
        * param: args={startL:default, startT:default, angle:-Math.PI/4, speed: 125} 
        * 参数说名: startL飘窗初始时距离左边的距离, startT飘窗初始化距离顶部的距离, angle飘窗初始运动方向, speed运动速度(px/s)
        * CopyRight: GPL 
        */
        $.fn.autoMove = function(args){
            //先定义一些工具函数判断边距
            function isTop(pos, w_w, w_h, d_w, d_h){//飘窗到达上边距
                if(pos.top<=0){
                    return true;
                }else{
                    return false;
                }
            }
            function isBottom(pos, w_w, w_h, d_w, d_h){//飘窗到达下边距
                if(pos.top>=(w_h-d_h)){
                    return true;
                }else{
                    return false;
                }
            }
            function isLeft(pos, w_w, w_h, d_w, d_h){//飘窗到达左边距
                if(pos.left<=0){
                    return true;
                }else{
                    return false;
                }
            }
            function isRight(pos, w_w, w_h, d_w, d_h){//飘窗到达右边距
                if(pos.left>=(w_w-d_w)){
                    return true;
                }else{
                    return 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: 'absolute', 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);
        </script>
        <script type="text/javascript">
        //测试插件
        $('.automv').moveAuto({angle:-Math.PI/4, speed:120});
        </script>
    </body>
</html>

那年桃花盛开时节

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
jquery实现的一个网页飘窗小插件

页面结构及测试代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test</title>  <script type="text/javascript" src="js/jquery-1.7.2.min.js
复制链接

扫一扫

专栏目录